Designing for Retina display, part two

Answers to some of the most common questions I’ve been asked since writing the initial Retina display article and Smashing Magazine article.

Should my images be saved at a specific PPI?

No. iOS ignores PPI (pixels per inch) stored inside images, so it doesn’t matter if your main design document is set to 72PPI, 163PPI, 326PPI or any other value. However, the pixel dimensions of your images do matter, so make sure you get those right. It’s also important to ensure your 2× images are exactly double the dimensions of your 1× images and that elements within the image are in the same positions—your Retina images should be identical content to their smaller counterparts, but with more detail.
Tech note: The PNG image format stores its pixel density as pixels per meter. This can cause rounding errors when converting between pixels per inch (PPI) and pixels per meter (PPM). Ever seen an image change from 300 to 299.999PPI when saved as a PNG? This is why.

Can’t I just design at 2× and bitmap scale down to 1×?

No. If you batch bitmap scale your images, or use Save for Web & Device’s image scaling or bitmap scale using any other method, you’ll be doing some serious damage to the quality of your 1× images. This is why everything should be built as vector objects with layer styles and other generated effects.
Take a look at the images below. The Bicubic and Nearest Neighbour versions have some significant quality loss, especially the text and near the top and right edge of the button. I realise that most text in your app will be generated by iOS, but the example still holds true—bitmap scaling hurts your images.

Do I really need to build two sets of images?

Yes. iOS needs a full set of 1× and 2× images. If iOS (or Xcode) bitmap scaled your 2× images down, the quality of your assets would be reduced. Please refer to the previous question for more detail.

Why build the initial design at 1×, rather than 2×?

There’s advantages to working on your design at 1×, but also advantages to working at 2×. Personal preference will play a big part in your decision. I favour building initially at 1×, then scaling up for the finishing touches and exporting. For me, the important factors are:

Pixel grid

Working at 1× ensures everything you do is locked to the 1× grid. Working at 2× means that you have to ensure you only use even positioning, even heights, even widths and even layer style values. If you don’t, uneven values (1, 3, 5 etc) will land on half pixels (0.5, 1.5, 2.5) when scaled down to 1×, resulting in blurry edges or rounding errors. If you choose to work at 2×, you’ll have to scale to 1× prior to exporting any images and double check everything’s ok.

Details

Working at 1× won’t allow you to see all the fine detail available on a Retina display, so you may forget to take advantage of it. You’ll also have to be careful when placing photographic elements if working at 1×—they’ll need to be converted to smart objects prior to shrinking them to the size they appear in the design.

Preview size

Working at 1× means a 1:1 pixel preview on your computer’s display will be smaller. In some cases this is vital, because your display may not be big enough to comfortably show a portrait iPhone Retina preview (960 pixels high, plus enough to fit the menubar, window bezels and dock). When the Retina display iPad is released, the situation will only get worse. I don’t know too many displays that can fit 2048 pixels vertically. The current 27" Cinema Display is 1440 pixels high, so even with the largest Apple display available, you won’t be able to work on portrait designs for a Retina iPad and see the entire iPad screen uncropped. Yep, a Retina iPad would have 3,145,728 pixels, just shy of a 27" Cinema Display’s 3,686,400 pixels. If you need to, take a moment to think about that.
Mike Rundle prefers starting at 2× and scaling down. I think it’s very likely that a lot of other designers would agree. Either is fine, provided your documents are built to scale up and down without losing quality—this will let you switch between 1× and 2× as you see fit throughout the process.
I thought it might be nice to hear from Mike why he prefers building at 2×.

“Starting a design at 2× from the start lets me get deep into the fine, pixel-level details immediately. Stuff like intricate textures and noise effects that will only be in the Retina graphics, not at the 1× size. I like to add detail at the 2× level that the 1× graphics won’t have, similar to a 512px icon on Mac OS X compared to its 256px version. Always being on an even pixel and always applying Layer Style effects in even amounts is tricky, but it’s built into my mind now so I don’t think about it too much. It’s just a preference, everybody has their own way of doing it!”

Why not use Slices for exporting?

If you’re building a single page design, like a simple website template, Photoshop’s slice tool can help export the various images needed. When designing iOS apps or websites with multiple pages and states, I find the slice tool almost useless. This is because I use folders for each state, so a single slice overlay wouldn’t cater for all the possible variations.
One way to automate exporting with slices would be to build all the required elements as a giant sprite sheet. For the kinds of apps we create, this would require the initial design to be built (so we can see a pixel perfect preview and discuss the design), then for the sprite sheet to be made. As appealing and fast as exporting would be from a sprite sheet, the additional time required to create it probably outweighs the benefits—you’d spend more time building it than it would take to export the images one by one. Now might be a good time to mention that OpenGL games often require sprite sheets, so game image exporting can be a little different (there’s performance benefits to atlasing images).
If Photoshop contained Slice sets as layers that could be enabled and disabled, then I’d be using them. I’d be even happier if non-user slices were’t ever show or saved (who thought that was a good idea?).

Why not use Fireworks for UI design?

Fireworks is extremely capable, but I prefer Photoshop. In a lot of respects, the tools in Fireworks and Photoshop are similar or identical, so personal preference will likely be the deciding factor. I’ve been using Photoshop since version 2, so it’s very familiar. The times I have strayed and tried other apps, I haven’t liked them as much or missed vital features. For me, it’s as simple as that. However, I believe it’s important to present Fireworks as a good alternative, so here’s some words from Graham Clarke on why he uses Fireworks.

“I use Fireworks for all of my user interface work. Fireworks is a bit like the lovechild of Illustrator and Photoshop. It’s vectors... but with pixels in mind. And because of its web design heritage, exporting slices is pretty efficient in both workflow and compression quality. I just wish Adobe would take it a bit more seriously.”

Why not use Illustrator for UI design?

Illustrator is primarily vector-based. It lacks the pixel level control Photoshop and Fireworks have. It’s great for single elements though. If you’re building an app that prodominately uses Apple’s UI elements, but you need some simple icons, Illustrator can be a good choice. If you need to build entire custom UIs with lots of elements, it’s simply not the way to go.

App icons are slightly different

Please note that the original Designing for Retina display article and this article discuss iOS app user interface design, not app icon design. App icons can be built in a similar way and a lot of the advice is the same, but have their own unique issues because they need to be scaled to a larger range of sizes.
If you have any questions, hit me up on Twitter and I’ll do my best to answer them.