Vector to pixel: Building your sprites in Adobe Illustrator

Some of you people are crazy. But, like, in a good way.

I’ve always made my pixel art in pixel-based programs because the process to me is as satisfying as the end result. I’d have never even thought to do it any other way. But after three people asked me if it’s possible to build video game sprites in a vector program like Illustrator and then convert them to pixels, I dusted off my old vector program and got to tinkering. And I now give you proof that even vector artists can illustrate game characters for pixel-based games. Yeah, I can’t believe it either.

Basically, the goal here is to let people who are used to drawing in Illustrator (or Inkscape or other vector programs) draw a character the way they normally would and then transfer it to a Photoshop/GIMP type of raster program with most of the pixel work already done and having only minor changes and cleanups left to make. And no, it’s probably not a technique that’ll convince traditional pixel artists to drop everything and switch, but sometimes shortcuts like these can bring in new artists and make things easier for the people who need it.

Let’s start with just the basic idea first. Let’s find a way to get just your lines to translate from vector to pixel. This’ll teach the main concept and let you branch out your pixel art in any direction, not just with character sprites.

A simple vector shape, 1-pixel stroke, white fill

First, draw a shape in Illustrator with the pen tool. Give it a white fill and black outline so the final results show up better. Then with the Selection tool (not the Direct Selection tool), select the whole shape and drag it right into an open Photoshop window.

Dragging the Illustrator shape into Photoshop. Look how sharp it is! Huzzah!

Hey, not bad. It’s already a sharp, 1-pixel-wide outline! But wait: you have to place it first. Make sure the “anti-alias” option is unchecked, then hit enter. The shape is now in a “Vector Smart Object” layer, so right-click on that layer in the Layers Panel and choose “Rasterize Layer.” Your pixel art is now ready.

So now let’s step up to color — does that translate just as easily? Yes indeed. Make a bunch of colored shapes, try out the pencil tool, and even use outlines of different sizes. Drag that into Photoshop the same way.

And look at that, they all translate to, essentially, pixel art, now that antialiasing is turned off

Check that out. Not only are they nice and sharp with the anti-alias option turned off, the yellow shape with the stroke set to 5 now has a 5-pixel-wide stroke, and the 1-pixel-stroke pencil tool is letting you draw a perfectly sharp 1-pixel-width line. Sweet.

Note that some other tools aren’t as helpful: the brush tool, which varies your widths, is unpredictable; and this isn’t a case where you’d want to use the gradient tool at all, since you’d keep its countless number of colors.

So how to apply this to an actual sprite?

 Let’s test just how well this method works by vectoring over an existing sprite, shrinking it down, rasterizing it, and comparing the difference.

Here’s my tracing, which turned out to be mostly fills and not too many lines with this particular style. To resize your vector art to match the height of your target sprite, drag the finished vector into Photoshop and before you “place” the image, resize it proportionally to match the height of the original sprite. The hard pixel sizes are easier to work with and measure in Photoshop. Doing so with this produced…

Original sprite -> Rasterized vector tracing

….um… wow. That’s more than 80% accurate to the sprite, and it’d be 95% of the work for an original sprite, and I didn’t even touch a pixel yet. There’s the proof of concept for you artists who’d prefer to work this way.

And don’t just stop here, potential isometric background artists. Think beyond this to what vector art is good at: precise curvature, straight lines, perfect 45-degree lines just by holding shift. Yes, picking up this technique could actually turn you into a fast and effective pixel artist of mechanical subjects like buildings, cars and mecha. Intriguing, no?

Finally, note that if you’re not using Illustrator, dragging into Photoshop might not work — in that case, save your vector to an .EPS instead and then open that file in PS, Gimp or so on.

So there you go. This isn’t a comprehensive look at the subject, but it should be enough to get your creative juices flowing and to get you vector artists started with a new hobby. Be sure to post here if you come up with any other vector-related pixeling tricks you discover along the way.

UPDATE: For those of you crazy enough to have enjoyed this, I wrote a more in-depth look at making sprites in Adobe Illustrator here.