Teaching the ways of Pixel Art [Lesson 2: Shading]
Posted: Sat 16 Apr, 2005 9:34 pm
the_unknown_one: The legs may look weird but if you hadn't noticed, all my FFX chibi characters are based off the same exact style. Each artist has his own style, so.. it depends. And not everyone's sprite has to look like mine I'll explain this in greater detail next lesson.. because I'm bored right now and have nothing I feel like doing except the shading lesson!
First off, why do we do shading? Just because it looks cool? How do we do it? What you need to think of is if the sprite is real, in full blown-3d, sitting in front of you. Can you do that? Might be hard for some people, easy for others.. but bear with me.
Now think of the sun hovering above the sprite, shining in its glory (no you don't have to make it):
When it comes to shading, every sprite has a light source. It could be from the left, the right, in front of, behind, below, or above. Usually it's either directly above or above at an angle.
Well since the sun is above, it can't pierce its light straight through the person and light him up completely the same on every part of him.. there will be SHADOWS (ooo, scary! *echo* )
The light source shines down its light, like so:
Now since the sun can't light him up everywhere, we must consider the shadows on him. Where would they be? Well, if the sun is behind you, your shadow is in front of you. If the sun is in front of you, your shadow lurks from behind.. and if the sun is directly above you, you've got a shadow below you that you walk upon. Listed are spots where there should be shadows, in no particular order:
1. The neck - Since a person's head is usually round, some of the face is going to stick out in front of the neck, which the sun can't quite reach. So generally this part would have some darkness to it.
2. The arms - Our arms ARE solid, and thus light cannot completely surround them at the same level. Generally the underside of your arm as you look at it will be darker colored than the rest of your arm. Why? Because light is usually above you, whether it be a ceiling light or the outdoor sun. (Also because light reflects off your body and onto it but I don't want to get technical)
3. The legs - You might not realize this, but your knees can actually create a shadow since they stick out. Also since the lower leg is lower than the rest of the body, it can recieve less light, although this isn't always the case. Generally in sprites however, the lower the part, the darker it will be.
4. The feet - Probably the darkest part of the entire body that you can see would be the underside of the foot/shoe. It's the lowest part of the body and very little light is able to reach the underside. Thus there would be shading on the bottom.
5. The head - The top part of the head gets shading too, depending on what's there. If it's a head covering like a hat then the same rule applies to the neck, but if it's hair then it gets a lot trickier.
6. The cap lip - This is just an extra detail but this would require shading as well, but only a pixel or two.. maybe three.
7. The stomach - Or waist. The torso usually has a stomach that may or may not stick out, but generally the shirt might stick out above or sink in at the bottom. For the most part it's lower at the waist, so it'll probably be darker.
All that being said, let's start on the shading! We'll start with the simple, obvious things first, such as the arms. A little bit more visualization will have to be done since I'm removing the sun from the pixel world for now.. hehehe (darkness shall reign! kidding )
How can we do shading with those ugly colors down there? AHHH!
What we'll do first is use the Dropper tool and grab the skin color (the peachish one). If you didn't know how to Edit Colors before so you can get your own custom colors, go to Colors, then Edit Colors. Now theres a window full of the same colors.. cute. Click on Define Custom Colors >> and you'll get a very colorful picture to the right, with a box of number boxes and a sliding bar.
How is it possible to get a decent shadow color? Drag the sliding bar that's on the right, down to a darker color.
Ohmigod it's orange, that's not a shadowy color! Not brown either! What do I doooooooo?! Well, first calm down. Second, look at the crosshair-thing in the upper-left part of the colorful area. Drag it downward, and you get more pale colors. Generally shadows have a lack of brightness and life to them, they're more pale. Keep that in mind. If you want the technical term, it's call Saturation, as abbreviated in the appropriate value box. You can change the values in the box for the same effect if you don't want to drag the crosshair.
Okay, now we've got funky, pastel-like colors that still don't seem like shadows. Well, if you've ever watched some sci-fi shows or movies, you might have heard an alien call humans 'pink-skinned', or just might have heard that somewhere. Pink is just a lighter color of red, and we're in the orange range. Now, unless a person eats nothing but carrots, they probably won't be orange. Try dragging the crosshair a bit closer to the red, and you might get a better color. Finding the right shade is an experimental process, something I often build different palettes of until I find what I like.
Now that we've got the right shade (or maybe we don't, but that's what experimentation is for), let's try it out! Color in the pixels at the bottom of the arms that are closest to the body, like so:
His arms now look like they're sticking out, 3-dimensionally. They look out of place, but only because the rest of the sprite isn't shaded like that. They're the easiest of the sprite to color in, because their shape is very simple and easy to use detail with. Now on to the next part of the sprite: the neck, face, and cap.
Generally you must think of the head as ROUND. Using the same shadow color you created for the arms, try drawing in the lower part of the head (aka the neck, if you can visualize it like that). You might end up making something like this:
Well that's nice.. except it doesn't look that great. What's wrong? Well, the shadow isn't rounded like the head is! What if we threw some extra pixels on the sides and made some kind of curve, like so?:
Now he looks like he almost has a beard.. weird. </rhyme> You could leave it like that, or you can do a shading trick that involves creating a curved shadow on only one side.
It's totally a judgement call, you decide what you want best. Every artist has a style they go with, usually by instinct. Compare different styles that you end up creating and decide which is best just from looking at them.
Before I go on, I think I might add some hair to this guy. I'll let him keep the cap, and, thinking about the realism of how a cap looks like on a person with hair, I realize that hair kinda just stick out from the cap's bottom edge. So I'll just throw some lines down from the cap's lower outline, and get something like so:
That's a very basic, experimental drawout of the hair. It might stay that way or it might be changed later, but for now it's got a decent shape.
As for the cap, let's try using the same idea as was done for the lower head. Find a darker, shadow color to shade with by getting the red color and editing it. Draw in pixels in a curved fashion like before, and the result is..
Now theres a rectangle of light at the top.. and it looks weird. How can we fix that? Theres another little thing to think about.. still thinking how how the person is 3d like we are, the cap would curve to the back along with the head, so theres probably darker shades in the back. Light tends to focus on a specific part of an object, making it shine there and then shadow outward to the edges and bottom. Playing around with the pixels in the top (the 'back' of the cap) and trying to make a nice focused light area in the middle could result in this:
I don't know how to explain how I did that, I just messed around with it for a bit until it looked good. That's mostly what pixel art is all about, experimentation and teaching yourself what looks good. If you're a perfectionist and think everything is imperfect, you might strive infinitely on that, but hopefully things would be resolved and look great
Now to work on the lip of the cap. Using the same concept as the main part of the cap, start off by making a shadow curve on the bottom, then work your way around and make a centered light spot.
From now on I won't have nearly as many steps and descriptions as I'm assuming you've learned some of the things I've showed so far Well now, he's looking pretty cool now.. his lower body is still pretty plain though. Let's work on the legs!
But before we do, let's get into another important aspect of pixel art. When you've got a lots of colors and shades coming in like this, you might want to organize them into a Palette. A palette is just a bunch of colors grouped together, organized and easy for access. Typically what I do is have the similar colors shade upward from dark to light, as seen here:
Okay, now that's it's organize, I also realize something: the lighter colors in the palette are kinda hard to see with a white background. So what I'll do is change the background color to a dark, yet somewhat calm color like a blue-green/teal color.
Often I do this so I don't bust my eyes trying to tell if a pixel is the wrong color or not.. and so I'm more comfortable with my workspace.
Now to the legs. One of two things we can do: we can either make a new gray shade for the shadow cast on the legs, or we can reuse a color that we already have, from the shoes. To be on the safe side I'll just make a new color and use that.
Okay, not too bad, but we need to consider the fact that the character has knees, which are round. And a technique called Dithering involves using a checkerboard type of shading with 2-3 colors, but since we have such a small space, that's not easy to do. A combination of both thoughts requires a simple removal of the middle pixel.
Now his legs have a more natural feel to them, with very few colors. On to the feet! With feet, the light usually shines on the center of them, and with feet you may want to use 3 colors. It makes them nice and shiny, and with only 2 colors it doesn't have as good of an effect.
Since the light source is above the character and we only have space for 2 pixels high instead of 3, we can't put the lighter shade in the center, because there is none, so I'll put them on the upper part. I'll be reusing the colors from the pants for the shading.
Okay, that's a start. Now circle the lighted spots with a darker shade, the pants's shadow color.
To improve on that, think about the 3d existance of him again, think of how it gets darker as the shoe gets closer to the character, because most of the light is focused on the tip of the shoe. The result is a single pixel change to each.
At this point he looks great, we could consider him finished now.. but theres a few things I'd like to work on, like the stomach/lower torso, maybe the hair, and more shading on the face.
Now first thing I noticed was that I passively forgot about that little 'light' detail I tried adding to his shirt, which doesn't really work in my opinion.. so I'm just now removing that.
Next I'm going to make the shirt a lighter shade of black, just a very dark gray. The process of doing this involves coloring in the middle and leaving the black outline.
Then one-sided curved shading is done to the stomach area, and we get something like this:
Now for the heck of it I'm going to make the eyes bigger.. dunno why, just feel like it
I didn't want him to have squinty eyes, did I? Nah. The next part involves 3d thinking again.. oh no The hair overlaps the head, as does the cap. Together they create enough of a shadow on the upper part of the head. So by drawing an underline shadow, then curving it downward, you get a completed head!
Some people don't like to do this next part, as it isn't as retro. I do it sometimes to give it more breatheable life. There would still be a dark outline but it would be an outline of a darker shade. I won't go into detail on how to do this, but I'll say this: A lot of times you'll use the shadow color to outline, and if not, a bit of a darker shade of it. The result only adds two new colors:
So I'd say this character is finally finished. Wow, let's compare the original with the new:
I would say this looks a LOT better.. almost completely different. And to be honest, going through the process of this lesson I ended up improving what he originally looked like after I had improved him.. hehe.
Well this was an extremely long lesson, but hey.. if you're learning that's great. Next lesson would involve lots of extra little tips, including some extra things about mspaint that you might not have thought about doing, or knew about. I'm tired, so I'm gonna play some FF9 and Tetrisphere Oh, and drink Dr. Pepper as well. And remember: comments suggestions, and questions are welcome at any time
First off, why do we do shading? Just because it looks cool? How do we do it? What you need to think of is if the sprite is real, in full blown-3d, sitting in front of you. Can you do that? Might be hard for some people, easy for others.. but bear with me.
Now think of the sun hovering above the sprite, shining in its glory (no you don't have to make it):
When it comes to shading, every sprite has a light source. It could be from the left, the right, in front of, behind, below, or above. Usually it's either directly above or above at an angle.
Well since the sun is above, it can't pierce its light straight through the person and light him up completely the same on every part of him.. there will be SHADOWS (ooo, scary! *echo* )
The light source shines down its light, like so:
Now since the sun can't light him up everywhere, we must consider the shadows on him. Where would they be? Well, if the sun is behind you, your shadow is in front of you. If the sun is in front of you, your shadow lurks from behind.. and if the sun is directly above you, you've got a shadow below you that you walk upon. Listed are spots where there should be shadows, in no particular order:
1. The neck - Since a person's head is usually round, some of the face is going to stick out in front of the neck, which the sun can't quite reach. So generally this part would have some darkness to it.
2. The arms - Our arms ARE solid, and thus light cannot completely surround them at the same level. Generally the underside of your arm as you look at it will be darker colored than the rest of your arm. Why? Because light is usually above you, whether it be a ceiling light or the outdoor sun. (Also because light reflects off your body and onto it but I don't want to get technical)
3. The legs - You might not realize this, but your knees can actually create a shadow since they stick out. Also since the lower leg is lower than the rest of the body, it can recieve less light, although this isn't always the case. Generally in sprites however, the lower the part, the darker it will be.
4. The feet - Probably the darkest part of the entire body that you can see would be the underside of the foot/shoe. It's the lowest part of the body and very little light is able to reach the underside. Thus there would be shading on the bottom.
5. The head - The top part of the head gets shading too, depending on what's there. If it's a head covering like a hat then the same rule applies to the neck, but if it's hair then it gets a lot trickier.
6. The cap lip - This is just an extra detail but this would require shading as well, but only a pixel or two.. maybe three.
7. The stomach - Or waist. The torso usually has a stomach that may or may not stick out, but generally the shirt might stick out above or sink in at the bottom. For the most part it's lower at the waist, so it'll probably be darker.
All that being said, let's start on the shading! We'll start with the simple, obvious things first, such as the arms. A little bit more visualization will have to be done since I'm removing the sun from the pixel world for now.. hehehe (darkness shall reign! kidding )
How can we do shading with those ugly colors down there? AHHH!
What we'll do first is use the Dropper tool and grab the skin color (the peachish one). If you didn't know how to Edit Colors before so you can get your own custom colors, go to Colors, then Edit Colors. Now theres a window full of the same colors.. cute. Click on Define Custom Colors >> and you'll get a very colorful picture to the right, with a box of number boxes and a sliding bar.
How is it possible to get a decent shadow color? Drag the sliding bar that's on the right, down to a darker color.
Ohmigod it's orange, that's not a shadowy color! Not brown either! What do I doooooooo?! Well, first calm down. Second, look at the crosshair-thing in the upper-left part of the colorful area. Drag it downward, and you get more pale colors. Generally shadows have a lack of brightness and life to them, they're more pale. Keep that in mind. If you want the technical term, it's call Saturation, as abbreviated in the appropriate value box. You can change the values in the box for the same effect if you don't want to drag the crosshair.
Okay, now we've got funky, pastel-like colors that still don't seem like shadows. Well, if you've ever watched some sci-fi shows or movies, you might have heard an alien call humans 'pink-skinned', or just might have heard that somewhere. Pink is just a lighter color of red, and we're in the orange range. Now, unless a person eats nothing but carrots, they probably won't be orange. Try dragging the crosshair a bit closer to the red, and you might get a better color. Finding the right shade is an experimental process, something I often build different palettes of until I find what I like.
Now that we've got the right shade (or maybe we don't, but that's what experimentation is for), let's try it out! Color in the pixels at the bottom of the arms that are closest to the body, like so:
His arms now look like they're sticking out, 3-dimensionally. They look out of place, but only because the rest of the sprite isn't shaded like that. They're the easiest of the sprite to color in, because their shape is very simple and easy to use detail with. Now on to the next part of the sprite: the neck, face, and cap.
Generally you must think of the head as ROUND. Using the same shadow color you created for the arms, try drawing in the lower part of the head (aka the neck, if you can visualize it like that). You might end up making something like this:
Well that's nice.. except it doesn't look that great. What's wrong? Well, the shadow isn't rounded like the head is! What if we threw some extra pixels on the sides and made some kind of curve, like so?:
Now he looks like he almost has a beard.. weird. </rhyme> You could leave it like that, or you can do a shading trick that involves creating a curved shadow on only one side.
It's totally a judgement call, you decide what you want best. Every artist has a style they go with, usually by instinct. Compare different styles that you end up creating and decide which is best just from looking at them.
Before I go on, I think I might add some hair to this guy. I'll let him keep the cap, and, thinking about the realism of how a cap looks like on a person with hair, I realize that hair kinda just stick out from the cap's bottom edge. So I'll just throw some lines down from the cap's lower outline, and get something like so:
That's a very basic, experimental drawout of the hair. It might stay that way or it might be changed later, but for now it's got a decent shape.
As for the cap, let's try using the same idea as was done for the lower head. Find a darker, shadow color to shade with by getting the red color and editing it. Draw in pixels in a curved fashion like before, and the result is..
Now theres a rectangle of light at the top.. and it looks weird. How can we fix that? Theres another little thing to think about.. still thinking how how the person is 3d like we are, the cap would curve to the back along with the head, so theres probably darker shades in the back. Light tends to focus on a specific part of an object, making it shine there and then shadow outward to the edges and bottom. Playing around with the pixels in the top (the 'back' of the cap) and trying to make a nice focused light area in the middle could result in this:
I don't know how to explain how I did that, I just messed around with it for a bit until it looked good. That's mostly what pixel art is all about, experimentation and teaching yourself what looks good. If you're a perfectionist and think everything is imperfect, you might strive infinitely on that, but hopefully things would be resolved and look great
Now to work on the lip of the cap. Using the same concept as the main part of the cap, start off by making a shadow curve on the bottom, then work your way around and make a centered light spot.
From now on I won't have nearly as many steps and descriptions as I'm assuming you've learned some of the things I've showed so far Well now, he's looking pretty cool now.. his lower body is still pretty plain though. Let's work on the legs!
But before we do, let's get into another important aspect of pixel art. When you've got a lots of colors and shades coming in like this, you might want to organize them into a Palette. A palette is just a bunch of colors grouped together, organized and easy for access. Typically what I do is have the similar colors shade upward from dark to light, as seen here:
Okay, now that's it's organize, I also realize something: the lighter colors in the palette are kinda hard to see with a white background. So what I'll do is change the background color to a dark, yet somewhat calm color like a blue-green/teal color.
Often I do this so I don't bust my eyes trying to tell if a pixel is the wrong color or not.. and so I'm more comfortable with my workspace.
Now to the legs. One of two things we can do: we can either make a new gray shade for the shadow cast on the legs, or we can reuse a color that we already have, from the shoes. To be on the safe side I'll just make a new color and use that.
Okay, not too bad, but we need to consider the fact that the character has knees, which are round. And a technique called Dithering involves using a checkerboard type of shading with 2-3 colors, but since we have such a small space, that's not easy to do. A combination of both thoughts requires a simple removal of the middle pixel.
Now his legs have a more natural feel to them, with very few colors. On to the feet! With feet, the light usually shines on the center of them, and with feet you may want to use 3 colors. It makes them nice and shiny, and with only 2 colors it doesn't have as good of an effect.
Since the light source is above the character and we only have space for 2 pixels high instead of 3, we can't put the lighter shade in the center, because there is none, so I'll put them on the upper part. I'll be reusing the colors from the pants for the shading.
Okay, that's a start. Now circle the lighted spots with a darker shade, the pants's shadow color.
To improve on that, think about the 3d existance of him again, think of how it gets darker as the shoe gets closer to the character, because most of the light is focused on the tip of the shoe. The result is a single pixel change to each.
At this point he looks great, we could consider him finished now.. but theres a few things I'd like to work on, like the stomach/lower torso, maybe the hair, and more shading on the face.
Now first thing I noticed was that I passively forgot about that little 'light' detail I tried adding to his shirt, which doesn't really work in my opinion.. so I'm just now removing that.
Next I'm going to make the shirt a lighter shade of black, just a very dark gray. The process of doing this involves coloring in the middle and leaving the black outline.
Then one-sided curved shading is done to the stomach area, and we get something like this:
Now for the heck of it I'm going to make the eyes bigger.. dunno why, just feel like it
I didn't want him to have squinty eyes, did I? Nah. The next part involves 3d thinking again.. oh no The hair overlaps the head, as does the cap. Together they create enough of a shadow on the upper part of the head. So by drawing an underline shadow, then curving it downward, you get a completed head!
Some people don't like to do this next part, as it isn't as retro. I do it sometimes to give it more breatheable life. There would still be a dark outline but it would be an outline of a darker shade. I won't go into detail on how to do this, but I'll say this: A lot of times you'll use the shadow color to outline, and if not, a bit of a darker shade of it. The result only adds two new colors:
So I'd say this character is finally finished. Wow, let's compare the original with the new:
I would say this looks a LOT better.. almost completely different. And to be honest, going through the process of this lesson I ended up improving what he originally looked like after I had improved him.. hehe.
Well this was an extremely long lesson, but hey.. if you're learning that's great. Next lesson would involve lots of extra little tips, including some extra things about mspaint that you might not have thought about doing, or knew about. I'm tired, so I'm gonna play some FF9 and Tetrisphere Oh, and drink Dr. Pepper as well. And remember: comments suggestions, and questions are welcome at any time