Part Five: Color

With the outline done, we have a coloring book of sorts that we can fill in. Paint buckets and other fill tools will make it even easier for us.

Picking colors can be a little more difficult, however, and color theory is a topic that is beyond the scope of the tutorial. However, here are a few basic concepts that are good to know.

HSB Color Model

HSB stands for (H)ue, (S)aturation, and (B)rightness. It's one of a number of computer color models (i.e. numerical representations of color). Other examples are RGB and CMYK, which you have probably heard of. Most paint programs use HSB for color-picking, so let's break it down:

Hue - What you understand "color" to be. You know, like "red", "orange", "blue", etc.

Saturation - How intense the color is, or how intense the color is. 100% saturation gives you the brightest color, and as saturation decreases, the color becomes more gray.

Brightness (or "luminosity") - Lightness of a color. 0% brightness is black.

Choosing Colors

What colors you choose is ultimately up to you, but here are a few things to keep in mind:

1. Less saturated and less bright colors tend to look more "earthy" and less cartoony.

2. Think about the color wheel - the further away two colors are from one another, the more they will separate. On the other hand, colors like red and orange, which have close proximity on the color wheel, look good together.

3. The more colors you use, the more distracted your sprite will look. To make a sprite stand out, use only two or three main colors. (Think about what just red and brown did for Super Mario back in the day!)

Applying Colors

The actual application of color is pretty easy. If you're using Photoshop, you want to first select the area you're going to fill with the magic wand (shortcut "W") and then fill by pressing "Alt-F" (primary color) or "Ctrl-F" (secondary color).