Way back in December, some of us in the IDEO London studio started talking in a pub about some of the ideas arising out of OpenIDEO and its challenges for social good. We wondered: How could we help the digital community build out more of these winning tech and design solutions? What would happen if [...]
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.