Speed Spriting in Photoshop

STEP 1 THE DRAWING

Tools required: any version of Photoshop, and a tablet (Wacom, etc)

Getting the proportions right early on saves you resize time later

Find a reference sprite with the proportions you want to imitate and a somewhat similar pose. Enlarge it to 500%

Make the initial sketch for your sprite as loose and messy as you like using a light color like a sky blue. Add a new layer on top when you’re done. This will be the actual lineart layer.

Trace over your sketch in black with a brush at about 3 pixels, and turn the stylus pressure off so the line is a consistent width.

Remember, when drawing for pixels, make the linework super simple, clean, and low-detail, or else it’ll shrink into an indistinguishable mess of lines. Be careful with hands, and faces, and only draw the most necessary outfit details.

When finished, delete the sketch layer and reference sprite, then copy and paste the lineart into another document for later reference.

STEP 2 RESIZE

LAYERS (top to bottom): Lineart on transparent BG; White fill

Keep track of the layer order

Shrink the lineart 20% with ‘Bilinear’ (this is the only time you won’t resize ‘Nearest Neighbor’). Duplicate the lineart layer.

STEP 3 THRESHOLD

The Threshold tool is a fantastic time saver for sprite lineart

Merge one of the two lineart layers onto the white BG layer (leave one lineart for later reference). Now to get the sharpest possible line for the Threshold tool to work with:
Filter > Sharpen > Unsharp Mask ; Settings: 90, 2, 4
Then
Enhance > Auto Contrast
Finally
Image > Adjustments > Threshold.
The settings should be pretty close, so adjust until you get an easy-to-clean set of lines. Remember when deciding the perfect setting, better to be a little too light than a little too dark.

TIP: THICKNESS LAYERING

How to compensate for dense linework

Sometimes lines will be so squished-together in some areas and spread-out in others that you won’t be able to Threshold a drawing equally. #2 Has problems with the face, pigtail and hands, but any lighter and the legs and boots will disappear.

Quick solution: Duplicate the lineart so that both layers are in the same position. Erase the too-thick areas in one with the eraser in Pencil mode, then select the erased area with a magic wand set to Tolerance: 1, with anti-alias and contiguous unchecked. Go to the duplicated layer and inverse the selection, then delete. #3 Shows the top layer and the inversed layer underneath.

Threshold the first layer till it looks right (#4), then the next layer, then merge the two together.

STEP 4 CLEANING THE LINEART

LAYERS: Unsharpened lineart on transparency; Pixeled lineart on white BG

Learn this view. Love it. Live it

Begin adding pixels that are missing and whiting-out pixels you don’t need. This is where your references come in. Compare with the full-sized drawing to see if your changes are achieving what you drew, and use the reduced drawing to help with decision-making for troublesome pixels.

NOTE: Whether you’re working in Photoshop, Paint or whatever, always pixel with a 100% thumbnail view. Pixels have certain blending effects when they’re at regular size, which you often won’t catch while magnified at 500%. You can get some seriously sharp effects if you learn to watch what’s happening on both windows and take advantage of pleasant surprises.

–And even though you won’t get too much of it with just black and white lineart, it’s a good habit to learn.

TIP

Fine-tuning the threshold tool

To help ADD pixels, put the non-thresholded lines underneath the pixeled linework (make sure it still has its white BG). –Note the bicep and nose/mouth, now.

To help ERASE extra pixels, add an extra white layer below everything, merge the non-thresholded lines onto a white BG and make it a “hard light” layer style. Put the pixeled linework in between. –Note the lighter pixels in the hands and lines of the hair

STEP 5 COLORING

By now, the linework should be finalized. Some rough curves and jagged edges may still be there, but that’s the nature of pixel lineart.

Filling in base colors

It’s time to put together a set of base colors for the shadow areas of the sprite.

Using the magic want, fill in the lineart with the color that’ll take up the most area, then lock the color layer.

A keyboard shortcut for filling color is Alt+Backspace for foreground color, or Ctrl+Backspace for background.

STEP 6 ‘OVERLAY’ SHADING

Insert a layer into the middle, and change the layer style to ‘Overlay.’

Use the pencil tool, select white, and go over the various base colors of the sprite. Use the eyedropper tool and collect the bright shades it makes and start building a color palette (either on one of the layers or on a new RGB window

Now set the pencil to 50% opacity and go over the colors again (for the sake of this lesson, that is, to learn that a 50% pencil will give you a midrange tone. To speed things up, ignore this part and just make the layer 50% transparent). Once again, use the eyedropper tool, and pick up the midrange tones.

Next, come up with some dark outline colors for each of the base colors. In this case, I ran a black pencil over the red base color at 50% opacity, eyedroppered it, then hit undo. Don’t worry if the colors aren’t perfect, you’ll have the chance to change them at the end.

Finally, pick a dark-ish background color that’s as different as possible from the main palette

NOTE: Don’t pick up too many colors, especially ones that are similar to each other. It was hard to avoid here, so you’ll see what happens soon..

STEP 7 THE BIG TRICK

Learn this trick and other artists will call you a dirty time-saving cheater

NOTE: The background color (or any color – it doesn’t matter) should fill in everywhere so there is no transparency. Now that you know the big secret, it’s time to work on the sprite in ways you’ve never done before. How does a set color table help with spriting? Read on..

STEP 8 RESIZE AND SHADE

Refining the shading from before

Resize the sprite 400%, ‘Nearest Neighbor’. Lock the base color layer and pixel lineart layer. Insert a layer underneath with your palette’s BG color.

Color in the outlines

Now set your brush – not pencil – to white, and start painting on the overlay layer.

Keep it at 100% opacity, and stay in the lines. To help keep everything inside, Ctrl-click the base color layer. You’ll select that area and the brush won’t mark outside.

Smudge the edges of the white a little bit to get some nice antialiasing. Don’t overdo it, or you’ll wind up with pillow-shading.

For midtone areas, set the brush to 50%, and smudge as much as you like.

On the lineart layer, go over with the darkest colors of the palette. Since it’s locked, your brush will only color the lines. Use lighter colors in the light areas, also.

After this is the point of no return, so be sure to save now in case you
don’t like the way it comes out.

TIP: Just like working big in the lineart stage, keep the lighting patches simple.
Remember you’ll need to do some adjusting for the antialiasing, etc once it’s
shrunk down, so keeping it easy to read will save you time.

STEP 9 ACTIVATING THE COLOR TABLE

Once you’ve shaded everything the way you like it, shrink 25% ‘Nearest Neighbbor’. You should wind up with an only slightly blury mess.

Image > Mode > Index Color; Merge Layers = OK; Palette = Custom > Load > the color table file you saved > OK > OK. Congratulations, you now have an easy to clean sprite with only the colors you chose from your table – all the other colors from the messy resize have been converted to their closest value on your color table. Woo!

The one shortcoming of all this is that sometimes the colors will blend with each other in unexpected ways when shrunk. Note the outline of the bicep and elbow mixing with the green BG in parts to make what Photoshop thought was a blue-ish color. Minor issues, though – it pays to shade simply. And now, with less than 20 minutes of cleaning the antialiased curves, outlines and general shading, I get :

Well.. not a perfect sprite, but something EXTREMELY time-effective. Incidentally, it took more time to do the drawing than this sprite. That, to me, is proof of success.

EPILOGUE: OTHER PRACTICAL USES FOR THIS TECHNIQUE

Don’t think that “isolating the color table” is only for making scratch sprites. Use this technique for editing sprites, and it becomes twice as easy (since you’d be skipping a bunch of steps).

Have a sprite edit that needs a whole new arm or leg? Make a color table, resize 400% and draw it in. Don’t even worry about Threshold – draw the outlines.

Want to add a jacket onto a character? Don’t waste time doing it pixel-by-pixel – do it brush stroke by brush stroke.

Parting example:

Kairi’s Neo Dio needed to have the wild, loose hair pixeled in. Pixel-by-pixel wouldn’t have given it much energy , and would’ve been a buster to plan. But just toying around with the brush at 400%….

…I had a whole head of wild, expressive hair in less than 10 minutes. (I threw together the middle drawing just now to illustrate – I didn’t save the original)
Steps: Converted from RGB to Index color, Isolated color table, returned to RGB (thereby skipping the step of putting the palette in a new window), resize 400% Nearest Neighbor, brush and erase hair on new layer until I liked the shape, locked the layer and highlighted, shrunk down 25% Nearest Neighbor, converted to index color using the Custom palette, slightly refined the curves.

Update: For a more simple approach with fewer steps and easier instructions, check out this new sprite tutorial for the techniques I’m using now.