Pixelmatrix Design

This is a guide for designers who want or need to make resolution-independent glyphs or other resources for Mac apps. I must preface all this information with a note that much of this information was taught to me by Cabel Sasser and the guys at Panic. They’re way ahead in resolution-independence.

You will need:

• Adobe Illustrator
• Icon design skills
• Lots of patience

BASICS

Let’s go over some basics. ‘Resolution Independence’ is essentially the vectorization of interface components so that they can be scaled to a number of PPI’s (pixels per inch). Standard screens use 72 PPI (also referred to as DPI, but PPI is more correct). Devices like the iPhone have next-generation screens with a much higher PPI (160 PPI on the iPhone). As technology changes, we’re going to have screens that have higher and higher PPI, meaning that our interface elements will need to stretch to a number of different pixel values and still look nice (using vector). The format that we currently use is the PDF format.

Document settings for an icon that displays at 16px by 16px on a typical display



GETTING STARTED

To get started, you need to open Illustrator and create a new document. You’ll want to enter the dimensions in pixels to exactly the size this image would normally be used at. Make sure you click the ‘Advanced’ button and set the color mode to be RGB, ‘Raster effects’ at 'Screen' (72 ppi), and the ‘Preview mode’ set to ‘Pixel’.

Grid settings to use when designing for resolution independent UI's

SETTING UP THE PIXEL GRID

In order to get any sort of idea where your pixels are in this document, you’ll need to set up a grid to snap to. Hit ⌘-K to open the settings, and go to the ‘Guides & Grid’ tab.

Set your grid measure and subdivisions both to ‘32px’, and make sure it’s a color that you can work with (such as the default gray). “Grids In Back” can be useful sometimes, and a hindrance other times. With this checked, any shape you make on the canvas will hide the grid. Press OK to save the changes and go back to your document. To turn on and off the grid you can use ⌘-' or use the View menu.

WORKING IN ILLUSTRATOR

This can be tough if you’re not used to working in Illustrator, but you’ll want to create your component how you normally would. Sometimes it helps to copy and paste a raster version in first, and to trace it using Shapes or the Pen tool. Zoom in really far to work. Make sure you’re working with ‘Pixel Preview’ on (View → Pixel Preview), and zoom out to 100% every once and a while.

Note: Illustrator’s pixel rendering at 100% is very strange. Sometimes it can get quite off. The best way to see how it looks is to save your document as a PDF and drag the file into Text Edit. This will render it with Apple’s engine, showing you exactly how it will look in your app.

Sometimes if you work with the Pathfinder to merge shapes, you’ll find that the shape is lined up exactly to the grid and it will look as if it’s off. This is just Illustrator's faulty rendering.

Note: You can paste in vector shapes from Photoshop if you've already designed your glyph or component using Photoshop's shape layers.



Settings to use when exporting to PDF

EXPORTING YOUR FILE

So you’ve got your image all ready to be saved as a resource? We need to save this as a PDF. Go to the ‘File → Save As…’ window and choose Illustrator PDF as the format. When prompted for what PDF settings you want to use, just choose the ‘Illustrator Default’ setting from the menu.

NOTES ON USAGE

Your file will appear to have a white background since it’s a PDF, but when you use it as a resource, the white background will be cut out. This is an important distinction to make because, if you do want a white background, you’ll need to draw it into the file itself.

You should be able to use the PDF file just like any other image resource file in your applications.

It may be a bit more work to create resolution-independent resources, but it’s probably a pretty good investment for the future, when your app will likely be used on higher resolution displays.

ADDITIONAL READING

Want to learn more? Here's a couple links to get you started:

• cabel.name: Apple's Next Generation Themes
• Red Sweater Blog - Resolution Independent Fever

If you've got any thoughts to add, please let me know in the comments.