The Pixel Tutorial - Tools

One of the nice things about pixel art is that you dont really need any
fancy tools - your computers built-in paint program is probably good
enough! That said, there are programs made specifically for pixel
pushing, like Pro Motion, or, for Mac users, Pixen. Cant say Ive actually
tried them, but Ive heard good things. For this tutorial, Im going to use
Photoshop, which is an expensive beast, but its good for all kinds of art
and its numerous features are pretty useful for pixelling.

USING PHOTOSHOP FOR PIXEL ART

When using Photoshop, your main weapon is going to be the

pencil tool (shortcut B), which is the alternate for the brush tool. The pencil lets you color
individual pixels, without any anti-aliasing.
Two other tools that will come in handy are the marquee tool

(shortcut M) and the magic

wand
(shortcut W) for selecting and dragging or copying and pasting. Remember that by
holding Shift or Alt while you make your selection you can add or subtract from your current
selection. This comes in handy when trying to grab areas that arent perfectly square.
Youll also use the eyedropper
(shortcut I) to grab colors. Color conservation is important in
pixel art for a number of reasons, so you will want to grab the same colors and reuse them.
Finally, make sure you learn the shortcuts. They can save you a lot of time and energy. A good
one to know is X, which switches your primary and secondary colors.

The Pixel Tutorial - Lines

Pixels are essentially little blocks of color. The first thing you need to
learn is how to use these blocks effectively to make any kind of line that
you want. Well discuss the two most basic types of lines, straight and
curved.

STRAIGHT LINES
I know what youre thinking - this seems too easy to even bother with! But with pixels, even
straight lines can be problematic. What we want to avoid are jaggies - little breaks in the line
that make the line look uneven. Jaggies crop up when one piece of the line is larger or smaller
than the surrounding pieces.

CURVED LINES
For curvature, make sure that the decline or incline is consistent all the way through. In this
next example, the clean-looking curve goes 6 > 3 > 2 > 1, whereas the curve with the jaggy goes
3 > 1 < 3.

CONCLUSION
Being comfortable making any line in pixels is crucial to doing pixel art. Later on, well learn
how to use anti-aliasing to make our lines look really smooth.

The Pixel Tutorial - Conceptualizing

The first thing you need is a good idea! Try to visualize what you want to
pixel, either in your head or on paper. A little work in the pre-planning
department can let you concentrate on the actual pixelling.

THINGS TO THINK ABOUT

1. What will the sprite be used for? Is this for a website, or a game? Will I have to
animate this later, or is this it? If the sprite will be animated later on, you may want to keep it
smaller and less detailed. Conversely, you can pack as much detail into a static sprite that
you will never have to deal with again. But think about where the sprite is going to go, and
what will work best.
2. What constraints are being placed on me? Earlier, I had said that color
conservation is important. One of the reasons is that, especially if you are working on a
game, your palette of colors may be limited. Also consider the dimensions of your sprite and
how it will fit with its surroundings.

LETS WRASSLE!

For this tutorial, I didnt really have any constraints, but I wanted to make sure the sprite
was rather large so that you could clearly see what was happening with each step. To that
end, I decided to use the Lucha Lawyer, the ass-kickinest wrestling attorney around, as my
model! He could be in a fighting game, or something, with moves like the Habeus Corpse
Blaster.

The Pixel Tutorial - The Outline

A black outline will provide a good, basic structure to your sprite, so its
the perfect place to start. The reason we choose black is that its nice and
dark. Later on, Ill show you how you can change the color of the outline
for more realism.

TWO APPROACHES
There are two ways to approach the outline. You can draw the outline freehand and then
clean it up, or you can start by placing the pixels as you want them from the start. You know,
like click, click, click.
I think which approach you should use depends on the size of the sprite and your skill at
pixelling. If a sprite is very large, its much easier to sketch the outline freehand to get the
general shape and then clean it up later than to try and get it right the first time through.
In this tutorial, were creating a fairly large sprite, so Ill demonstrate the first method. Its
also easier to illustrate with text and pictures.

STEP 1: CRUDE OUTLINE

Using your mouse or tablet, sketch out a crude outline for your sprite. Make sure its not
TOO crude, though - it should resemble more or less the final product that you want.

In this case, Im basing my outline almost entirely on my sketch.

STEP 2: CLEAN UP THE OUTLINE

First, crank up the zoom to around 6x or 8x magnification so that we can see each pixel
clearly. Then clean up that outline! In particular, you want to trim away stray pixels (the

outline should only be one pixel thick all the way through), get rid of any jaggies, and add
any small details that were passed over in Step 1.

Even large sprites never usually exceed 200 by 200 pixels. The phrase doing more with less
never rings more true than when pixelling. And you will soon find that one pixel can make all
the difference.
Keep your outline simple. The details will emerge later on, but for now, concentrate on
defining the big pieces, like muscle segmentation, for instance. It may not look like much
now, but be patient.

The Pixel Tutorial - 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. Its 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 lets 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 youre using Photoshop, you want to first select
the area youre going to fill with the magic wand
(shortcut W) and then fill by pressing
Alt-F (primary color) or Ctrl-F (secondary color).

The Pixel Tutorial - Shading

Shading is a crucial step on our quest for pixel demi-god status. Heres
where the sprite either gets some pop, or it devolves into a horrible mess.
Heed my words, however, and youre sure to succeed.

STEP 1: CHOOSING A LIGHT SOURCE

First, we have to pick a light source. If your sprite is part of a larger scene, there might be all kinds
of local light sources (like lamps, fire, lamps on fire, etc.) shining on it. These can mix in very
complex ways on the sprite. For most cases, however, picking a distant light source (like the sun) is
a better idea. For games especially, you will want to create a sprite that is as generally lit as possible
so that it can be used anywhere.
I usually choose a distant light source that is somewhere above the sprite and slightly in front of it,
so that anything that is on top or in front is well-lit and the rest is shaded. This lighting looks the
most natural for a sprite.

STEP 2: SHADING
Once we have defined a light source, we start shading areas that are farthest from the light source
with a darker color. Our up and to the front lighting model dictates that the undersides of the
head, the arms, the legs, etc., should be shaded.
Remember that the play between light and shadow defines things that are not flat. Crumple up a
piece of white paper into a ball and then unroll it and lay it on a table - how can you tell that its not
flat anymore? Its because you can see the little shadows around the crinkles. Use shading to bring
out the folds in clothing, and to define musculature, hair, fur, cracks, etc.

STEP 3: SOFT SHADOWS

A second shade, lighter than the first, should be used for soft shadows. These are areas that are
indirectly lit. It can also be used to transition from the dark to the light, especially on curved
surfaces.

STEP 4: HIGHLIGHTS
Places that are being hit directly by the light source can have highlights applied onto them.
Highlights should be used in moderation (much less than shadows), because they are distracting.
Always apply highlights after shadows, and you will save yourself some headache. Without the
shadows already in place, you will be inclined to make the highlights too large.

DOS AND DONTS

Shading is where most beginners get tripped up. Here are some rules you should always follow
when shading:
1. Dont use gradients. The ultimate newb shading mistake. Gradients look dreadful, and dont
even begin to approximate the way light really plays off a surface.
2. Dont use pillow-shading. Pillow shading is when one shades from the outline inward. Its
called pillow-shading because it looks pillowy and undefined.
3. Dont use too many shades. Its easy to think that more colors equals more realistic. In the
real world, however, we tend to see things in big patches of light and dark - our brains filter out
everything in between. Use at most two shades of dark (dark and really dark), and two shades of
light (light and really light) on top of your foundation color.
4. Dont use colors that are too similar. Theres no reason to use two colors that are very
similar to one another. Unless you want really blurry-looking sprites!

The Pixel Tutorial - Dithering

Color conservation is something that pixel artists have to worry about a

lot. One way to get more shades without using more colors is to use a
technique called dithering. Similar to cross-hatching or stippling in
the traditional art world, you take two colors and interlace them to get,
for all intents and purposes, an average of the two colors.

SIMPLE EXAMPLE
Heres a simple example of using two colors to create four different shades using dithering:

ADVANCED EXAMPLE

Compare the top picture, which was made using the Photoshop gradient tool, and the bottom,
which was created with just three colors using dithering. Notice the different patterns that were
used to create the intermediary colors. Try experimenting with different patterns to create new
textures.

APPLICATION
Dithering can give your sprite that nice retro feel, since a lot of old video games relied heavily on
dithering to get the most out of their limited palettes (look to the Sega Genesis for lots of
examples of dithering). Its not something that I use very often, but for learnings sake, here it is
applied (possibly over-applied) to our sprite.

You can use dithering as much or as little as you want. Honestly, its a technique that Ive only
seen a few people use really well.

The Pixel Tutorial - Selective Outlining

Selective outlining, or selout, is kind of like shading the outline. Rather

than using black all the way around, we apply a color that is closer to the
color of the sprite itself. Also, we vary the brightness of this outline along
the edge of the sprite, letting the light source dictate which colors we
apply.

Up until this point, weve kept the outline black. And theres nothing wrong with that, really,
since it looks pretty good and it keeps the sprite well-separated from its surroundings. But by
using black, we are sacrificing more realism than we might like to, since it gives the sprite a
cartoony look. Selout is a great way to get around that:

Youll notice I also used selout to soften the folds of his muscles. Finally, the sprite begins to
look like a coherent whole rather than a whole bunch of separate pieces.
Compare this to the original:

The Pixel Tutorial - Anti-Aliasing

Anti-aliasing works under a simple premise: add intermediary colors to

the kinks of the line to smooth them out. For example, if you have a black
line on a white background, then you would add gray pixels to the edge of
the line to smooth it out.

TECHNIQUE 1: SMOOTHING CURVES

Generally, you want to add your intermediary colors at the kinks, since thats where the line
breaks and looks uneven. If it still looks too uneven, add another, lighter layer of pixels. Have
your intermediary layers flow in the direction of the curve.
I dont think I can explain it any better than that without complicating things. Just look at the
pictures, and I think you will understand what I mean:

TECHNIQUE 2: ROUNDING OUT HUMPS

TECHNIQUE 3: FADING THE ENDS OF LINES

APPLICATION
Now lets anti-alias our sprite. Keep in mind that if you want your sprite to look good on any
color background, do not anti-alias on its outer edge. Otherwise, you will see an unfortunatelooking halo of your in-between colors around your sprite and it will look nasty as hell.

The effect, as you can see, is subtle, but it makes a big difference.

WHY DO IT BY HAND?
You may ask why we dont just apply a filter from our paint program to the sprite if we want to
make it look smoother? The answer is that no filter is going to make your sprite as cleanlooking as if you did it by hand. You have total control, not only over the number of colors you
use, but where they get used. And you know better than any filter what areas need to be
smoothened out, and what areas are going to lose their pixelly quality if you anti-alias them.

The Pixel Tutorial - Finishing Up

Whew, its about time to turn off the computer and grab a cold beer. But
not quite yet! The last part is what separates an ethusiastic amateur from
a hardened professional.

Step back and take a good long look at your sprite. Chances are, its still a little rough. Take the
time to refine it and make sure that everything is perfect. Give or take how tired you are, this
can actually be the most fun part. Add little details to make your sprite more interesting. Your
skill and experience with pixelling will show through here.

You may have been wondering why the Lucha Lawyers eyes have been missing this whole
time, or why the supoena he was holding was blank. Well, its because those were small details
that I wanted to save until the end. Also take notice of the trim I added to his armbands, the fly
I added to his pants, and well, what would a man be without his nipples? I also darkened the
lower half of his torso so that his left hand would stand out more against his body.
Youre finally done! The Lucha Lawyer weighs in at an impressively light 45 colors (or perhaps
ultra-heavyweight, depending on your palette restrictions) and has dimensions of
approximately 150 by 115 pixels. Now you can have that beer!

THE ENTIRE PROCESS

This is always fun. Heres an animated .gif that shows the evolution of our sprite:

CLOSING THOUGHTS
1. Learn the fundamentals of art and practice with traditional mediums. All the skills and
knowledge involved in drawing and painting will apply to pixelling as well.
2. Start with small sprites. The hard part is learning how to cram a lot of detail into a few
pixels, not making huge sprites (that just takes time).
3. Study the work of the artists whom you admire and dont be afraid of being unoriginal.
Biting off other peoples work is the best way to learn. It takes time to find your own style.
4. If you dont have a tablet, get one. Repetitive stress injuries from clicking the mouse are no
fun and will not impress the ladies (or dudes, as it were). Im using a tiny Wacom Graphire2
that suits me just fine - I enjoy how little room it takes up on my desk and how portable it is.
You may feel more comfortable with a larger tablet, though. Test drive it first!
5. Share your artwork with others and get feedback. And who knows, you might just meet
some new, geeky friends!
6. If you ever make money off your pixel skills, send some of it to me!