Santa Clara Games

dic 09, 2013

Export Pixel Perfect Graphics from Illustrator

It's quite difficult unless you have all the following steps in mind:

  1. When you create a new document in Illustrator, set the resolution to 72 dpi in RGB mode.  This helps later to avoid unexpected results when exporting your graphics.

    illustrator-new-document

  2. Once you've got your document open, go to the VIEW menu > PIXEL PREVIEW.  That way, when you zoom in or out, you'll be able to see the grid in pixels.

  3. Finally, to top it all off, you can make sure everything comes out pixel-perfect by going to the TRANSFORMATION menu. Once you see the following dialog box:
    alignCheck the ALIGN TO GRID option, and everything will adjust itself quite nicely.

And that's it!  Later, when you export, it's best to use PNG without anti-aliasing in order to avoid the blur effect that comes with JPEG compressions.