Designing for Retina

Written by Chris on August 24th, 2012. Posted in Design

At WWDC this year, Apple announced a new MacBook to the world - the MacBook Pro with Retina display. Of course, this has the same pixel-dense screen as the new iPad, iPhone 4 and 4S models before it. With four times as many pixels than the standard 15″ screen, this gives designers a whole new canvas to work with.

Why does this matter’ The extra pixels give room for more details to be shown in the interface such as highly-detailed icons, sharper text that enables beautiful typography, and for photos and images to pop off the screen at a higher fidelity than print.

retina_comparison

When the Retina MacBook Pro was announced, I was excited that one of my favourite hardware features from iOS had made its way onto the desktop, but as a designer I was wondering what the best methods would be to design for it. I was also eager to take advantage of the extra pixels and make our apps look even more stunning! I quickly managed to work out a way that felt comfortable designing Retina apps for the Mac, and one that could also crossover to iPhone and iPad app design.

My Workflow

At Realmac, my setup for working includes a Retina MacBook Pro as a secondary display connected to an external Cinema Display. Even though I have a HiDPI screen at my disposal, the primary application I use for designing (Photoshop) has yet to be updated for Retina screens. My typical canvas size for designing a Mac app is 1200x1800 which means having it at double the size on a 27″ display gets chaotic, so I typically design everything at “@1x”. Almost all of my documents were created long before the announcement of Retina displays for the desktop, even though HiDPI desktops had been rumoured for some time. As soon as the new displays were announced, the first thing I had to do was to make sure our apps could take full advantage of these displays - the first one being Analog.

Vector Shapes

Ever since I started designing, I have been a keen advocate for designing everything in Photoshop using purely vectors wherever possible, with the obvious exception for images needed in mockups. Coming from an icon design background, it has always felt comfortable to me, and gives you a lot of freedom especially when editing, resizing or refining something. Unbeknownst to me at the time, designing using vector shapes also made the designs future-proof, so when it came to making Analog ready for the Retina display, most of my work had already been done! All I needed to do was resize the canvas to exactly double the existing pixel size and save the PSD as a copy. Whilst some designers would be happy to simply double the canvas, and export the Retina assets straight over to their developers, others may prefer to make a number of tweaks and edits in the document before it can be exported. There’s no right or wrong answer with this, and I prefer to test each asset in context and decide which approach works best. Depending on the style of a button, a single pixel border might not look very defined and clickable, but for icons with a lot of little details, it works very well!

icons

In the image above you can see a comparison two different exports. On the left, the layer style values of the icon have simply been doubled - whereas on the right the values have been tweaked. When doubling the values, the distance of an inner shadow would grow to 2px when upscaled, which would look too harsh on a Retina display, so I’ll experiment to see what looks right. In the example above, I tend to find that a distance of 1px works quite nicely here. Designer Louie Mantia wrote in more detail about this on Dribbble

If you’re designing @2x from scatch make sure the dimensions of your shapes and elements are never an odd number of pixels. When you scale down, edges will appear blurry as the edge of the shape will draw on a sub-pixel. Setting up a gridline and subdivision every 2 pixels in Photoshop’s preferences will help you catch this early on.

Testing Graphics

It’s important to test your optimised graphics on a Retina device as early as possible, and I’ve found a couple of ways you can do this. If you’re using MacBook Pro with Retina display, attached to an external display, you can use Preview along with Photoshop. Whilst you’re working on your PSD, also open it with Preview and drag the Preview window over to your MacBook Pro display (making sure to show the image at its true resolution). Every time you save changes in Photoshop, refocus the Preview window and it will refresh to show the updates. This method isn’t exactly ideal, and a workaround in the interim until Adobe updates CS6 so it takes advantage of the new display. Currently, Photoshop will only open in low resolution mode, making windows appearing blurry at HiDPI. Alternatively, if you don’t have a Retina MacBook to hand, but do have a new iPad, then I recommend using Skala by Bjango. Run the Mac app and set it up under Photoshop’s Remote Connections panel, launch the iOS companion and you’ll see your document rendered on the device with any changes you make automatically pushed through.

Exporting Assets with Slicy

Exporting graphics from my mockups used to be one of my least favourite parts of designing an app. It was something that took up a substantial amount of time, and can be particularly tedious. Of course, designing for Retina, you’re having to export two sets of bitmap images for any element - one “@1x”, and another “@2x” that should be exactly twice the pixel height and width of its standard resolution counterpart.

One app that came out recently that helps designers a great amount with this arduous task is MacRabbit’s Slicy. This indispensable app works by dragging and dropping your PSD onto the Slicy app icon, and it will export any layers or groups you’ve told it to in multiple resolutions. It doesn’t matter if you create your graphics at normal or double size, Slicy works for all designers. To get Slicy working for you, rename your layer or group to include “.png+@2x” at the end of its name to create a Retina asset from a standard resolution document, or if your PSD is already at double size, just make sure the element you want to export ends in “@2x.png” to get both sizes. The latter option is my preferred method due to the previously-mentioned upscaling of layer styles. You can read more about the different methods for scaling your assets with Slicy here.

renamed_layers

Display Switching

Of course, with the Mac being able to have external displays there’s the ability to move apps between Retina and non-Retina displays. There’s a threshold the application window has to pass (50% of the window width) before the graphics update on the Retina display, and I’d highly recommend testing how your app responds to being moved between displays.

One issue that we found whilst testing Analog on multiple displays is that there was a slight positioning change in some assets when dragging the window between displays. With Analog this was noticeable in a couple of places. Certain icons jumped ever so slightly, and when we re-generated the Filter previews at double size the image did not match the originals. Both of these issues would have been avoided by bringing Slicy into our workflow sooner - the issues arose when we re-drew items separately from the originals, instead of creating both sizes together.

App Icons

In OS X Mountain Lion, icons have also been updated to take into account the new Retina display. Apple have done away with Icon Composer and ICNS files in favour of “Icon Set” folders. Along with the typical 16-, 32-, 128-, 256- and 512-pixel versions, additional @2x versions will need to be included, much like your application’s UI. In order to create an Icon Set, make a new folder and save off each icon as a PNG with an sRGB colour profile using the following naming convention:

icon_<size>x<size>.png

Then make sure that there are @2x versions to go along side each of the included versions - for example the 1024-pixel icon which appeared in 10.7 should now be icon_512x512@2x.png. You should eventually have icon representations for a complete set which you can reference in the table below. Once you have everything exported, just add .iconset to the folder name to create your icon and add it to your app. It’s as simple as that! One cool feature in Mountain Lion is the ability to Quick Look a Icon Set folder, and there’s even a slider to view all the permutations and variants easily like you could in Icon Composer. Other bonuses of using Icon Sets include that they’re much easier to organise and colour manage. As Icon Sets are only supported on OS X Mountain Lion, you can use the iconutil command line tool to create ICNS files from Icon Sets if you’re targetting OS X Lion or earlier.

icon_size

Final Words

In this post, I’ve covered some important things to consider when designing for the new Retina display and how I optimised my workflow for Retina. If you have any alternate methods or tricks you have been using, or any other thoughts on this post, feel free to leave a comment below or send me a reply on Twitter.

Oh, and one final thing: be sure to check out version 1.2 of Analog on the Mac App Store when it launches. It’s been fully updated for Retina with a load of other great new features, and will be available very soon!

You might also enjoy

How To Roll Your Own Text Services

I’m one of the Engineers at Realmac, and it’s our job to help take the great ideas and designs from the rest of the team and build them. If a designer deals in pixels, an engineer deals in text -…

Read More