Blog

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.

Comments

René

25th February 2013 - 14:02

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

25th February 2013 - 14:02

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

Latest comments

Thanks for using Views Auto-Refresh and glad it's working out for you! The new version at http://drupal.org/project/views_autorefresh now uses an area handler to allow site builders to set it up. It should be functionally equivalent to the Views Hacks version, in addition to the bug fixes that went into it since it moved.

infojunkie
22.05.2013
Permalink
@Gurpreet

Not sure I understand your question fully.

If you try run this on your local without a web server you might get a bunch of errors or no unicorn at all. Vectron uses Ajax requests to get the SVG file, for this you need to have a local web server or run it on a real environment. More about this issue can be found here.

If your question is of a different nature why not ask it over on Stack Overflow, where you can ask your question to a broader audience. I'm sure somebody there will have had the same challenge as you.

Daniel Truninger
22.05.2013
Permalink
@Daniel:

I am sorry but I never have used Statuses. I can confirm moist of your steps. But you don't need to clone your original view. You have to duplicate it. (I assume that your original view is not a page)

In my example above i have a View-Pane. And the autorefresh part is a page. So I had to built the whole view as a page again so i can give it a path.

I hope this was helpful. If not, please feel free to contact me via E-Mail or Skype.

Boris Baldinger
22.05.2013
Permalink