Menu Search
Jump to the content X X
Design Systems book

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books such as Design Systems, a book dedicated to creating design systems and pattern libraries? Check the table of contents →

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.

Further Reading on SmashingMag: Link

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-snapping5, 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 Illustrator6, I discovered the world of density-independent pixels (DP). You can read a big long explanation on Android Developers about “Supporting Multiple Screens7,” 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 elsewhere8, 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 scripts9 (ZIP, 4 KB) or view the project on GitHub10.

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 generator11 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 Marvel12. 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 Sketch13. 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 https://www.smashingmagazine.com/2016/03/the-retina-asset-workflow-youve-always-wanted-for-photoshop/
  2. 2 https://www.smashingmagazine.com/2014/10/create-assets-for-multiple-scale-factors/
  3. 3 https://www.smashingmagazine.com/2016/08/photoshop-etiquette-for-responsive-web-design/
  4. 4 https://www.smashingmagazine.com/2013/07/retinize-it-photoshop-action-slicing-graphics-retina/
  5. 5 http://blogs.adobe.com/jkost/2014/04/align-to-pixel-grid-in-photoshop.html
  6. 6 http://murdochcarpenter.com/illustrator-script-export-android-multi-res-pngs/
  7. 7 http://developer.android.com/guide/practices/screens_support.html
  8. 8 http://murdochcarpenter.com/illustrator-script-export-android-multi-res-pngs/
  9. 9 https://github.com/murd/psd-export-document-retina-png/archive/master.zip
  10. 10 https://github.com/murd/psd-export-document-retina-png/
  11. 11 https://helpx.adobe.com/photoshop/using/generate-assets-layers.html
  12. 12 https://marvelapp.com/
  13. 13 http://bohemiancoding.com/sketch/

↑ 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.

    9
    • 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!

      6
      • 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.

        1
  2. 4

    Super helpful: http://retinize.it/
    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.

    0
    • 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.

      4
      • 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?

        9
  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!

    1
    • 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.

      2
  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.

    -2
    • 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.

      5
    • 13

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

      3
  5. 14

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

    9
    • 15

      Murdoch Carpenter

      May 18, 2015 4:54 pm

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

      9
  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…
    https://helpx.adobe.com/photoshop/how-to/extract-psd-assets-browser.html?set=photoshop–whats-new–2014-10

    http://www.adobe.com/uk/products/photoshop/features.html

    3
    • 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.

      2
      • 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:
        http://i.imgur.com/OErkwRc.png

        Generator Dialog:
        http://i.imgur.com/V1M7wbg.png

        Output folder:
        http://i.imgur.com/8C2OjGm.png

        2
      • 19

        Just…
        – 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 ;)

        1
        • 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!

          0
      • 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.

        2
        • 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.

          2
        • 23

          Murdoch Carpenter

          May 25, 2015 4:15 pm

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

          2
  7. 24

    Evil Rabbit

    May 18, 2015 6:16 pm

    Still designing with Photoshop? Try Sketch!

    -12
    • 25

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

      10
  8. 26

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

    0
  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.

    0
    • 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.

      0
  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?

    0
    • 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.

      2
  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.

    5
    • 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.

      1
  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.

    3
    • 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?

      0
    • 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.

      3
      • 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.

        0
  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.

    0
    • 38

      Murdoch Carpenter

      May 19, 2015 7:50 pm

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

      0
    • 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: http://photoshopsecrets.tumblr.com/post/100218629171/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.

      0
      • 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.

        0
  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: http://mydevice.io/devices/

    0
    • 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.

      0
  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.

    0
    • 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.

      0
  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.

    1
    • 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!

      0
      • 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.

        0
  17. 48

    Designstraw

    May 20, 2015 8:00 am

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

    Regards

    2
  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?

    3
  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?…

    0
    • 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!

      0
  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

    OR

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

    OR

    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.

    0
    • 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 http://developer.android.com/guide/practices/screens_support.html.

      0
  21. 54

    I am a web deigner and post like this are very helpful for me to learn new things..thank you so much.

    0
  22. 55

    The best tip in this article is in the end. Start using Sketch. For UI design, I really would not ever start using Photoshop again.

    0
  23. 56

    Peter Mathew

    May 23, 2015 8:08 am

    Expert Clipping is the best solution of image editing services so request a quote now if you have any images need editing. expertclipping.com

    -6
  24. 57

    Henk C. Meerhof

    May 23, 2015 11:36 pm

    Murdoch, I found your article both interesting and worrying. As you state, I want to design as I design. I don’t want to bother with screen resolution anymore. We are entering retina and other high resolution screens (as 4K monitors). In the future resolutions will even go further, but no further than just over the capabilities of our human eyes.

    The use of pixels as units for screens is almost obsolete! Your use of DPI in the first part of the article should also be PPI as DPI relates to print and PPI to screen. The communication industry should change their vocabulary on measurements soon to real measurement (that you can measure with a ruler on the screen) and start using standard conventions about measurement, which is the meter since 1798 and re-confirmed in 1960 as part of the SI-units. So what in the world is keeping developers and producers of screen technology from using the right measurements.

    The other thing is that with resolutions that high, design is getting very easy. Just use vector information to design interfaces and their elements. Now I know that a type in 3,5 mm size will show as 3,5 mm on the screen. Also my button of 6 x 22 mm is exact the size as it prints on paper and can be measured with a ruler!

    The only thing preventing us from working in this matter are people with an interest to do otherwise. I can’t imagine designers are amongst that group.

    The human world is build on real size measurement, it is about time programmers and web developers start using the same.

    0
    • 58

      Murdoch Carpenter

      May 25, 2015 5:14 pm

      Hi Henk C. Meerhof, thank you for your response. Firstly, you are very correct on PPI. It’s hard to escape this when even Google use DPI throughout their documentation. Even the density buckets are named mdpi, hdpi, xhdpi, etc. A hangover from print that is still common terminology in the digital era.

      You describe the measurement of pixels as obsolute and I agree. Android is solving this by it’s virtual pixel called density-independent pixel (DP). iOS solves this by working @1x. Working to DP will continue to be just fine for 4K. Android has already added the xxxhdpi bucket which is 640dpi!

      It’s an interesting concept to go back to working in physical measurements. A return to print in essence. It would require the underlying software to process this as 1080p resolution is very different across a 32″ TV, a smartphone or a laptop.

      As a designer, the best solution for me is the complication pushed away from my workflow so I can be creative!

      0
  25. 59

    Neil McNulty

    May 25, 2015 9:49 am

    Thanks Murdoch Carpenter for sharing such useful tips on how to Design For Retina In Photoshop. Sometimes we need to do“Retina” resolution in Photoshop. The whole task is a bit complicated, but if we can do it successfully we can create a difference in our creativity and work.
    Thanks for sharing such a useful chapter.

    0
  26. 60

    Hi,

    Great article. A question though.

    When designing for Android, do I need to provide assets in 6 different sizes?

    ldpi : 0.75x
    mdpi : 1x
    hdpi : 1.5x
    xhdpi : 2x
    xxhdpi : 3x
    xxxhdpi : 4x

    0
    • 61

      Murdoch Carpenter

      June 7, 2015 6:59 pm

      Yes. Though ldpi is not very common anymore. So you can focus on 1x and up!

      0
  27. 62

    Also, when designing, does it really matter what DPI I set my canvas to in Photoshop? I know using a higher DPI eats up more resources but should I be OK when designing for the iPhone 6+ at 1242×2208 @72 DPI?

    0
    • 63

      Murdoch Carpenter

      June 7, 2015 7:01 pm

      Yes, it matters. Because you will constantly have to multiply and divide by two for all your measurements and margin/padding etc. Save yourself the grief and design @1x. No half pixels, real measurements, the list goes on.

      0
  28. 64

    Dorin Frunzete

    June 3, 2015 1:43 am

    My workflow is different, I use only Photoshop with shapes and smart object for images. I work in x2 and generate assets with PNG Express – this tool is the best for me. Resonator is good because you can see exactly how assets look in all resolution before conversion but take more time to convert. Illustrator is good for designing but Photoshop is better with saving PNG. I don’t use Sketch because I like to work on Windows. For mirroring Ps Play is great and the single one.

    0
    • 65

      Murdoch Carpenter

      June 7, 2015 7:08 pm

      Try @1x. It really does make sense once you’ve changed. Understand the no Sketch on Windows!

      0
  29. 66

    Hi, thanks for your tut.
    What if I use a single image with a 3x size, without creating 2x and 1x versions … and then, with a % of box/div image size I call that only 3x image for a 1x device?
    …and could be my solution ok for all kinds of image formats for the web?
    I base what i said on a Craig Buckler article at sitepoint
    … quoting:
    “3. Use High-Resolution Images When Practical
    Retina has four times more pixels than standard screens. If you have a 400 x 300 image (120,000 pixels), you’d need to use an 800 x 600 alternative (480,000 pixels) to render it well on a high-density display.
    However, the high-resolution file size may not necessarily be four times larger. Every image is different but if it contains solid blocks of color or details which can be omitted, it may be practical to use a 800 x 600 image and scale it in the browser.
    Be pragmatic: if the standard image is 200Kb and the high-resolution version is 250Kb, there is negligible benefit using image replacement techniques. Use the better version throughout.”

    What’s the difference/convenience in using your zip vs Generator?

    Thanks anticipately.

    1
    • 67

      Murdoch Carpenter

      June 7, 2015 7:07 pm

      A 50Kb increase on 3x the pixels for a photo is way off! Maybe if it’s a flat colour PNG or GIF. But if it’s serious imagery the difference will be huge. Even just consider the amount of pixels. @2x is 4x the pixels. @3x is 6x the pixels! This has a big impact on RAM for lower end devices. Which is the reason for serving low-end and high-end imagery.

      Generator is fine. The script in this article is a quick shortcut to get your entire canvas exported for prototyping. Using Generator on the entire document will really slow you down!

      Hope this explains it.

      1
  30. 68

    Very informative article.

    http://retinize.it/

    0
  31. 69

    Maybe you can shed some light, but why does everyone say 1x = 72dpi? When you look at the 1x for android or ios, you get 160 and 163 respectively. Does that make all the fonts you put on the screen around 1/2 the size that the developer would put into the code?

    For example,
    I use 72dpi and make a 12pt font & on the spec it says 12pt.
    When you put that into an app, does that font then become more like 24pt, or does the pt aspect make it still 12 because pt is relative?

    1
    • 70

      Murdoch Carpenter

      June 16, 2015 8:41 pm

      Because @1x or DP units are 1 pixel at 72dpi. It’s a virtual pixel on which everything else is based. When at @2x it’s 2 pixels, when @3x it’s 3 pixels. So when you design a font at 12pt it will always look the same on different devices. For example on a @2x device the font is actually 24pt but since there is twice the PPI it looks like 12pt! This is handled by the browser or device so you don’t have to worry about it. And the developer will also use 12pt so no need to worry there either. Hope this explains it for you.

      0
  32. 71

    Hi, great article! I was wondering about font sizes and padding around objects. Is there an easy tool for speccing those parts of the design? Does it still make sense to measure those at 1x or DP?

    0
  33. 73

    Sketch App is the way to go for interactive design. I promise you…

    1
  34. 74

    I adore photoshop, but really, if you do application, mobile or tablet design do yourself and everyone else a favour and switch to Sketch… Also when working in teams of designers it allows you to start new tasks from custom made templates that can include more style templating than you can accomplish in photoshop, even with using linked template files (which comes with rendering issues anyway.)

    Sketch is the way to go, and adobe knows it…

    0
  35. 75

    I think you can also automate this process using “actions” on Photoshop by recording it once.

    -1
  36. 76

    Hello,

    Great read, thanks for the info.

    I have a question around ppi though. If I’m optimising my design for iPhone 6 plus which has a 401ppi screen, how come you can design @3x and it still looks good? Design assets are only 216ppi when exported @3x, so how does that make sense?

    0
  37. 77

    Murdoch, this a great article and script, thanks for sharing.

    One question, on number 2. of your explanation about how the script works:

    “2. It creates a new folder named retina, where you PSD is saved.”

    When I run the script it creates a PNG in the ‘retina’ folder, but doesn’t create and save a new psd. Should it? Or was that just a typo?

    Also have you managed to update this to work with new Photoshop CC 2015 dartboards? If not, that would be fantastic :-)))

    0
  38. 78

    *artboards :)

    0
  39. 79

    Thanks a lot for your article!
    My approach is the same (ok, without the export automation). I always created the layouts with photoshop in 1x and 72 dpi on a PC, and made icons separately in 2x for retina, and 1x for web. Measurements for webdevs in 1x was always considered ok.

    I just switched to a Mac: Now I have to enlarge my 1x layouts to 200 % to view them correctly, because the monitor itself is 2x. So I wonder, if it is still a good solution to stick with 1x layouts.
    Con: You have to double the values all the time, and divide them again for specs. Performance: double of memory and larger files.
    Pro: Direct reuse of screenshots for inspiration, no separate icon creation necessary.
    So – what do you think?

    0
  40. 80

    Asif Iftekhar

    August 5, 2015 5:03 pm

    I have learned something today, will implement in designing. :) Thanks a lot.

    0
  41. 81

    HI there, great article and great script.

    My only problem is that when I generate a @2x PNG the file size is coming out over 9MB (I’m working on quite a large document). I naively thought I could open your script and replace PNG references for JPG and reduce the quality slightly to generate a more manageable end result.

    However this comes back with an ‘Error 8: Syntax error.
    Line: 11
    -> var extensionName = “_@2x.jpg”;

    Is what I’m trying to do easily achievable? Any help, advice greatly appreciated.

    Andy

    0
  42. 82

    This is a great article!

    There is just one thing I don’t quite understand in working out the Density Pixel from the equation: DP = pixel ÷ (DPI ÷ 160).

    In your examples you state that the Nexus 9 is 320dpi and for the Nexus 5 it is 480 dpi. How do you know that these devices have this dpi?? When I looked for the dpi for these devices elsewhere they come up as different units as shown on this site: http://dpi.lv. On this site the Nexus 9 is 288 dpi and the Nexus 5 is 445dpi.

    Rachel

    0
  43. 83

    Hello you really have a Great Design, I just started my Career with Photo editor Skill, But as my photoshop is expired right now i am using a browser based editor known as http://www.toolpic.com if you can make some tutorial on this it will be great help from your side

    0

↑ Back to top