2D will never die

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

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

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.

Going nuts with the vector experiments

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

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?

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

A vector tracing of King

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…

...whaaat?!

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.

»
» Vector to pixel: Building your sprites in Adobe Illustrator

Are you a bad enough dude to comment?

Comments closed

  1. HIGH SCORE
  2. RANK
    SCORE
    NAME
    COMMENT
  3. 1
    00140307
    Pepi

    Good tutorial,bro!!XD

  4. 1
    00131102
    count

    thank you so much, using this to convert vector landscape into pixel art, looks awesome!

  5. 1
    00130909
    ZDP

    1.) Thanks
    2.) I’m trying to get away from Adobe Addiction, have you heard of any way to use FLOSS graphic programs (i.e gimp, inkscape, etc) to recreat this?
    3.) What do you think the Pixel Joint community would think of this technique.

    • Kiwi

      With Adobe moving Creative Suite to subscription-only, I could definitely see a use for alternatives. GIMP is the only capable raster program I know of that handles vector paths/etc, but it does an imperfect job of it: giving a smooth curve a 1-pixel stroke will add 2-pixel clumps on it at random. Still, if it’s an irritation you can work around, try this: make your paths in Inkscape, then select them all, hit Copy, open up GIMP, and paste the paths into a new document. They’ll show up in the Paths tab.

      As for Pixel Joint and other pixel art forums, something tells me it wouldn’t go over all that big because making vector art is so different than making pixel art. They probably wouldn’t have much interest in learning vector art just as a novel way to continue making what they’re already making. One place this would go over big is vector art forums — specifically game art forums where HD vector artists want to translate their skills to retro games or mobile platforms like Nintendo DS

  6. 1
    00130222
    Xayvong

    Thank you so much! You just saved me a ton of time and hassle, since I seem to be inept at making pictures out of squares.