In the last tutorial you learned how tiles perfectly match up in a seamless way. You also learned how to apply highlight and shadow to create a black and white brick wall tile. In this tutorial, you will learn how to highlight and shadow colors that look at least halfway decent with each other.
Sprite Art 101 - Brick Wall II
Picking shades of gray that match when working in black in white is easy. Every shade of gray goes with every other shade of gray. This is because all the shades of gray, black, and white are not colors at all. They are merely brightness (known as luminosity.) When dealing with actual colors, say green, you have two other things to worry about : hue and saturation.
Introduction to HSL
HSL stands for hue, saturation, and luminosity. You will be using the HSL color picker during your work with sprite art most of the time. This is because it makes choosing colors and shades of colors easy.
Luminosity
You already know about luminosity. Black is no luminosity, white is the highest, and all the many shades of gray fall somewhere in between. Up until now, we've been using only luminosity in these sprite art tutorials.
Hue
Hue is what we think of as the actual color. Hue begins at red and then cycles through all the colors of the expensive crayon box and finally comes back around to a red shade again.
Saturation
Saturation is "how dull or vibrant" the color is. It starts out at a gray shade and works its way up into a glowing version of the color.
Mixing HSL
How hue, saturation, and luminosity mix determine the exact color.
Picking Colors
We left of the last tutorial with a black and white brick wall tile. Here it is :
Its time to make it look like a brick wall by adding some color. The first thing you need to do is pick a color that you might think might make a good base color for a brick wall. The other two colors will be based off this color. I chose a shade of brown. Its hue is 22, its saturation is 78, and its luminosity is 43. It's the top, middle color of the this image :
The other colors will be explained as we go along.
There's a semi-golden rule to picking highlight and shadow color shades. There is no need to change the hue. Instead, you change the hue and saturation in proportion to each other.
Shadow Color
For the shadow color, the luminosity needs to be low, and the saturation high. This helps the color show even though its dark. Its the top, left color in the image of colors above. The color below it is the same color with the saturation low.
Highlight Color
For the highlight color, you do just the opposite. You set the luminosity high and the saturation low. This gives a brighter color without making it look like a nuclear glow. The two colors on the right are comparisons of the highlight color. The top one is with the saturation set low and the bottom one has the saturation set high.
Back To the Brick Tile
To further illustrate, here's the brick tile in the colors of the top row :
And here's the same image with one brick, one very atomic brick, colored with the colors of the bottom row :
Conclusion
You now know the secret to picking highlight and shadow colors. As you get better at making sprites, you will be able to use this skill to expertly shade your sprites.
What Next?
- Pick up a hammer and smash the wall by reading Sprite Art 101 - Brick Wall III
Something Easier?
- Why not try the first sprite art tutorial in this series? Sprite Art 101 - Brick Wall I
Brick Sprites
- Breakout - individual brick sprites for a breakout clone