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

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

Problems with the Pencil tool

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.

Curves, handles and pixels

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.

Layer opacity and order

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

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

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.

Line paths problem

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.

Lighting with the Blob brush

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.

Final layer order

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.

Transfer from Illustrator to Photoshop

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:

Final Adobe Illustrator sprite

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.

Are you a bad enough dude to comment?

Comments closed

  1. Luigi

    Hi everyone. So I looked up Vector art to see what this is and it seems that it’s just a much cleaner and more detailed form of an image correct?

    • Luigi

      One more thing, for the creator if this site. Can you please do a tutorial on how to create a sprite sheet. Or at least give me some quick pointers. I am using GIMP’s sprite sheet plug-in that turns your layers into one spritesheet but the problem I am having is that it always aligns them in a horizontal line. This quickly turns a spritesheet with 8 512 x 512 layers in a 4096 x 512 file. 4096 is the maximum in Unity3D. I assume you have made spritesheets before and I wonder, do you just make individuals art and then drag it into on image and save? HOw do you go about aligning it just right? Thank you in advance for any response and sorry I know this comment doesn’t relate to this article but I don’t know how else to get in contact with you. I frequent this site a lot so hope to hear from you soon.

    • Kiwi

      I’ve always used Photoshop Actions for that sort of thing, but for GIMP, this is the best answer you’ll find: http://www.youtube.com/watch?v=BT6Jdz4J4hU

    • Kiwi

      It’s a specific kind of digital art where instead of drawing, you plot points and curves and have the computer calculate the lines for you. You can only use it with programs designed to make vector art like Adobe Illustrator or Inkscape.

    • Luigi

      Oh ok. That’s an interesting way of “drawing” something. I don’t think I can appreciate it as much as a more traditional way though. Thanks for the info.

    • randombypasser

      Close but not just that, Vector work is mostly used because of endless resizing, its not made of pixels I don’t know all the technical mumbo jumbo but Illustrator calculates the image so blowing it up for 500% to get used on a billboard is entirely possible. While that’s not possible with an image made in PS with a size that’s not already a billboard.

      An example of an actual drawing program using vectors would be Mischief. http://www.madewithmischief.com/

  2. Linseal

    I was doing all my work in illustrator years before I ever got photoshop. Thank you so much for helping me. Making art for my game is going to be so much easier now that I can work on a program I’m more comfortable with first.

  3. Andrew Rogers

    This is really helpful! I have never been able to get the pixel by pixel method to produce a sprite I am happy with and have always been MUCH more effective with vector art. This method will be a massive help building custom sprites for the game I want to develop!!! Thanks so much for taking the time.