How to: Designing for Retina displays

How to: Designing for Retina displays

By Sascha Eggenberger 25th February 2013

Allow me to take your fear. Designing for Retina displays isn't hard but there are a few things you should know and keep in mind.

Use vectors

Don't create bitmap graphics when you are designing for Retina. Why? It can be that you have to up- & downscale your document during the design process. You don't want to end up with blurred graphics, right?
 
Instead create simple vectors directly in Photoshop with the shape or the free-form pen tool. For more complex graphics I recommend you use an external graphic tool like Illustrator. For less complex vector graphics I use Sketch.
 

Don't mix resolutions

The biggest problem with different pixels per inch (PPI) settings for PSD documents appears when you copy layer styles between documents. Imagine you add a 2px border to a layer on a 72 PPI document and you want to transform the style to a document with 163 PPI settings, it will automatically scale up. So the only way to prevent this from happening is to use the default 72 PPI for all documents.
Note: There's a big difference between print and web design - for print design PPI is really important - but in web design is not.
 

Designing @1× or @2×? It is up to you!

There is no explicit advantage to starting your design at @1× over starting at @2×. I prefer building the initial design @1× and scale it up later to @2× for some fine tuning.
 

Use Slicy for the export

I'm a huge fan of the tiny but yet powerful tool called Slicy. You can easily export @1× and @2× graphics at once - and save a lot of time. It doesn't matter if you start designing @1× or @2×, with ease Slicy can magically enlarge your vectors and layer styles or it can fill in missing @1× versions.
 

Stay in touch – join our newsletter!

 

 

Comments

René's picture
René

I prefer Cut&Slice over Slicy because It creates the assets out of Photoshop. Isn't Slicy resizing exported .pngs or how does it handle it?

Also suggest if you're making assets for an app instead of a website, set the color management off.

sascha eggenberger's picture
Sascha Eggenberger

I don't know how exactly Slicy manages it to downsize the exported images. I'll get Cut&Slice a try, thank you for this one.

And I totally agree with the color management.

Add comment

Search form

Latest comments