Graphics in 3 Easy Steps
A Feature by Moogle1

This article is for those who have trouble with coloring in their graphics. Camdog has been showcasing some of his game's art in the journals and originally I had intended to include the text of this article in my reply, but I realized that this process could be useful to a lot more people, so here you have it. I'm not known for dazzling graphics, but I've improved quite a bit in my years of game design. Lately, I'm settling into a bright, cartoony style, and this article is made for those who are similarly not looking for realistic graphics. The following steps refer mostly to sprites (specifically large ones), but can also be used for tiles and other graphic types.

#1. Start out with black outlines and flat colors, no shading at all. Limit the number of colors per sprite to about five or six total.

You can get surprisingly good results with just this -- see the RPG Defense preview in this issue, which does nothing more. Your graphics will look cartoony and two-dimensional, but they won't look bad unless you messed up the outline. If you're satisfied with the results at this point, there is no reason why you can't stop here. Otherwise, don't go on to the next step until you're happy with your outlines.

#2. For each major color in the sprite or tile, add one shading color that is two or three shades darker than the original. Don't make it just one shade off, since that will give you bad results. Use the shading to add texture to the sprite. Don't bother adding extra shading to colors that barely appear in the sprite unless you're convinced that it offers a significant improvement. For 20x20 walkabouts, you should be gentle with the shading.

I'd discourage dithering with your shading (if you don't know what this means, you can probably ignore it). At this point, your graphics should be transitioning from flat-cartoony to more realistic with a little more depth. Two shades is still very manageable. If you're content with the sprites at this point, you can easily stop here. Don't go onto the next step until you're satisfied with the shading.

Shading can be tricky. I won't attempt to describe shading techniques in any depth here; there are better articles on that. The key things to remember are light source and texture. Shadows should always fall in the same direction, and they should only look smooth if they're on a smooth surface. You can use careful shading to suggest feathers on a wing, for example, without having to detail each feather individually.

#3. If you've decided to go to step 3, then it's probably because you don't like the style you've ended up with. A very effective way to add more realism to your graphics at this point is to ditch the black outlines. For each major color, add a shade that is three to five shades darker than the current darkest shade. Replace the relevant outlines with your new color.

You can stop here but it won't look as good as it could. You should have three shades for your major colors now: the original, the shading color, and the outline color. You can add depth to your graphics now by changing some of the outlines to the shading color. The darker color suggests a very solid outline, where the lighter color makes the outline seem less defined. You may need to adjust some of your shading at this point to make it look good.

At this point, if you're still not satisfied, you may want to add one more shading color to one or two of the key colors in the sprite. When you're done, play with alternate palettes to see what looks good on your sprite. This is my favorite part. I highly recommend aligning your palettes between sprites so that, for example, the first color is the outline, the second color is the light skintone, the third color is the shaded skintone, the fourth color is white for the eyes, and so on. If you maintain the same color code for each palette, then any sprite will work in any other sprite's palette, which may give you more enemy ideas and so on.

If you still don't like the way your sprite looks by now, then one of two things has probably happened. Either you rushed through one of the steps (such as proceeding to step #2 when the basic figure still isn't right) or you are looking for a different style than this article offers you. I've tossed around a lot of graphical styles and find that this one works best for me. It's worthwhile to try a variety of styles until you find one that fits you.

Good luck and happy spriting!