Designing for Retina display

Building apps for the iPhone 4’s Retina display involves creating two sets of images—one at 163ppi and another at 326ppi. After slugging our way through an app build or two, we feel confident that we have a decent workflow for attacking future Retina display app designs. Hopefully this information is of use to other designers.

When it comes to building UI elements that scale easily in Photoshop, bitmaps are your enemy, because they pixelate or become blurry when scaled. The solution is to create solid color, pattern or gradient layers with vector masks (just make sure you have snap to pixel turned on, where possible). While a little awkward at times, switching to all vectors does have significant advantages.
Before anyone mentions it, I’m not suggesting any of the methods are new—I bet most icon designers have been working this way for years. I’ve been using vector shapes for ages too, but the Retina display has changed me from using them when I could be bothered, to building entire designs with vector shapes exclusively.
I usually draw simple elements directly in Photoshop using the rectangle or rounded rectangle tool. Circles are drawn using the rounded rectangle tool with a large corner radius, because the ellipse tool can’t snap to pixel. Layer groups can have vector masks too, which is handy for complex compositing (option-drag a mask from another layer to create a group mask).

More complex objects get drawn in Illustrator to the exact pixel size, then pasted into Photoshop as a shape layer. Be careful when pasting into Photoshop as the result doesn’t always align as it should—it’s often half a pixel out on the x axis, y axis or both. The workaround is to zoom in and scroll around the document with the hand tool and paste again. Repeat until everything aligns. Yes, it’s maddening, but works after a few attempts. Another option is to zoom to 200%, select the path with the direct selection tool and nudge once, which will move everything exactly 0.5px.

Even more complex objects, that require multiple colours, get drawn in Illustrator to the exact pixel size, then pasted into Photoshop as a smart object. It is a last resort though—gradients aren’t dithered and editing later is more difficult.
If you need to use a bitmap for a texture, there’s three options: Use a pattern layer, a pattern layer style or build a bitmap layer at the 2× size, then turn it into a smart object. I prefer to use pattern layer styles in most cases, but be warned, patterns get scaled using bicubic interpolation when you scale the entire document (so they become softer when scaled). The solution is to create two versions of each pattern and manually change pattern layer styles to the correct pattern after scaling. A little tedious, but totally doable, just don’t forget.

Scaling up

At this point, your document should be able to scale to exactly double the size without a hitch.

I have a Photoshop Action set up that takes a history snapshot then scales to 200%. That means previewing at the Retina display’s resolution is only a click away. If you’re feeling confident you’ve built everything well, you should be able to scale up, edit, then scale down and continue editing without degradation. If you run into trouble, a snapshot is there to take you back. Using one document for both resolutions means not having to keep two documents in sync. It’s a huge advantage.

A word of warning: Layer styles can only contain integer values. If you edit a drop shadow offset to be 1px with the document at the 2× size, then scaled it down, the value will end up as 1px, because it can’t be 0.5px (a non-integer value). If you do require specific changes to the 2× version of the Photoshop document, then you’ll have to save it as a separate file.

Exporting, exporting, exporting

Now for some bad news. Exporting all the images to build an app can be extremely tedious, and I don’t have much advice to assist you. As my documents act as full screen mockups, they’re not set up in a way that Photoshop’s slice feature is any use. Layer comps don’t help either—I already have folders for each app state or screen, so switching things off and on is easy.
The best export method seems to be: Enable the layers you’d like visible, make a marquee selection of the element, copy merged, new document, ok, paste. Not much fun when you have hundreds of images to export.
The problem is amplified when saving for Retina, where there’s twice as many images, and the 1× images must match the 2× images precisely.
The best solution I’ve come up with so far is:

• Build your design at 1×.
• Use copy merged to save all the 1× images.
• Duplicate the entire folder containing the 1× images.
• Use Automator to add @2x to all the filenames.
• Open each @2x image and run the Scale by 200% Photoshop action. This gives you a file with the correct filename and size, but upscaled content.
• Scale your main Photoshop design document by 200%.
• Use copy merged to paste the higher quality elements into each @2x document, turn off the lower quality layer, then save for web, overwriting the file.

Exporting layers

In some cases Photoshop’s Export Layers To Files script can help. It’s especially helpful if you need to export lots of icons or images that are the same size and can be set up on individual layers in a separate document. The script can be found under the File menu.

Actions and Workflows

All the Actions and Workflows I use myself can be downloaded below. The Automator Workflows can be placed in your Finder Toolbar, for quick access from any Finder windows without taking up any space in your Dock.

Download: Bjango Actions and Workflows.zip

Kudos to Apple for choosing exactly double the resolution for the iPhone 4, and for using ahead-of-time resolution independence. As complex as the process is now, things would have been far worse if they chose a fractional scale for the display.

Questions?

Some of the most common questions on this topic have been answered in Designing for Retina display, part two.