Make Games - Pixel Art Tutorial

Note: This tutorial was created in 2007 for my personal website. Some small tweaks have been made since then, but nothing too significant.

In this 10-step tutorial, I’ll teach you how to create a “sprite”, which is a stand-alone two-dimensional character or object. The term comes from video games, of course.

Creating pixel art is a skill I picked up because I needed graphics for my games. After a lot of practice, I became kinda handy with it, and started to see it more as actual art rather than just a tool. These days, pixel art is quite popular in game development and illustration.

This pixel tutorial was created many years ago to teach people the basic concepts behind pixel art, but I’ve streamlined it a lot since its first incarnation. There are other pixel tutorials around, but I find them to be overly-complicated and too wordy. Pixel art is not a science. You should never have to calculate a vector when doing pixel art.

1. TOOLS

One of the nice things about pixel art is that you don’t really need any fancy tools – your computer’s 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. Can’t say I’ve actually tried them, but I’ve heard good things. For this tutorial, I’m going to use Photoshop, which is an expensive beast, but it’s good for all kinds of art and it’s 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 aren’t perfectly square.

You’ll 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.

2. 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. We’ll discuss the two most basic types of lines, straight and curved.

STRAIGHT LINES

I know what you’re 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, we’ll learn how to use anti-aliasing to make our lines look really smooth.

3. 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 your palette of colors may be limited, either by hardware (less likely these days) or for coherency. Or accuracy, if you are emulating a specific style (C64, NES, etc.) Also, consider the dimensions of your sprite and how it will fit with its surroundings.

LET’S WRASSLE!

For this tutorial, I didn’t really have any constraints, but I wanted to make sure the sprite was 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-kickin’est wrestling attorney around, as my model! He could be in a fighting game, or something, with moves like the “Habeus Corpse Blaster”.

4. THE OUTLINE

A black outline will provide a good, basic structure to your sprite, so it’s the perfect place to start. The reason we choose black is that it’s nice and dark. Later on, I’ll 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, it’s 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, we’re creating a fairly large sprite, so I’ll demonstrate the first method. It’s 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 it’s not TOO crude, though – it should resemble more or less the final product that you want.

In this case, I’m 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.

5. 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).

6. SHADING

Shading is a crucial step on our quest for pixel demi-god status. Here’s where the sprite either gets some pop, or it devolves into a horrible mess. Heed my words, however, and you’re 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, 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 it’s not flat anymore? It’s 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.

DO’S AND DON’T’S

Shading is where most beginners get tripped up. Here are some rules you should always follow when shading:

1. Don’t use gradients. The ultimate newb shading mistake. Gradients look dreadful, and don’t even begin to approximate the way light really plays off a surface.

2. Don’t use “pillow-shading”. Pillow shading is when one shades from the outline inward. It’s called “pillow-shading” because it looks pillowy and undefined.

3. Don’t use too many shades. It’s 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. Don’t use colors that are too similar. There’s no reason to use two colors that are very similar to one another. Unless you want really blurry-looking sprites!

7. 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

Here’s 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). It’s not something that I use very often, but for learning’s sake, here it is applied (possibly over-applied) to our sprite.

You can use dithering as much or as little as you want. Honestly, it’s a technique that I’ve only seen a few people use really well.

8. 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, we’ve kept the outline black. And there’s 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:

You’ll 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:

9. 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 that’s 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 don’t 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 let’s 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 unfortunate-looking “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 don’t 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 clean-looking 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 smoothed out and what areas are going to lose their pixelly quality if you anti-alias them.

10. FINISHING UP

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

Step back and take a good long look at your sprite. Chances are, it’s 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 Lawyer’s eyes have been missing this whole time, or why the supoena he was holding was blank. Well, it’s 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.

You’re finally done! The Lucha Lawyer weighs in at a relatively 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. Here’s 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 don’t be afraid of being unoriginal. Biting off other people’s work is the best way to learn. It takes time to find your own style.

4. If you don’t have a tablet, get one. Repetitive stress injuries from clicking the mouse are no fun and will not impress any ladies or gentlemen. I’m 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!

NOW ENOUGH TALK - LET’S PIXEL!