LESSON 2: Generating a Color Palette
I'm going to assume that you've already read lesson 1 at this point, if not, go back and read it.
The methods I'll describe here are pertaining to Photoshop, but other programs such as Gimp and PaintShopPro are similar. Graphics Gale is a little different, but the same ideas can be applied.
The first step in generating a palette is of course, picking a base color. For our purposes I'll demonstrate starting with a light color, a dark color, and a midtone.
Light Colors:
You'll probably want to start with a light color when trying to shade white or pale colors, so for our purposes I'm starting with white.
One key point about spriting is that you never want to use pure white, nor pure black. Using the color sliders you can drop the blue and green values slighty to warm up the white. After painting or filling a large area with the warm white, the next step is to get a shadow color.
Now why bother with trying to eyeball the color sliders? Instead make a selection based on the white. If you don't have a large enough area to see your colors through the marching ants, you can hit ctrl H to hide them. Then we'll go to Image>Adjustments>Hue/Saturation or hit ctrl U.
http://www.alisachristopher.us/rmxp/lessons/hue-sat.png[/IMG]
The reason why we'll use the Hue/Sat instead of Brightness/Contrast is that when we drop or raise the value of a color, we tend to loose saturation, and Hue/Sat allows us to compensate for this.
You'll want to move the dialog box around so that you can see the image, and make sure the box for "preview" is checked. So we'll drop the lightness slider, and raise the saturation slider. You'll want to make sure to do enough of a change to provide some real contrast since we're determining our darkest value.
After that's applied we'll want to cool the shadow down (remember, warmlight/coolshadow) so go to Image>Adjustments>Color Balance or hit ctrl B.
http://www.alisachristopher.us/rmxp/lessons/bal.png[/IMG]
Make sure we've got "preserve luminosity" checked and the dot is selected for midtone. Usually you'll move the first slider to the left towards cyan, and the third slider to the right towards blue. For this I also moved the middle slider to the left towards magenta.
Now we've got a highlight and a shadow color:
http://www.alisachristopher.us/rmxp/lessons/white1.png[/IMG]
Here's the part where graphics programs help to take the guess work out of the middle colors by using opacity as a way of quick generating colors. (in graphics gale you'll have to create layers and use their opacity to accomplish this, unless someone who uses the program can prove me wrong.)
So we'll select some of the highlight color now, and choose the paintbucket tool (G) and alt click to sample the shadow color. Then set the tool opacity to 50% (you can hit 5 on the numpad) and fill the selection giving us a color that's exactly between the highlight and shadow.
http://www.alisachristopher.us/rmxp/lessons/white2.png[/IMG]
We can make smaller selections and repeat to generate the other values. In this case rather than using halfs, I used thirds (33% and 66%, yay for math).
http://www.alisachristopher.us/rmxp/lessons/white3.png[/IMG]
Looks pretty good, but what if I want a cooler white? No problem, that's when we go back to Color Balance and cool the whole thing down. You'll probably want keep the highlights still a little warm by pushing the bottom slider towards yellow, but midtone and shadow you can push towards blue and cyan. and as an extra step, probaly go back to hue sat and drop the saturation a little bit (not all the way we still want some color)
http://www.alisachristopher.us/rmxp/lessons/white5.png[/IMG]
Dark Colors:
This is going to be basically the same as the lights, except in reverse. We'll start with a dark color (remember never use pure black) and make a selection, then using Hue/Sat and Color Balance, we'll brighten and warm for our highlight.
http://www.alisachristopher.us/rmxp/lessons/black1.png[/IMG]
Then using the same trick with the opacity of the paintbucket generate the extra tones inbetween.
http://www.alisachristopher.us/rmxp/lessons/black2.png[/IMG]
And incase we need a warmer black, go back to Color Balance and push the midtones and shadows towards red, and the highlights towards yellow.
http://www.alisachristopher.us/rmxp/lessons/black4.png[/IMG]
Midtones:
Basically the same process as before, except we'll have to use Hue/Sat and Color Balance to generate both a highlight and a shadow. So for the highlights, raise the lightness and push the color balance towards yellow; for the shadows drop the lightness and push the color towards blue/cyan.
http://www.alisachristopher.us/rmxp/lessons/beige1.png[/IMG]
And a little more work with the paintbucket we can create the other values.
http://www.alisachristopher.us/rmxp/lessons/beige2.png[/IMG]
Putting it all together:
Now swatches are all fine and good, but it takes actual application to the sprite to determine if we've got the right colors. If you work in layers, or use the magic wand (remember to set anti-aliasing off and tolerance to 0), you can always adjust the colors once they're on the sprite.
By putting colors together on a sprite, it lets us see how the colors affect one another. For example, here's a sprite with a darker skintone with a cool black and a warm black for hair color.
http://www.alisachristopher.us/rmxp/les ... lette1.png[/IMG]http://www.alisachristopher.us/rmxp/lessons/palette2.png[/IMG]
In this case I decided I wanted the warm black for the hair since I will also include reds in the sprite.
And in honor of Pirates 2 coming out tomorrow:
http://www.alisachristopher.us/rmxp/les ... lette3.png[/IMG]yarr! (admitedly not one of my better sprites, but he gets the point across)
http://www.alisachristopher.us/rmxp/les ... lette4.png[/IMG]
The white of his shirt started out as the warm white from ealier in the lesson, but because of the other colors around it, the shadows had to be punched to create more contrast. This was done easily by going to image>adjustments>levels or ctrl L, then moving the midtone triangle towards the right to darken the shadows and midtones.
I greatly encourage you to look at other sprites and sample their colors/palettes, and to share palettes with each other. You can also sample colors from refrence pictures and art.