Designing for iPhone 4 Retina Display: Techniques and Workflow

Advertisement

The iPhone 4 features a vastly superior display resolution (614400 pixels) over previous iPhone models, containing quadruple the 153600-pixel display of the iPhone 3GS. The screen is the same physical size, so those extra dots are used for additional detail — twice the detail horizontally, and twice vertically. For developers only using Apple’s user interface elements, most of the work is already done for you.

For those with highly custom, image-based interfaces, a fair amount of work will be required in scaling up elements to take full advantage of the iPhone 4 Retina display. Scaling user interfaces for higher detail displays — or increasing size on the same display — isn’t a new problem. Interfaces that can scale are said to have resolution independence1.

In a recent article, Neven Mrgan described resolution independence2: “RI [resolution independence] is really a goal, not a technique. It means having resources which will look great at different sizes.” If it’s a goal, not a specific technique, then what techniques exist? How has Apple solved the problem in iOS?

Fluid Layouts

While apps that take advantage of Apple’s native user interface elements require a lot less work when designing for the Retina display, we’re here to talk about highly custom, graphic-driven apps that need a fair amount of work to take full advantage of the Retina display.

While not strictly a resolution-independent technique, using a fluid layout3 can help an app grow to take advantage of a larger window or screen by adding padding or by changing the layout dynamically. A lot of Mac, Windows and Linux apps use this method, as do some websites.

This is partially how Apple handled the difference in resolution from iPhone to iPad — a lot of UI elements are the same pixel size, but padded to make use of the extra screen real estate. The status bar is a good example of this. It works because the pixel densities of the iPhone 3GS and iPad are similar (163 ppi vs 132 ppi).

Screenshot4
Full view5

Fluid layouts work when the change in density is minor, but aren’t any help with the iOS non-Retina to Retina display transition (163 ppi to 326 ppi). The image below demonstrates what would happen if an iPhone app was simply padded to cater for the higher resolution display of the iPhone 4. Buttons and tap areas would be the same size in pixels, but half the physical size due to the higher pixel density, making things harder to read and to tap.

Screenshot6
Full view7

Just-in-time Resolution Independence

Another approach to handling widely different resolutions and pixel densities is to draw everything using code or vector-based images (like PDFs) at runtime. Without trying to stereotype anyone, it’s usually the approach engineering-types like. It’s clean, simple and elegant. It lets you design or code once, and display at any resolution, even at fractional scales.

Unfortunately, using vector-based images tends to be more resource-hungry and lacks pixel level control. The increase in resources may not be an issue for a desktop OS, but it is a considerable problem for a mobile OS. The lack of pixel level control is a very real problem for smaller elements. Change an icon’s size by one pixel, and you will lose clarity.

Screenshot

Neven emphasizes in his article8 that:

“…it is simply not possible to create excellent, detailed icons which can be arbitrarily scaled to very small dimensions while preserving clarity. Small icons are caricatures: they exaggerate some features, drop others and align shapes to a sharp grid. Even if all icons could be executed as vectors, the largest size would never scale down well.”

Although here he is talking exclusively about icons, his description is apt for most UI elements. The decisions involved in scaling are creative, not mechanical. Vector-based elements aren’t suitable for all resolutions, if you value quality.

Ahead-of-time Resolution Independence

The best quality results — and the method Apple chose for the iPhone 3GS to iPhone 4 transition — comes from pre-rendered images, built for specific devices, at specific resolutions: bespoke designs for each required size, if you will. It’s more work, but pre-rendering images ensures everything always looks as good as possible.

Apple chose to exactly double the resolution from the iPhone 3GS to the iPhone 4, making scaling even easier (different from the approach of Google9 and Microsoft10 — notice that this article is not relevant to the latest version of Microsoft’s mobile OS — proving yet again that controlling the entire stack has huge advantages).

Screenshot

Currently, there are three iOS resolutions:

  • 320 × 480 (iPhone/iPod touch)
  • 640 × 960 (iPhone 4 and iPod with Retina display)
  • 768 × 1024 / 1024 × 768 (iPad)

In a few years, it seems highly likely that the line-up will be:

  • 640 × 960 (iPhone/iPod touch with Retina display)
  • 1536 × 2048 / 2048 × 1536 (iPad with Retina display)
  • Some kind of iOS desktop iMac-sized device with a Retina display

There are significant differences between designing iPhone and iPad apps, so completely reworking app layouts seems necessary anyway — you can’t just scale up or pad your iPhone app, and expect it to work well or look good on an iPad. The difference in screen size and form factor means each device should be treated separately. The iPad’s size makes it possible to show more information on the one screen, while iPhone apps generally need to be deeper, with less shown at once.

Building Designs That Scale

Building apps for the iPhone 4 Retina display involves creating two sets of images — one at 163 ppi and another at 326 ppi. The 326 ppi images include @2x at the end of their filename, to denote that they’re double the resolution.

When it comes to building UI elements that scale easily in Adobe 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’m willing to bet that 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 my practice from using vector shapes only when I could be bothered, to building entire designs exclusively with vector shapes.

I usually draw simple elements directly in Photoshop using the Rectangle or Rounded Rectangle Tool. Draw circles 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).

Screenshot11
Full view12

More complex objects get drawn in Adobe Illustrator to the exact pixel size, and 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, scroll around the document with the Hand Tool, and paste again. Repeat until everything aligns. Yes, it’s maddening, but the method works after a few attempts. Another option is to zoom in to 200%, select the path with the Direct Selection Tool, and nudge once, which will move everything exactly 0.5px.

Screenshot13
Full view14

Even more complex objects requiring multiple colors get drawn in Illustrator to the exact pixel size, and 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 are three options: use a pattern layer, a pattern layer style, or build a bitmap layer at the 2× size and turn it into a Smart Object. I prefer to use pattern layer styles in most cases, but be warned: patterns are scaled using bicubic interpolation when you scale the entire document, so they become “softer.” The solution is to create two versions of each pattern, then to manually change pattern layer styles to the correct pattern after scaling — a little tedious, but totally do-able approach.

Screenshot15
Full view16

Scaling Up

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

Screenshot

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 — a huge advantage.

Screenshot

A word of warning: layer styles can only contain integer values. If you edit a drop shadow offset to be 1 px with the document at 2× size, and then scale it down, the value will end up as 1 px because it can’t be 0.5 px (a non-integer value). If you do require specific changes to the 2× version of the Photoshop file, you’ll have to save that version 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 here 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, then use Copy Merged and paste the selection into a new document — not much fun when you have hundreds of images to export.

The problem is amplified when saving for the Retina display, where there are twice as many images and the 1× images must match the 2× images precisely.

The best solution I’ve come up with so far:

  • 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 with 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 the Web, overwriting the file.

In some cases, Photoshop’s “Export Layers To Files” can help. The script can be found under the File menu.

Mac Actions and Workflows

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

Download: Retina Actions and Workflows.zip17

Screenshot

Fortunately, Apple chose to 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 had chosen a fractional scale for the display.
(rs) (ik) (vf)

Footnotes

  1. 1 http://en.wikipedia.org/wiki/Resolution_independence
  2. 2 http://mrgan.tumblr.com/post/708404794/ios-app-icon-sizes
  3. 3 http://en.wikipedia.org/wiki/Web_design#Layout_types
  4. 4 http://www.smashingmagazine.com/wp-content/uploads/2010/11/lockscreen.png
  5. 5 http://www.smashingmagazine.com/wp-content/uploads/2010/11/lockscreen.png
  6. 6 http://www.smashingmagazine.com/wp-content/uploads/2010/11/phone-app-fluid.png
  7. 7 http://www.smashingmagazine.com/wp-content/uploads/2010/11/phone-app-fluid.png
  8. 8 http://mrgan.tumblr.com/post/708404794/ios-app-icon-sizes
  9. 9 http://developer.android.com/guide/practices/screens_support.html
  10. 10 http://msdn.microsoft.com/en-us/library/bb278110.aspx
  11. 11 http://www.smashingmagazine.com/wp-content/uploads/2010/11/vector-only-psd.png
  12. 12 http://www.smashingmagazine.com/wp-content/uploads/2010/11/vector-only-psd.png
  13. 13 http://www.smashingmagazine.com/wp-content/uploads/2010/11/complexshapes.png
  14. 14 http://www.smashingmagazine.com/wp-content/uploads/2010/11/complexshapes.png
  15. 15 http://www.smashingmagazine.com/wp-content/uploads/2010/11/vector-only-psd-consume.png
  16. 16 http://www.smashingmagazine.com/wp-content/uploads/2010/11/vector-only-psd-consume.png
  17. 17 http://www.smashingmagazine.com/wp-content/uploads/2010/11/Retina-Actions-and-Workflows1.zip

↑ Back to top Tweet itShare on Facebook

Marc Edwards (@marcedwards) is the Director & Lead Designer at Bjango (@bjango) and co-host of the Iterate podcast (@iteratetv).

Advertising
  1. 1

    Thanks for the actions! Great help!

    0
  2. 52

    Thank you again for this brilliant article. It inspired me to write an article that will help you kickstart your design process for iPhone apps:

    Hope it will be helpful as well.

    0
  3. 103

    Derek Brooklands

    April 3, 2012 11:34 pm

    Solid tips and good reasons for making sure your site is ‘retina ready’. Thank you for sharing.

    0
  4. 154

    great article marc..

    I am Beginner in Iphone application development. so any idea how to implement the the photoshop design in iphone application.

    thanks for posting this nice article.

    0
  5. 205

    Great article; I agree with almost everything. The one thing I don’t get is why so many designers swear by Illustrator. I should preface the following argument by saying I am a visual designer at a large mobile app company and I deal with creating mobile graphics for iOS, iOS@2X, and Android (both hdpi, and and xhdpi densities) on a daily basis, so I am not asking for advice on the differences between the two programs — I know them well — what I want to know is why so many designers use Illustrator; I don’t see it as a very useful application really.

    I Photoshop everything. I really don’t understand why people say “Illustrator is a vector application and Photoshop is for pixels” — when in reality, both applications do both, with a slightly different feature set and use case, arguably. I find Illustrator clunky, loaded with a lot of features I don’t care about, and I think its layering system is illogical (not to mention incompatible with other Adobe products’ layers). So, I also use Photoshop for creating mobile assets (even icons much more complicated than the box example); and I get creative with clipping and layer masks to maintain non-destructive source files.

    Are there any mobile visual designers out there who swear by Illustrator, or use a combination of Illustrator and Photoshop to cut mobile parts; and could explain to me somewhat concisely why it’s a better program for creating vector assets?

    0
  6. 256

    I have uploaded some of nifty Actions in Adobe Exchange, I have recorded these actions to help me in quicker extraction of mobile design elements from Photoshop files.

    Here it is,
    http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&loc=en_us&extid=3203522

    Hope this helps others also.
    Robert

    0
  7. 307

    Wow…you sir, have predicted the future…

    0
  8. 358

    Hi!
    I have a question about font sizes, which I would be very happy if I could get answered.

    I have seen a couple of places that the minimum font size is 12 or 13 pt – is that for the iphone4 retina?

    So I can make it smaller for 320×480?
    A 12 pt looks huge in a 320×480 document.

    Thanks in advance!

    0

↑ Back to top