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 slogging 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.

Bitmaps are your enemy #

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.

Actions and Workflows #

All the Actions and Workflows I use myself can be downloaded from our Bjango Design Resources page. 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.

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.

Published 27 August 2010.