Make a Sprite

I love sprites! In honor of that love, I've made this tutorial that takes you through the steps to make one complete sprite. And a very cute sprite, at that. :)

I wrote this tutorial using Microsoft Paint. That means it will work just about anywhere you can do pixel work. I assume a basic familiarity with whatever graphics program you choose to use.

This tutorial is graphics intensive, because I prefer to illustrate steps whenever possible. It may take time to load. (It is also very long and detailed... if you don't need written details, just look at the pictures.)

Took Kit: Base, Palettes

We'll start with a fairly standard setup... a base, and four color palettes. I picked grey and blue for her dress, brown for her hair, and a silver metal palette for accessories. (It's my own base.) In actual practice, I recommend an entire spectrum of colors. Since we're pixel shading in Paint, it's easy to change colors and you never know when you might want to. For this tutorial, feel free to use your own colors. (Lots of sprites just like mine would be boring!)

Salli's Patented Sprite Making Secret*

The secret to sprite-making is trial and error, and the zoom function. Try something, zoom out and see what it looks like, then zoom back in to work on it. The magnifying glass is your friend. If it isn't already, it will be by the time you've finished this tutorial!

*Okay, it isn't patented, nor is it a secret. Picky, picky.

Bodice ~ Skirt ~ Hair ~ Fancy Stuff

The Bodice

1. For her bodice, I'm going to use a blue palette. Select the darkest shade you'd like to use (1) and draw the outline. It's okay to follow the outline of the base, particularly if you want it to be form-fitting. If you aren't sure what shape you want, keep trying until you find something you like. It doesn't have to be perfect... we'll fine tune in a minute.

2. We're going to use the shading of the base to help shade the bodice. The darkest bodice fill color will replace the darkest base fill color, marked here in red.

3. Next, select the next darkest color you're going to use (2). For a sprite, you probably want more contrast that you'd use for a doll (if you shade too gradually, no one will be able to tell you've done anything.)

4. Continue to fill in the bodice, using progressively lighter colors from your palette. Hey, it looks like a shirt now!

We could stop there (and you can, if you like), but I'm going to spruce up the shading a bit.

(2 & 3) I'm going to add a bit of shape to her chest, by adding one darker pixel in the middle (color 2) and darkening the pixel under it, too (color 3). (4) Next, I add more of the lighter color on top. (5) I only changed a few pixels, but didn't it make a big difference? I decided to add a pixel under each arm, to change the shape of the bodice.

The Skirt

1. The skirt is going to be grey, so I selected the darkest color (1) of the grey palette and drew an outline for the skirt.

2. That outline was boring, so I nudged it in a little bit to make folds. This is just an experiment, so if it doesn't look right, I'll fix it later.

3. Picking a middle color (3), I filled in the enter skirt. I find it easier to add shadows than to start all dark.

4. Now, I picked the shadow color (2) and added shading along the right and left side of the skirt (NOT along the bottom), and lines between the folds. I didn't try to make it symmetrical, since it will look more natural if it isn't quite even.

5. Last, I picked a lighter highlight color (4), and added highlights along the folds of the skirt.

Optional Details You can stop there, if you like. I decided to add a silver belt (2), grey sleeves with blue trim (3), and blue trim on the skirt (4). Unless you'd like your sprite to look exactly like mine (boring!), I suggest adding special touches of your own.

The Hair

1. First, while I was zoomed in I changed her eyes to grey.

2. Next, I selected my darkest hair color (1), and drew the hairline across her forehead. (I always start at the part, and work out one side at a time.)

3. I drew the top of her hair (just over the shape of the head), then filled the whole thing in with hair color number two. For sprites, you want fairly distinct colors so you can see the difference.

4. She's wearing her hair up, so I added a few extra pixels to the top.

5. I filled that in, and added a few extra dark pixels inside to define the style.

   

6. Next, I selected the lightest color (3), and added a few pixels worth of highlights.
7. She has a few loose strands framing her face...
8. ...and behind her ears. They aren't symmetrical, but they are balanced.

Tada! Isn't she cute?

Fancy Stuff

I love details, so I didn't stop there. I gave her silver bracelets and cute little magic effect. Then I added blue ribbon to her hair. Last, I played around with the pixels on her skirt. You can simulate folds this way, and also make it look like you're using more colors than you actually are. Oh, and I gave her a necklace.

There you have it! One complete sprite... and a pretty fancy one, at that. Next, we add animation. :)

(Stay tuned for the magic animation tutorial, using this sprite.)

~top~