Part Six: Shading

Shading is a crucial step on our quest for pixel demi-god status. Here's where the sprite either gets some pop, or it devolves into a horrible mess. Heed my words, however, and you're sure to succeed.

Step 1: Choosing a Light Source

First, we have to pick a light source. If your sprite is part of a larger scene, there might be all kinds of local light sources (like lamps, fire, lamps on fire, etc.) shining on it. These can mix in very complex ways on the sprite. For most cases, however, picking a distant light source (like the sun) is a better idea. For games especially, you will want to create a sprite that is as generally lit as possible so that it can be used anywhere.

I usually choose a distant light source that is somewhere above the sprite and slightly in front of it, so that anything that is on top or in front is well-lit and the rest is shaded. This lighting looks the most natural for a sprite.

Step 2: Shading

Once we have defined a light source, we start shading areas that are farthest from the light source with a darker color. Our "up and to the front" lighting model dictates that the undersides of the head, the arms, the legs, etc., should be shaded.

Remember that the play between light and shadow defines things that are not flat. Crumple up a piece of white paper into a ball and then unroll it and lay it on a table - how can you tell that it's not flat anymore? It's because you can see the little shadows around the crinkles. Use shading to bring out the folds in clothing, and to define musculature, hair, fur, cracks, etc.

Step 3: Soft Shadows

A second shade, lighter than the first, should be used for soft shadows. These are areas that are indirectly lit. It can also be used to transition from the dark to the light, especially on curved surfaces.

Step 4: Highlights

Places that are being hit directly by the light source can have highlights applied onto them. Highlights should be used in moderation (much less than shadows), because they are distracting.

Always apply highlights after shadows, and you will save yourself some headache. Without the shadows already in place, you will be inclined to make the highlights too large.

Do's and Don't's

Shading is where most beginners get tripped up. Here are some rules you should always follow when shading:

1. Don't use gradients. The ultimate newb shading mistake. Gradients look dreadful, and don't even begin to approximate the way light really plays off a surface.

2. Don't use "pillow-shading". Pillow shading is when one shades from the outline inward. It's called "pillow-shading" because it looks pillowy and undefined.

3. Don't use too many shades. It's easy to think that "more colors equals more realistic". In the real world, however, we tend to see things in big patches of light and dark - our brains filter out everything in between. Use at most two shades of dark (dark and really dark), and two shades of light (light and really light) on top of your foundation color.

4. Don't use colors that are too similar. There's no reason to use two colors that are very similar to one another. Unless you want really blurry-looking sprites!

5. Do make shadows darker where they overlap. Don't forget that when shadows are layered on top of each other, they become darker at their intersection.