The process of making one or hundreds of Illustrator files pixel perfect is a pain in the arse, so here are a few tips to put ointment on that owie. For digital screen based design, I highly suggest using Photoshop or Fireworks over Illustrator. However, there are times when you have no choice but to use Illustrator…and that’s what these tips are for.
1) Move selected items to whole pixels
I created an Illustrator script for moving selected items to the nearest whole pixel (top / left).
Download the script: MoveItemsToNearestPixel.jsx
To install, move the script to your Illustrator scripts folder:
OS X: Applications/Adobe Illustrator CS5/Presets/en_US/Scripts
Windows: C:\Program Files\Adobe\Adobe Illustrator CS5\Presets\Scripts
2) Make selected items look like they are on whole pixels
Select any or all items you want to look like are on whole pixels and check the Align to Pixel Grid checkbox in the Transform Panel (Shift + F8). This makes things look like they are on whole pixels, even though they might not be.
3) Set up your grids
— Open Illustrator Preferences/Units and set everything to pixels
— Open Illustrator Preferences/Grids & Guides and set Gridlines every to 10 px and Subdivisions to 10
— Enable grid snapping (Command + Shift + “)
— Remember that Preferences are saved on a per-file basis, so get used to checking these
4) Pixel Preview
Pixel Preview is a handy way to see how vectors turn into pixels when you’re zoomed past 100%. Turn this on from the menu View/Pixel Preview (Command + Option + Y).
5) Check Artboards
Artboards are a great for managing pages for flows, but when creating they sometimes are not on whole pixels themselves. Enter Artboard Edit Mode (Shift + O) and check them.
6) Check Symbols & Swatches
Make sure all artwork is on whole pixels before creating Symbols and Swatches. If the original artwork is not on whole pixels during the creation process, than those symbols or swatches will not look pixel perfect when you use them.
7) Pixel pushing windows workflow
If you have to get nitty gritty, open a second window (menu Window/New Window) for the same file, turn Pixel Preview on (Command + Option + Y) and zoom way in. This way, you have the 100% view and a super zoomed in view side by side. It free’s you up from having to zoom in and out so often.
Simon
14/05/2011 at 9:05 am // PermalinkOf course if you have CS5 the Align to Pixel Grid option helps with most of this: http://help.adobe.com/en_US/illustrator/cs/using/WSab9730d8188f3586b4c60da12559a09a58-8000.html
IT Rush
11/06/2011 at 4:28 am // PermalinkPerfect timing. Been looking for some cool tricks to work on my next illustrator project, hope this one helps.
SooNS
20/06/2011 at 1:09 am // PermalinkVery good – śmieszne koszulki z nadrukiem
jef
05/08/2011 at 12:02 pm // PermalinkAdam, you are the master.
no longer frustrated
01/09/2011 at 10:12 pm // PermalinkAdam you are a god!
Dave
30/09/2011 at 10:35 am // PermalinkScript works in CS4! awesome! thanks!!!!
Aaron
21/11/2011 at 9:47 pm // PermalinkIn response to #3: Preferences are only saved on a per-file basis if changed when a file is open. If you close all files and then set these preferences, all subsequently-created files will inherit those settings
Thanks for the scripts!
Stephen James
03/12/2011 at 2:30 pm // PermalinkI only use Illustrator for new projects and ask that graphic designers provide me with AI files to slice, especially now that responsive design is so hot. Items need to often be re-masked or resized and I have found Photoshop to not be amiable to resizing without creating artifacts. The idea that web sites are pixel grids is out-dated.
Victoria
07/02/2012 at 6:54 am // PermalinkSuper useful! I got rid of those sticking pixels in a moments. Thanks a lot!
Łukasz
07/02/2012 at 8:45 pm // Permalink#7 is awesome! how did I not know about this? I have accidentally done this, but never had the windows side by side. this is going to be a life saver for sure.