Vector to Pixel 2: Making sprites in Illustrator

There’s no other way for me to say this: I hate Adobe Illustrator.

Seriously. Trying to make comic art in vector programs for me is like trying to make calligraphy in an Etch-A-Sketch. Using the left half of your brain to make a product for the right half of your brain is a concept I can’t wrap any of my brain around. Still, after I did that one post about making pixel art in vector programs, I got requests for a follow-up about how to make complete sprites in Illustrator. After a quick fit of crying and flailing my arms, I re-focused on my potential search engine rankings and got to work figuring out how such an unusual task could be accomplished.

The following is just one way to do this, and it’s not a definitive guide. But it will give you some strategies to consider and some pitfalls to avoid. For you pixel artists who are new to vector programs and are bonkers enough to want to try this new way of building your sprites, I’ll be keeping things basic and not assuming any major Illustrator knowledge on your part.

THE DRAWING

Penciled linework, shown at 50% (with full sized insert)

Your artwork doesn’t have to be perfectly rendered to start, but an adequate amount of detail is helpful. This will be pure tracing reference, so don’t worry about sharp linework. Just make sure the important lines and marks will make sense and stay understandable when traced and shrunk down.

SILHOUETTE AND OUTLINES

A good sprite needs a good clear silhouette, and I’ll also want to have a 1-pixel outline around the sprite in order to match this particular style. There are three ways that I can think of to accomplish this:

First, you could trace the outline with the Pencil tool at a 1-pt stroke. That would give you a nice quick and easy way to put the lines together without having to hash through bezier curves, but the downside is that the curves of those lines wouldn’t be as smooth once you drag it into Photoshop (every little unsteady jiggle of my Wacom pen seems to show up in Pencil lines).

The pencil tool risks jagged pixel linework

Second, you could fill in the area of the sprite with the Blob Brush tool, also with a 1-pt stroke. This would help steady the curves of the outlines, but the finer details like small sharp angles would be more difficult to work with.

Finally, you could go the “correct” route and trace the outline with the Pen Tool, making those very non-right-brained bezier curves and getting each and every centimeter of your curves and angles lined up perfectly. This would guarantee the best shape for when you translate the vector image to resized pixels.

I’m going to do the outlines with the Pen tool because I hate life, but also because I’m familiar enough with how to get the handles to do what I want fairly quickly. If you’re comfortable enough with bezier curve handles and its interruption to the “drawing” mindset, this is the method you should use. Otherwise, start out easy with the pencil or blob brush.

Here's what my handles wound up looking like, for those of you who are curious, plus the nice sharp results when dragged into photoshop and resized

Pen tool is set to 1-pt stroke, no fill. Once you’ve gone around the whole sprite, de-select your current path, then go over any negative spaces with their own shapes. Fill in the outlines with a color-fill, then make the main layer that’s containing all of these sub-layers transparent so you can see the linework underneath.

A quick look at the order of my layers & sublayers, with the main layer set to 50% opacity so the drawing shows through

To cut out the negative spaces from your main path, select all of the paths and use the pathfinder’s Exclude tool to make everything one shape path with holes in it. This is the space you’ll be building your sprite within.

COLOR PATCH OVERLAYS

Among the countless things I can’t “get” about Illustrator is how it handles masking. I’m going to pen-tool the shape of the red stripe by Jedah’s shoulder (with a red fill and no outline), but since by hand I wouldn’t be able to get it exactly within the boundaries of the sprite’s silhouette, I need to extend it outside a bit. Now, there’s actually a pretty easy way to hide any part of your art that extends outside the boundaries of your sprite’s silhouette, but it’s hardly intuitive:

Make your color patches, in this case the red stripes by the shoulders, the yellow whatevers on his headpiece and the blue blade on his wing. Let the patches extend outside the silhouette area. Duplicate the sub-layer that has your sprite’s silhouette, and put that duplicated sub-layer at the very top of all the color patch sub-layers. Select that layer in the Layers panel and at the bottom of the panel where you have the trashcan/Delete button, the New Layer button, etc, click the “Make/Release Clipping Mask” button. Now the color patch sublayers only show the art that’s within the area of that top silhouette sublayer. It’s confusing, but learn it — it’s going to come in handy for the next steps, too.

Clipping masks are tricky at first: find the sublayer that has the silhouette, duplicate it, then drag it to above the other sublayers, then select it and hit the Clipping Mask button.

LINEWORK

The next step is putting in the non-outline lines from your drawing. (Make sure your layer is still transparent so you can see the drawing.) The challenge is to keep those lines as thin as humanly possible, and once again, you have two choices: Pen tool or Pencil tool. This time, I’m choosing pencil because you can afford to be a bit more loose and imperfect, here. Besides, there’re so many little lines and costume details that it’d be maddening for me to trudge through it with the Pen.

Before I start, I’m making a new layer on top and putting my lines in there so they don’t get transparent and hard to see in the current layer, and so they’re better organized. So off I go with the Pencil set again to 1-pt (lower could work, too). Like the color patches, I’m extending the lines out of the sprite’s silhouette area, because I’ll be masking those the same way.

Line paths will be so numerous that you should put them on their own layer. Afterwards, select them all and group them so they're easier to move around in your Layers panel. Put them under your clipping mask when you're done so you stay within the silhouette.

Some inside lines may have to connect with outlines, but remember this will all be shrunk down and minor mistakes will be automatically ironed out. Don’t spend too much time being perfectionist unless you’re intending to display the vector version, too.

Because I made the silhouette with an outline, the inside lines might need some extra work to line up in some spots with the outside lines. For now, I'm being lazy. Shut up.

Once your lines are down, hide all the other layers’ contents and select the linework. OBJECT > GROUP them so they’re easier to move around in the Layers panel, and move them to your original transparent layer, underneath the top masking silhouette sublayer. Now the lines are inside the silhouette, too.

LIGHTING

Here’s where Illustrator really gets me flipping obscene gestures at my monitor. The big problem is that you can’t control the anti-aliasing, and you absolutely can’t use the gradient tool because you can’t control how many color steps it uses. So that means you’re going to be adding all the lighting by hand. And that means I’m breaking out the Blob Brush tool.

Setting the stroke to none and the fill to a somewhat lighter version of the purple used here, the important trick is that you again do this on another layer, but set the layer to about an 80% or so transparency, and in the Transparency panel, set the layer to Screen, too. Now when you apply your lighting color(s), the lines and color patches will show through, so you’ll be lightening them, too.

Apply the lighting color with the Blob brush on a new layer, and go outside the silhouette area as needed. Then apply these settings to that new layer.

I’m being sloppy at this point because my will to live is starting to deteriorate, but if you want to have a good looking vector version of your sprite where your light patch colors actually stay inside the lines, you can use Illustrator’s rather nice Live Paint tool. Give it some practice though, because it has a few eccentricities about it.

I will say this for Illustrator, it is nice to be able to put the light-purple color I’m using as the lighting into the Swatches panel and set it to a Global before I use it, so that if it turns out the color I’m using doesn’t quite look right, I can adjust the color in the panel and have the color on the artwork update in real-time.

Once you’re done the lighting, simply drag its layer into the main layer (thus automatically making it a sublayer), and put it directly under the silhouette clipping mask.

Take the layer that had your lighting patches and drag it to just below the silhouette clipping mask and above the lines sublayer. You should now have a decent vector sprite ready to translate to Photoshop

TRANSFER TO PHOTOSHOP

Alright, so let’s at least pretend we actually have a vector image that we like by now. Open up a new document in Photoshop, go back to Illustrator, hide/turn off the layer that has the original drawing, select all of the vector art, and drag it right into the Photoshop document’s window. Make sure the Anti-Alias option is unchecked in the top menu bar. Resize it to match the height and proportion of your target sprite style, then Place the image (which usually means hitting Enter). In Photoshop’s Layers panel, your new layer is called Vector Smart Object. Right click on that and choose Rasterize. You now have pixel art that you can adjust and fine-tune.

Use the regular Selection Tool to select the whole vector art after hiding the drawing's layer, then drag into a Photoshop document with anti-alias unchecked.

So as to not prolong my torture, I’ll end things here with a comparison of what even a rushed vector sprite can turn into with a minimum of Photoshop/Gimp/Paint.net cleanup:

The rushed-but-finished vector, and it's resized pixelated counterpart. Note that I didn't even do anything to the pixel version yet -- no cleanup, no sharpening. This is the not-too-shabby result you automatically start off with after the resize.