The Ultimate Pixel Art Tutorial

i'm going to be teaching you everything  you need to know to not only get started   with pixel art but to really kick  start your journey as an artist to get started with pixel art you'll need a  computer tablet or mobile device to draw the   pixel art you can use a mouse drawing tablet or  your finger whichever you prefer there's a lot of   software options to choose from pixel or specific  ones and more general or based ones i use a sprite   which is pixel art specific and i highly recommend  it but there are plenty of great free options too   use whatever is available to you most art software  use the same tools and workflow so the skills   are transferable anyway if you want to get up to  speed quickly i have this a sprite tutorial series   to help illustrate some of the things in this  video i've created this little pixel art wizard   the process for creating this character was  quite simple start with the silhouette then   define some features cleaning up the line work and  adding color before refining even further shadow   line color refine has a nice ring to it using  a silhouette is my preferred approach because   it allows me to focus on the simple shapes and  readability and the silhouette can't change a lot   throughout as well but the key shapes pretty much  stay the same notice how these little areas add   interest to what is essentially just a triangle  this isn't the only approach to making picks a lot   you can start off with construction lines this is  especially helpful for mapping out the proportions   of the character before adding any detail and  it can save you a lot of headaches later on if   you watch our good friend brandon you'll notice  he likes to use this technique a lot thanks for   the tip another process is to just go wild and  lay down a really rough idea and clean it up as   you go i actually really like this especially  for backgrounds because you can nail the vibe   early on and just relax as you clean it up though  it can be a little bit chaotic especially if you   don't know which direction you're going so you  may feel like it's not coming together for a   while but trust the process you can even design  in 2d if you prefer and then shrink it down   this gives a nice starting point but the  character detail can change a lot depending   on how far you shrink it and these aren't the  only ways to make pixel law everyone's process   is unique i'd recommend watching your favorite  artists to see their process and try out a bunch   of ways to learn what you find the most fun no  matter which way you like to work you can always   arrive at the same end point canvas size is a  tricky one because it really depends on what   you're trying to make the level of detail you  need and the project you're working on a good   exercise for beginners is to try making the same  thing in multiple different sizes like i did here   i probably could have went down at the 16 pixel  size here because the silhouette translates well   and the style is really simple so you don't lose  a lot of detail but this character is part of an   established project where size consistency will  be key to make sure things don't look mismatched   if you're a beginner i would recommend working  small to try and get used to the importance of   a single pixel a single pixel can change the way  something looks entirely and this can easily be   missed if you work in larger sizes i have a  challenge called september which is designed   to help you get used to the small size limits  check out this video if you want to learn more   after i've done a silhouette in the right size  i try and put down some basic line work to map   out the key areas here's some line work specific  techniques one thing to be aware of is doubles   this is where pixels meet and make a right angle  doubles can make the line work thicker and appear   darker or sharper in places for a single pixel  outline removing this corner pixel can lead to   cleaner and more consistent lines you can use  doubles to add shadow and having only doubles   in your outline can be a really bold style choice  juggies are when pixels in lines or curves appear   well jagged this can create unintentional  sharpness which can be fixed by removing   any out of place pixels or by giving more smooth  progressions to lines or curves but jaggies can   be useful too i actually use a jagged line  intentionally here to show off the shape of   the brow in the wizard's face remember this video  is not about good or bad it's about the awareness   and the intentional usage of these techniques to  help you achieve the look that you're going for   art fundamentals is a huge area so here are  just some of the things i wish i knew when i   was starting out let's take a look at a standard  hsv color picker where you select your colors in   most art software so you have your hues which are  basically just your colors a red hue is currently   selected you have your saturation which is the  intensity of the color this is increasing from   left to right from the neutral grays to the  highest saturation and value is how light or   dark something is this is the most important  thing which i'll get onto shortly but value is   generally increasing from bottom to top i say  generally because there's one very important   thing to understand each hue has its own perceived  value if we look at the hues in black and white or   grayscale you'll notice that the yellow has the  lightest value while the blues and the purples   have the darkest value so how does this apply to  the colour picker well we have four examples here   with different hues selected red yellow green and  blue i've selected a colour in the same position   of all of them in the top right hand corner even  though they're in the same position if we convert   this to black and white we can see that each of  the values are very different this is important to   keep in mind when selecting your colours value is  the most important thing to consider because it's   how you give your art a sense of 3d form and depth  using light and shadow it really doesn't matter   what colors you choose if your value selections  and value range is incorrect just won't look right   in art software you can quickly check the values  of your piece by placing a layer filled with black   on top and setting that layer mode to color it's  actually not a totally accurate representation   of the values but it's good enough for a quick  reference too many saturated colors in a piece   can make the colors clash be difficult to look  at and burn your eyes and a lot of desaturated   colours can look muted and washed out you can  use saturated colours sparingly and intentionally   to add areas of interest and focal points but  remember value is the most important i wanted   to show you this piece which uses really highly  saturated colours but the value structure is still   on point so it works there lots of different  types of contrast in visual art value hue   shape detail just to name a few high contrast  between things means that there's a large   difference and low contrast means that these  things are more similar you can use high   contrast areas to attract the viewer's eye and low  contrast for areas of rest and repetition contrast   is relative though if everything is low contrast  you get unity and pattern-like visual behavior and   for high contrast areas to stand out you need  those low contrast areas to allow it to do so   if i was to put in a bunch of texture and detail  into the wizard's beard for example the face would   stand out a lot less try and think how you can use  contrast to emphasize important parts of your work   understanding how light and shadow works can  help you shade things properly and use value   to show the 3d form if i shine a light at this  ball we can see factors that make up a basic   light model the ball blocks the light to create  a cast shadow and darken the side of the ball   the darkest part of the shadow is where the ball  makes contact with the surface which is known as   the occlusion shadow on the lit side we have our  mid tones and highlight we have our terminator   where the light transitions to shadow we also  have bounce light which is the light reflecting   from the surroundings and back onto the object  increasing the value of the cold shadow it's not   necessary to draw all of these factors in pixel  art as this might be too complicated depending   on the size you're working in but it's up to  you and the style you're going for one thing to   remember how shadow and light works really depends  on the amount of light sources their strengths and   the surrounding environment if you want to deep  dive into these topics i would highly recommend   james gurney's color and light one thing i see  quite often is if you don't consider the form   and just shade around the outsides of the object  you get this effect known as pillow shading which   doesn't aid in describing the form of the object  making it look flat materials reflect light in   different ways too notice how the matte yellow  ball doesn't have a strong highlight as the light   is diffused across the surface but the glossy  8-ball and metal object have stronger highlights   and reflect surfaces and objects if you want to  portray a particular material like wood or gold   consider how that material reflects light and use  a value structure and range that helps show that   you may hear or see colors being described as  warm and cool if we look at these two colours   the central colour appears cool compared to the  red and in this example the colour appears warm   compared to the blue it's actually the same  neutral gray that appears differently because   of the surrounding colours if we look at the red  and blue together in this example the blue is the   cooler color and the red is the warmer color but  if we take that same red and put it against this   new red our original red on the left is now the  cooler color the thing to take away here is that   colors are relative and will appear differently  depending on the colors surrounding it the colour   of an object is massively influenced by the light  sources and surrounding objects and environment   notice how the yellow balls colour changes as i  change the colour of the light source and it also   takes on the red of my sketchbook because of the  reflected bounce light hue shifting is a technique   i've seen a lot and i think it is a simplification  of this it's also to try and make your colors more   interesting so when you add shadow for example  instead of just shifting the value of the color   to make it darker you can shift the hue as well  towards a different color like i did here when i   shifted the shadows towards purple and the lights  towards yellow notice the difference between   a pure value change and the value and hue change  let me know which style you prefer in the comments   another kind of common beginner thing i see is  the random use of lots of different colours this   can make an image look unintentionally noisy and  you can lose control of your colour palette and   value structure it can help to limit your colour  range to try and get more cohesion in your work   if you struggle with colour selections and want  to make your life a little bit easier you can use   predefined color palettes they're also great for  getting a specific look like the game boy palette   there are lots of pre-made palettes on low spec or  you can just pick colors from your favorite movies   or or whatever and make your own but a palette  doesn't do all the hard work for you you'll   still have to consider the hue saturation value  contrast and style you're going for when you're   creating art dithering is a technique where you  create patterns to blend or give the illusion that   there are more colors than there actually are if  we have a limited palette of only black and white   we can create this checkerboard pattern to create  the midtone if we look from far away or blur it   notice how it appears great with varying pattern  complexities we can create a whole value scale   from black to white you can be really creative  with dithering and the patterns that you use   can have different effects this one looks more  noisy and gritty for example you can even use   dithering to create new colours by mixing colours  in patterns which is especially useful if you're   working from a limited palette dithering can look  noisy and add unintentional texture especially in   smaller sprites so be careful with your usage  i really like this little portrait i think it   uses dithering really well even in the smaller  spaces anti-aliasing or a a is a technique used   to soften pixel lock to achieve this we choose  a color with a value which is between the two   immediate colors here we see a circle with no  anti-aliasing so it looks sharp the second has   some anti-aliasing which successfully softens the  shape but the third one has too much which softens   the circle but also alters the shape by adding  these corners you gotta be selective and make   sure it doesn't change the shape in this example  we have internal and external anti-aliasing but   note that if the background changes the effect of  the external anti-aliasing stops working because   of the value change as i've mentioned a lot the  value is the most important so you can be creative   with the hue if you like it can even be used to  alter the appearance of your linework making it   appear thinner in some parts looking at the wizard  here's an example with too much anti-aliasing it's   really not required at all but if i was going to  use any as a style choice i might use it to soften   the beard this is quite an advanced technique  i think and you have to be careful with your   application but as some inspiration this is one  of my favorite examples of using anti-aliasing   really well using shading or anti-aliasing  techniques for the entire length of an outline can   lead to an effect known as banding this can make  your image look immediately flat or noisy instead   of helping to build the form you can kind of see  this with pillow shading which i described earlier   now a bunch of different outline styles here's a  few that i can think of off the top of my head a   single black outline looks graphic or cartoony and  it's great for animation a double outline looks   really thick as we saw earlier when we looked  at doubles you can use a normal outline with a   different color this can reduce the contrast and  sharpness of the outline there's a colored outline   which represents the area that it's outlining we  have a light source outline which represents the   area it's outlining and the direction of a light  source we have selective outline or sellout where   anti-aliasing is used in the linework to help  describe the form we have broken outlines which   is a form of selective outlining where parts  of the outline are left out completely again   to help describe the form you can even use no  outlines if you want for the wizard i've used   a single pixel black outline because it fits into  the style that i'm going for i've also broken the   outline a little in the hat to make that shape  read more clearly doing pixel art with clusters   in mind is the technique of pairing up pixels or  multiple pixels to form chunks to describe areas   generally avoiding single pixels a single pixel  or orphan pixel can introduce noise or look out of   place amongst clusters but they can't be used to  add details highlights especially in small pixel   lot and even introduce a noisy or gritty effect if  that's what you're going for the wizard's eyes are   single pixels which is necessary because of the  size of the sprite and also just because i like   the way it looks i thought this piece was really  interesting because it basically only uses single   pixels while it may look noisy and gritty it  works really well for the style of the piece   one thing to note when taking reference from  retro game pixel art is the fact that some of   these games were being displayed on crt monitors  which put simply blurs pixels if we look at the   raw pixels of rystar an old sega game we see the  pixels very clearly might even be able to spot   some banding and jaggies but none of that matters  if we actually look at how it was displayed on   the clt screens in a 2017 interview the creators  of sonic and tails mentioned that once they were   aware of this they started designing everything  to make use of the blurriness even using it to   create intermediate colors while i can't say  for sure that all retro pixel art games were   designed intentionally for the crt blurriness  it's something to keep in mind when looking for   reference or inspiration because today we mainly  see the raw clean pixels without any filtering   using your knowledge of art fundamentals  and pixelart techniques as well as your own   personal tastes there are an endless amount of  styles you can come up with you might like the   way one thing looks while someone else doesn't  there is no right or wrong style but remember   making informed and consistent style choices  can be helpful to ensure everything you're   making looks intentional and fits into the world  you're building there is a lot of information   in this video that i've been practicing for  years and i am still learning so please don't   be discouraged if it seems like a lot the  most important part is that you're having   fun and enjoying the journey because art is a  lifelong process make sure you subscribe for   more art videos and if you're interested in  supporting the channel further check out the   patreon and join the community on the discord  i'd really appreciate it thanks for watching

Channel: Saultoons

Views: 493,436

Keywords: pixel art tutorial, pixel art, ultimate pixel art tutorial, pixel tutorial, tutorial, how to draw pixel art, pixel art tutorials, pixelart, aseprite, how to pixel art, pixel art for beginners, pixel, aseprite tutorial, pixel art guide, pixel art tips, saultoons, game dev, pixel artist, pixel art for games, pixel art character, pixel art workflow, how to become a pixel artist, how to pixel art 2021, learn pixel art, guide for pixel art, pixel art for dummies, basics of pixel art

Id: lfR7Qj04-UA

Length: 14min 14sec (854 seconds)

Published: Thu Jun 17 2021