Menu Search
Jump to the content X X
Smashing Conf San Francisco

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf San Francisco, dedicated to smart front-end techniques and design patterns.

A Better Way To Design For Retina In Photoshop

Recently, I had a project in which I needed to produce high-fidelity screens for a tablet. I was to present these screens on the device and also produce a clickable prototype. They needed to be pixel-perfect. The timeline was tight (as always), so I went with my go-to tool, Photoshop. I’ve been using it for over ten years, and it gives me the fastest high-quality output.

Are you designing at “Retina” resolution in Photoshop? If the answer is yes, then this article is for you. I will walk you through the problems I faced in creating Retina mockups to be displayed on a tablet device. I will then explain a way to work that is easier and gives you better performance. This is about my experience with Photoshop, but it could be applied to Illustrator and other software.

Here are a few designs for the tablet application
Here are a few designs for the tablet application.

Throughout this article, I will use the @2x and @3x notation. These represent the Retina buckets for iOS. A great example is the app’s icons. For the original iPhone, it would be 60 × 60 pixels (@1x). For the iPhone 4, it would be exactly double, 120 × 120 pixels (@2x). Now, the latest devices are dipping into triple territory. For the iPhone 6 Plus, the icon would be 180 × 180 (@3x). When talking about @2x or @3x, I am referring to using double or triple the pixel dimensions. All should become clear as you read on.

The Problems Link

Now, let’s get into the design of this tablet application. Like many other designers, I had been told that one must design at Retina resolution. The general consensus is @2x or @3x. So, I set out on my merry way, designing @2x. The design would be presented on a Nexus 9 with a 4:3 ratio, so my Photoshop canvas was set up to 2048 × 1536 pixels. After creating a few screens, I realized in practice this doesn’t work well at all. Let’s work through the issues I found.

Zoom Factor Link

At first, this is no big deal. Zoom out to 50% or 33% to see your design at roughly 1:1. But at the same time, it’s a bit ridiculous, right?

Shown is the corner of a design at @1x to @3x
You can quickly see the resolution getting out of control. Shown is the corner of a design at @1x to @3x.

Why should you have to zoom in and out constantly to see what’s going on? It also completely ruins pixel-snapping1, which works best at 100%. It’s almost impossible to know whether a pixel is aligned when you are zoomed at 33% or 50%! Suffice it to say, I got pretty fed up zooming in and out like a maniac to get things aligned pixel-perfectly.

Performance Link

This is a big one. Let’s use a tablet with a 4:3 ratio as an example. I set up a blank PSD @1x (which is 1024 × 768 pixels) and another @2x (2048 × 1536) and a third @3x (3072 × 2304). I then did some comparisons.

Table showing number of pixels, size on disk and memory for @1x – @3x blank PSD
Table showing number of pixels, size on disk and memory for @1x to @3x blank PSDs.

First, I looked at the number of pixels in the PSDs. The @2x PSD has four times as many pixels. The @3x has nine times as many. This directly affects memory usage, which itself goes up by four times and nine times! For our blank PSD, this went from 2.25M to 9M @2x, and then 20M for @3x.

Last but not least, it also needs to store all of these extra pixels. So, your file size increases as well. The size on disk went up by 280% for the @2x, and up by 590% for the @3x. Now, in our blank PSD this is only an increase from 60 to 358 KB. But once you’ve got some serious smart objects and layers going on, watch out! Let’s take the example of a PSD that is 100 MB. The @3x could be 590 MB. Then, multiply this by the 20 to 30 documents in your project!

From a performance standpoint, it’s very clear that working at Retina is going to cost you some serious RAM, CPU and disk usage.

Font Size Link

This issue becomes obvious pretty quickly when you’re working @2x or @3x. Suppose you’ve set out to make a text box with the font set to 16 pixels. But @2x this is 32 pixels, and @3x it’s 48 pixels! Not ideal, is it, having to constantly multiply by two or three? I don’t know about you, but I could do without the constant math. When I design, I want to know that 16 pixels is 16 pixels!

Font sizes become a game of multiplication when working at Retina
Font sizes become a game of multiplication when working at Retina scale.

Whole Pixels Link

Here’s another gotcha. What happens when you use 1px at @2x Retina? You guessed it, it becomes 0.5 pixels! And @3x it would be even worse, 0.33 pixels! So, you also have to constantly be aware that your sizes must be divisible by 2 or 3 when working in Retina. Another consideration comes into play if you ever use @2x with an odd pixel value. Let’s say you have a box that is 33 pixels wide; when converted back to @1x for build, this becomes 16.5 pixels! Yet another brain drain from working with Retina.

Illustration of how 1px would fall back from @1x to @3x
Illustration of how 1px would fall back from @1x to @3x.

Specs Link

This is another issue I’ve seen in the workplace: designers who have been working @2x or @3x and then begin to spec their design for developers. This usually involves documenting padding, widths, heights, font sizes and so on to ensure that the design is built well. But they forget they are at double or triple the resolution. So, the poor old developers get a complete spec in which they need to divide everything by 2 or 3! Not great, is it? Why make their life harder?

The other option is that the designer could save a new PSD at 50% or 33%, and then spec from that. But Retina-land looks like a one-way street. It’s hard to see through those blinkers.

The Good News Link

Don’t worry. After all the bad news, there is good news. While working on exporting icons for Android from Illustrator2, I discovered the world of density-independent pixels (DP). You can read a big long explanation on Android Developers about “Supporting Multiple Screens3,” or I can break it down for you real quick.

Basically a DP is the @1x pixel dimension or, in Android terms, the baseline density that is medium (MDPI). A density-independent pixel is the same as 1 physical pixel on a 160 DPI screen. The conversion is DP = pixel ÷ (DPI ÷ 160).

Let’s use our tablet example with a display of 2048 × 1536 pixels and 320 DPI. Running through the equation above, for the width we get 1024 DP, and for the height, 768 DP. This becomes our baseline resolution. And we also need to know the scale factor for image assets. That equation is: scale factor = DP × (DPI ÷ 160).

Using the width of 1024 DP and the device’s 320 DPI, if we run through this equation, we’d get a scale factor of 2. This means we’d need to output @2x assets for display on this device. It’s also pretty straightforward to see that 2048 ÷ 1024 = 2. So, don’t stress about the equations!

As another quick example, let’s take the Nexus 5. With its resolution of 1920 × 1080 pixels and 480 DPI, the DP units work out to be 640 × 360. Then, the scale factor comes out as @3x. So, now you know your DP dimensions and scale factor for assets.

Example of @1x to @3x DP units on various devices
Example of @1x to @3x DP units on various devices.

Once you have the DP dimensions, those become your PSD canvas size at 72 DPI. So, the answer to this mystery is to design @1x or in DP.

Some other devices don’t fit quite as nicely in these buckets, but you get the idea. The point here is that you are reducing to the baseline DP units and that you know the scale for exporting images.

“But I’m Stuck With @1x Images!” Link

Correct. And a @1x PNG would look horrible on a Retina device. What I needed was a way to work at @1x and with DP units, but export to @2x or @3x to preview on a device. My clients would accept nothing less. So, using my knowledge of exporting icons to various DPIs for Android, which I’ve covered elsewhere4, I applied the same technique to Photoshop.

The solution to my problem was a Photoshop script that exports any canvas to a @2x or @3x PNG for previewing on a device. Thus, one can keep working @1x and in DP and get all of the performance benefits and still get good-quality screens. Have your cake and eat it too, if you will.

Export Scripts Link

Here’s a quick rundown on how the script works:

  1. Your Photoshop canvas is resized to 200% or 300%.
  2. It creates a new folder named retina, where you PSD is saved.
  3. Then, it saves a PNG as <documentname>_2x.png or <documentname>_3x.png.
  4. It also clears and purges the history (“Undo”).
  5. Then, it saves the document exactly how it was before the script ran.

The scripts are very easy to modify. If you want to rename the folder or file name, you would just change the variables shown below:

var scale = "200%";
var folderName = "retina";
var extensionName = "_2x.png";

Installation Link

Download the scripts5 (ZIP, 4 KB) or view the project on GitHub6.

Once they’re downloaded and unzipped, copy the scripts and paste them into Photoshop’s Scripts folder: on Windows, Program FilesAdobeAdobe Photoshop CC 2014PresetsScripts, and on Mac, ApplicationsAdobePhotoshop CCPresetsScripts.

Please be aware this will vary according to your Photoshop version and operating system.

You’re almost done. Restart Photoshop, and the scripts will be ready to go. Now, anytime you want to export a PNG @2x or @3x, just click “File” → “Scripts” → “ExportDocument2xPNG” or “File” → “Scripts” → “ExportDocument3xPNG”:

Click File

Click “File.”
Go into Scripts and click ExportDocument2xPNG or ExportDocument3xPNG

Go into “Scripts” and click “ExportDocument2xPNG” or “ExportDocument3xPNG.”

You are now left with Retina images @2x or @3x, ready to put on the device.

Tips Link

Keep in mind a few things if you go for this approach. Use shapes and vectors wherever possible. They scale up perfectly, as do layer styles. Always use smart objects for any bitmaps. Keep in mind they will still need to be @2x or @3x inside.

Using this approach with Photoshop’s generator7 also works great. Any layers or layer groups can be exported @2x and @3x. And you will know they are pixel-perfect.

After producing the designs, I needed to create a clickable prototype for the client. I found that the exported PNGs work great with Marvel8. Marvel allows you to upload your images to Dropbox or through its own system. Once they’re uploaded, you can create hotspots and link to other screens. Then, you can view on a device to see your designs in action. The other bonus was that I used up less bandwidth and Dropbox space! Retina PSDs would have been superheavy!

Illustrator Link

If you use Illustrator, you can also work @1x and in DP. Make sure your document is set up for the web at 72 DPI. Then, you can manually export @2x and @3x PNG images by clicking “File” → “Export…” and selecting “PNG.” Click “Export.” Then, use the “Resolution” dropdown menu, click “Other” and input 144 PPI for @2x or 216 PPI for @3x. As with the Photoshop scripts, this can also be configured to be just one click!

Sketch Link

Your other option is to use the increasingly popular app Sketch9. It comes all set up and ready to go @1x with a vector-based workflow. There is built-in support for exporting @2x and @3x from layers and slices. Just note the requirement of operating system. The creator, Bohemian Coding, is proud to develop exclusively for Mac, with no plans to support Windows or Linux (according to its FAQ). It’s a great program if your workflow and business support it.

Thanks For Reading Link

Well, I hope this has been of use to you. It certainly has improved my workflow. Now I get superlight and fast PSDs that can be exported to Retina scale for viewing on a device. And the best part is that I am no longer maniacally zooming in and out or multiplying and dividing my pixels!

(da, al, ml)

Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9

↑ Back to top Tweet itShare on Facebook


Murdoch is a Designer/Developer who has worked at global agencies Ogilvy and Wunderman. He has worked on big name clients that include Coke, Microsoft, Xbox, Nokia, Mercedes, Nissan, Jaguar, IBM, Shell, BP and GSK. He keeps an eye out for the User in UI and is now focussed on mobile. Feel free to follow him on Twitter.

  1. 1

    I find working in @2x with Skala preview solves a lot of your top problems. For specs, you can set SpecKing to match your document so if working @2x the values with automatically divide by 2 giving you the dp values. Havn’t had any problems with this delivering work to Android and iOS teams. Generating Layer Comps as files and syncing these to inVision quickly produces prototypes too. Has saved me a lot of time recently.

    • 2

      Murdoch Carpenter

      May 18, 2015 5:14 pm

      I would encourage you to try @1x. Then there’s no chance of half pixels and you can stop worrying about all the division and multiplication!

      • 3

        Nice article! It’s been some time that I started work on app design and I am still trying to decide which is the best approach.
        I would say @1x is a logical path to choose but I have not figure out yet how to deal with shapes that have 1px stroke rendered @2x? (For example a 1px line) I cannot draw a half pixel line at @1x and have it grid aligned.

  2. 4

    Super helpful:
    Will export layers/groups to 1x, 2x, and 3x from the actions panel. If you work on a @1x PS document, but utilize smart objects to maintain higher density assets, it works gloriously.

    • 5

      Murdoch Carpenter

      May 18, 2015 5:11 pm

      Great, will take a look. Photoshop CC now has the ability to export retina layers/groups. It’s in the form of Adobe Generator. Also works great at @1x.

      • 6

        I’ve found that *upscaling* photos using Adobe Generator doesn’t keep the sharpness – it appears to just scale the current layer and not use the original hi-res image. Have you found a way around this?

  3. 7

    I recently found a Photoshop plugin that does this for you. Google ‘Resonator photoshop plugin’, you might be pleasantly surprised. The only possible downside is that it works with PS CC 2014 and up. Great article nonetheless, thanks!

    • 8

      Correction: It seems Resonator is purely for individual design elements. My guess was that it was possible to select all layers and export as one in desired density, but it seems that’s not possible. A great plugin nonetheless.

  4. 11

    How about creating for @1x then creating images/logos/icons (or whatever needed) for @2x and @3x separately? For eg: if you have placed a image of size 100X100, make sure you have the same image in 200X200 and 300X300 versions as well.

    • 12

      Murdoch Carpenter

      May 18, 2015 5:03 pm

      That’s exactly the concept Alok. Work @1x for layout and then export assets for retina.

    • 13

      I’m sorry but did you even read the article?

  5. 14

    I guess you nailed it in the end. Just switch to Sketch.

    • 15

      Murdoch Carpenter

      May 18, 2015 4:54 pm

      Correct, if you are lucky enough to have your business environment support it!

  6. 16

    Ryan O. Hicks

    May 18, 2015 4:55 pm

    Yo the October 6th, 2014 release for Photoshop CC (2014.2) allows retina exporting based on multipliers.

    Go to File > Extract Assets.

    More info here…–whats-new–2014-10

    • 17

      Murdoch Carpenter

      May 18, 2015 5:34 pm

      Yep, Extract works great when working at @1x for exporting layers/groups for retina. The Photoshop script in this article allows you to export the entire canvas ready for a retina prototype. Which as far as I know Extract or Generate do not allow.

      • 18

        Great article, and helpful scripts.

        Here’s a method I found that works using the Extract Assets tools in CC 2104. I have found it useful in doing something similar to what you have accomplished.

        If you group your entire project at the base level, you can label the group using the Generator Syntax. By doing this when you do the standard Export Assets you’ll be see an entire canvas output, as well as any other assets / layers you have marked up for output.

        I have created series of screen shots demonstrating an example. Please excuse the sparse, horrible design.

        The layer setup:

        Generator Dialog:

        Output folder:

      • 19

        – put the whole design in a single folder (which I often do, when there are multiple pages in one document)
        – CMD+A & layer-mask (good if some elements are “out of the box”)
        – name the layer/folder “200% [x2]/name@2.png, 300% [x3]/name@2.png” (just change “name” to your gusto

        You get two folders name “x2” and “x3” with your canvas as a PNG scaled to 200% respectively 300%, named with “name@2” respectively “name@3”.

        You can do that by hand but personally I prefer “coding” the layer-names ;)

        • 20

          Murdoch Carpenter

          May 19, 2015 7:42 pm

          @simv @Marius

          Nice trick there.
          I guess just make sure Generate is turned off. Or else every single change to any layer in your entire document will kick off a new image as you are trying to work!

      • 21

        Martin Pitt

        May 22, 2015 1:11 pm

        You don’t even need to group your entire project into a folder.

        If your using Layer Comps you can use the Generator Syntax on those as well now which is a relatively recent and awesome addition to Generator.

        I syntax export images from the layer comps as visuals and syntax on the layers/groups for individual assets.

        • 22

          Martin Pitt

          May 22, 2015 1:14 pm

          Oh and yeah, also export text layers into HTML (e.g. , , & ) and CSS using a custom plugin thanks to the Generator API.

        • 23

          Murdoch Carpenter

          May 25, 2015 4:15 pm

          Nice one Martin. Didn’t know you could use Generator on a Layer Comp!

  7. 24

    Evil Rabbit

    May 18, 2015 6:16 pm

    Still designing with Photoshop? Try Sketch!

    • 25

      I like working on Windows… Sadly Sketch has no plans for Windows support any time soon.

  8. 26

    will be enough to open Photoshop 32 bit.. ( right click > get info> open in 32 bit )

  9. 27

    I think your script using the same file solved one of the problems I use to have with retinizer creating a new file for each asset it exported. If your layer effect used global lighting they would get messed up in the new file that retinizer created to do the scaling and saving in.

    Always had to remember to un-check everything. Will give your script a go.

    • 28

      Murdoch Carpenter

      May 19, 2015 8:07 am

      Hi John, hope it helps! I put in a revert back to 100% and undo on the history so your original PSD is unchanged.

  10. 29

    This may be a strange concept but what happens if you’re not designing a “flat” vector based layout, and need to use raster images/photos. Wouldn’t the export enlarge a low res image thus making it worse on the higher res devices, rather than having a nice crisp image?

    • 30

      Murdoch Carpenter

      May 19, 2015 8:11 am

      Hi Rob. You can use Smart Objects or external PSD/PSB for any raster/bitmap artwork at @2x or @3x. Then scale these down to fit your @1x canvas. If there is enough resolution in the Smart Object they export fine with no pixelation.

  11. 31

    Do you really need to use Apple’s term for high-resolution displays (“Retina”) when Apple’s devices are just a part of the whole? A big chunk for sure, but certainly not the biggest anymore. Plus, there are plenty of devices out there that have screens as good or better than Apple’s current lineup.

    • 32

      Martin Pitt

      May 22, 2015 1:20 pm

      It’s a little easier than saying “High Resolution/DPI Displays”, Retina encapsulates that in a single word and I don’t even think of it belonging to anyone.

  12. 33

    I use a single ai file. I have artboards at sizes that match common device display sizes. Once the design is signed off I split each element out to individual artboards and handle all iOS and android screen densities via the resolution settings.

    • 34

      Murdoch Carpenter

      May 19, 2015 8:14 am

      Great way to work in Illustrator. Are you working at @1x/DP and then exporting larger? Or working to the devices actual pixel dimensions?

    • 35

      Ya, this is basically what I do. IMO, if you are still using Photoshop to build UIs, you are really selling yourself short and clinging on to an old method.

      Illustrator or Sketch are much more friendly for developing UIs. Not only does the vector attribute solve many of the resolution issues, but they handle visual attributes and objects in a much more effecient and managable way.

      Also, for the most part, UIs should be built with as much HTML/CSS as possible (or other front-end language). Slicing up images to generate the GUI is begging for long term issues in scalability.

      • 36

        Murdoch Carpenter

        May 25, 2015 4:23 pm

        Everyone has their tool of choice. Photoshop suited me perfectly in this instance.

        Illustrator does look great with multiple artboards and symbols! I’ve been looking into it some more recently when the UI must be designed across mobile, tablet and desktop.

  13. 37

    Jimmy Leonardsson

    May 19, 2015 8:51 am

    Raster based workflow doesn’t work anymore. Photoshop is increasingly getting more and more awkward to do modern digital designs with. It’s more apparent than ever now that Photoshop should be used for photo editing. Even InDesign is a much better tool for digital design. Too bad Adobe killed Fireworks.

    Sketch is streamlined for digital design, and the vector based workflow keeps the design resolution independent, lightweight and simple to work with. You can keep the whole project in a single file because you can have several art boards and pages. even with the current bugs its superior to photoshop in every way and I can never imagine turning back to the old terrible work flow and time waste.

    Definitely another good reason getting a Mac if your organization doesn’t have it already.

    • 38

      Murdoch Carpenter

      May 19, 2015 7:50 pm

      Unfortunately not all organizations will support a Mac only product. Consider yourself lucky!

    • 39

      Photoshop has turning itself quite well to fit with the modern digital designs with the latest version. There is a good comparison between Photoshop vs Sketch:

      With Layer Comps, Smart Linked Objects, Generator and Library, Photoshop has become an incredible time-saving and efficient tool for web/app design, plus it’s still a very flexible All-in-one tool for any graphic-wise things that you need to do without jumping between other tools.

      • 40

        Why not just use Illustrator? Even with the improvements Adobe has been making to PS, it’s still trying to fit a square peg into a round hole.

  14. 41

    Clemence Debaig

    May 19, 2015 1:50 pm

    Great article! We use a similar workflow here.
    (no Mac here, so Sketch is out of the equation…)

    – designing at 320px to optimise for an iPhone 4
    – exporting at a 200% scale to preview on a device and import in InVision to create some high fid interactive prototypes

    The other advantage we have found is that when you have a clear style guide, designing at 320px allows you to use the same font sizes (most of the time) and same UI assets than on Desktop.

    Another interesting link with the deference between real size and CSS size for most common devices:

    • 42

      Murdoch Carpenter

      May 19, 2015 7:31 pm

      Thanks Clemence. Sounds like a very similar workflow. For this project I was targetting a specific 4:3 tablet, exporting 200% and then taking the images into Marvel for the prototype. As you said, the same font sizes and style guide are a big plus in working this way.

      Cheers for the link. Will take a look.

  15. 43

    Chuck Penzone

    May 19, 2015 4:03 pm

    What if you have images in your document? Are you converting them to smart objects and then scaling them? Going from 1x to 3x is going to be noticeable on a raster image.

    • 44

      Murdoch Carpenter

      May 19, 2015 7:17 pm

      Hi Chuck. Yep, you’ve got it. Either embedded or linked Smart Objects at 2-3x for any bitmaps.

  16. 45

    In my experience scaling up or down upon export does not work as good as making the graphics at 100% size. Icon creators, such as Icon Factory would agree. You need pixel-level control and the ability to see how everything will look before exporting, and designing the graphics at 200% and 300% before exporting is the only way to assure everything will look as you intend at those sizes. Antialiasing when scaling up or down can sometimes cause issues.

    • 46

      Murdoch Carpenter

      May 25, 2015 4:25 pm

      Icons are a field in their own right. But I still think you should start @1x. Then any pixels you scale up to 200% and 300% will become 2x or 3px. As described in this artilce, if you start at 200% or 300% and happen to use 1px. When scaled down it becomes a half or third pixel! Not good!

      • 47

        Right, but it goes both ways. You can’t just design at 1x and then scale up and leave that scaled up version as is. You need to tweak it to look good at 2x.

  17. 48


    May 20, 2015 8:00 am

    Thank you, I have learned something today, will implement in designing. :)


  18. 49

    I think I still don’t get it. How should I start if I want to create web layout for macbook retina and normal PC? What size should be canvas size? I always create 1920 (72dpi) canvas size with 1170px container, but it looks very small in photoshop on retina. How should I make project to see in Photoshop correct size?

  19. 50

    So I use Illustrator for icon and web work. I work at 100% (72dpi) and then on export, in the percent dialog box, I simply type 200 or 300 depending on resolution requirements… Am I doing anything wrong?…

    • 51

      Murdoch Carpenter

      May 25, 2015 4:32 pm

      Hi Charlie. Yes, your start setup is correct. 100% and at 72dpi. To export your 200% and 300% images you would use the Export menu. I would normally export to PNG and have ‘Use Artboards’ checked. Illustrator makes it slightly more tricky as there is no option for percent. So you can click the Resolution dropdown and enter Other. For 200% this would be 144, and for 300% this would be 216. Basically 72 x 2, or 72 x 3 since you are scaling up from 72dpi. Hope that helps!

  20. 52

    Hi Murdoch,

    I thought your article was awesome. It’s interesting reading other peoples ideas & solutions in the comments also.

    The one thing I’m really stuck on is your scale factor equation…
    scale factor = DP x (DPI / 160)

    Wouldn’t it just be:
    scale factor = DPI / 160


    scale factor = pixel / (DP x (DPI / 160)


    scale factor = original pixels / DP

    I know you said not stress about the equations but I’m just trying to put this in a neat little box for myself and am wondering if there’s perhaps an instance where the simpler equations might not work.

    • 53

      Murdoch Carpenter

      May 25, 2015 4:42 pm

      Hi Corrine. Thanks for reading. Unfortunately the world of scale factors gets very messy if you include Android. So far on iOS you can neatly stack everything in @1x, @2x and @3x. On Android there is ldpi, mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi! I picked specific examples for this article that worked and explained the concepts. If you want to enter the world of Android density buckets you can read more here


↑ Back to top