Sprite Art 101 - The Direction of Light
Welcome to my first sprite art tutorial. This tutorial covers the very first thing you should know beginning your career as a sprite artist —- the direction of light and how it is used to show depth. This concept is so essential that if you do not understand it, you will never learn to make decent sprites. If you do learn it, the reward is the ability to make good sprites, whether you have artistic ability or not, by simply pushing around pixels.
First, let's look at how artists think about value. Value, to an artist, is how light or dark a color is. Sometimes this is called "luminosity" for obvious reasons. The darker the color, the lower it's value and the higher the value, the lighter the color. This is useful because you can use tones of various values to mimic depth in 2D.
Let's start with a box. What you see here is a simple gray box with an arrow on it. You can't tell it now, but the box has sloping sides and a top smaller than the bottom. Right now it looks like a dull gray box. It will not reveal it's true shape until we have "drawn the light."
On this dull gray box you'll see an arrow. This arrow points the same direction the light is "flowing". The light source will be at the top/right corner, shining down it's rays to the bottom/left corner.
The sides closest to the light source will be drawn a lighter color than the "natural" gray color of the entire box. For this we will use white. The sides farthest away from the light source will be drawn a darker color than the natural gray color of the box. For this, we will use a darker shade of gray. This new box looks better, but something seems to be missing.
To make it complete, the two corners where light and shadow meet are lined with the original gray color. The corner farthest away from the light source is lined with a color darker than the "shadow color." If you are just using four colors like this, you can pretend that the corner closest to the light source is "bleached out" and therefore doesn't show. This is how most 8-bit games got by with only three colors to show depth.
To make your shaded box have more depth, you can use more colors. In this case, the "bleached out" corner of the box has been highlighted with white instead. Just for the hell of it, a shadow has been applied to the arrow to make it appear to be higher than the box itself. It now appears to be 3D as well. As you can see, this approach looks much better and definitely is the way to go if you have access to more colors.
http://www.depotsdesign.com
Remember that this all depends on the direction of the light. If we were to reverse the direction of the light (without moving the arrow), the same principles apply but your box will look a bit different.
The next tutorial in this series will teach you how to manage depth a bit better by creating more relief.
Boxes in Detail
What Next?
Related Pages
- six tones - six useful tones for making sprite art
Post preview:
Close preview