How to: Designing for Retina displays

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!



Add a comment

What is Amazee Labs?