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