Menu Search
Jump to the content X X
Smashing Conf Barcelona 2016

We use ad-blockers as well, you know. 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. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Ready For Retina HD: Create Pixel-Perfect Assets For Multiple Scale Factors

The 6 Plus is the first iPhone that sports a “Retina HD” display — the sharpest display Apple has ever made. It forces designers to provide an additional set of image resources to developers to match that sharpness.

We needed only one set of assets for the original iPhone up to iPhone 3GS. And when iPhone 4 came out with the Retina display, we also needed 2x assets — images twice as detailed. Now, with the display of the 6 Plus being even more detailed than that of the iPhone 4, we will also need to provide 3x assets. The numbers 1x, 2x and 3x are also called “scale factors.”

Of course, Android developers have always had to deal with many different sets of assets. Still, designers are finding themselves questioning their production workflow. In this article, we’ll focus on iOS, but you could easily extend this approach to Android and the web. We won’t try to provide a silver bullet, and perhaps other ways might seem easier at first, but this article lays out a solid workflow that scales up for big projects.

First off, your icon sets should be vector-based. The approach described in this article focuses on generating multiple asset versions from a single vector shape in a Photoshop document that contains all of your icons.

A unified icon document has the advantage of keeping everything together in one file, allowing you to see how well your icons and assets harmonize.

If you’re designing for iOS 7 and above, then you might think that 1x versions aren’t needed anymore. However, you’ll still need them for devices such as the original iPad Mini, the iPad 2 and potentially Android and the web.

Set Up Photoshop Link

First, I’ll show you how I set up Photoshop. If you know what you’re doing, you can use other settings. But for those curious about how I like to work, this is it:

  1. Disable eye candy like “Animated Zoom” and “Flick Panning.”
  2. Disable “Snap Vector Tools and Transforms to Pixel Grid.”

The first point is a matter of personal taste, but not following the second point can get in your way when you’re trying to be precise with the Direct Selection tool.

These selections will help you working precise with the Direct Selection tool.1
These selections will help you working precise with the Direct Selection tool. (View large version2)

Then, I’ll configure the Move tool (V) to select layers. You don’t need to check “Auto-Select” because you can select a layer automatically by pressing the Command key while clicking. Disabling this option protects you from moving layers unintentionally.

Configure the Move tool (V) to select layers.3
Configure the Move tool (V) to select layers. (View large version4)

Feel Free Link

First and foremost, I believe that design and production are two separate phases. When your creativity is flowing, you shouldn’t worry much about production constraints.

Design at your favorite resolution (perhaps 2x), and lay out using the dimensions of a device you’re familiar with. But definitely use a real device, and use apps like Skala Preview and xScope to mirror the design live on your device. You should not be working with apps unless you are constantly checking the design on a real device.

Tidy Up Those Vectors Link

As noted, I’ll assume that you’re designing your icons in Illustrator. Before copying them to Photoshop, you’ll need to tidy them up. Use Pathfinder to add and subtract paths until you have a single shape.

If you design your icons in Illustrator, you need to tidy them up before copying them to Photoshop.5
If you design your icons in Illustrator, you need to tidy them up before copying them to Photoshop. (View large version6)

On the left above is a complex icon made up of multiple shapes, including a white shape to simulate transparency. For the icon on the right, I subtracted the white rectangle from the black one behind it. Do this by selecting the two rectangles and pressing the “Minus Front” button in the Pathfinder panel. Then, select all shapes and click “Unite” to combine them into one.

Now, copy the path to Photoshop, and paste it as a shape layer.

Paste your path as a shape layer.
Paste your path as a shape layer.

If your shape ends up a mess, that means you didn’t tidy the vector graphic properly.

Align Forces Link

When you paste the icon in Photoshop, it might look something like this:

When you paste the icon in Photoshop you will probably see those gray pixels around the shape.7
When you paste the icon in Photoshop you will probably see those gray pixels around the shape. (View large version8)

When you zoom in close on the icon, you will probably see those gray pixels around the shape. Those “partial pixels” occur if a shape does not fill an entire pixel. We don’t want any of those.

We want to start working from a 1x version of the icon because, when tidied up properly, you will be able to scale this version up to 2x and 3x without any problems. If you did the original design in 2x, then you’ll need to scale the shape down to 50%.

Now it’s time to align the horizontal and vertical lines to the next full pixel. It’s OK if curves and diagonal lines don’t fill up entire pixels.

Use Photoshop’s Direct Selection tool to mark a group of misaligned anchor points, and use the arrow keys to move these points between two pixels.

Note: The closer you are zoomed in (use Option + Shift + mouse wheel), the more precisely you will be able to move the anchor points.

The anchor points of the bottom and the right side are now aligned to the pixel grid
The anchor points of the bottom and the right side are now aligned to the pixel grid.
All partial pixels are gone.
All partial pixels are gone.

Do A Check-Up Link

Now, make sure all anchor points are on the grid by scaling your 1x version up to 500%. If you see partial pixels, then align them as described above. If everything checks out, then scale the shape down to 20%.

Remember: From now on, you should always scale proportionally from the upper-left corner, and always make sure that the X and Y values are round numbers.

If you see partial pixels, then align them as described above.9
If you see partial pixels, then align them as described above. (View large version10)

Scale It Link

Let’s see how different resolutions of our icon work out. Select the 1x version (V, then Command + mouse click), and duplicate the icon (Option + click and drag) to a position next to the 1x version.

Scale the duplicated icon up to 200% proportionally from the upper-left corner. The 2x version should show no new partial pixels. It should only be bigger.

To keep things simple, we will assume you are happy with the 1x and 2x versions and that you now want to see the 3x one.

Duplicate the 2x version (Option + click and drag), move it off to the side, and then scale it up by 150%. (So, 200% × 150% = 300%)

Later in this article, I’ll tell you what to do if you are not happy with the results. But if you are happy with the 2x and 3x versions, then you know now that 2x and 3x versions can be generated from the 1x version without any problems.

Go ahead and delete the 2x and 3x versions — we will be generating them automatically.

Generate And Enjoy Link

Photoshop has a built-in tool called “Generator” that automatically renders a shape layer to multiple image versions. To do that, we have to create a layer group and give it a special name: the file name and scale factor for each version.

In this case, it should look like this: cover.png, 200% cover@2x.png, 300% cover@3x.png

The commas separate the versions, and the percentage tells Photoshop the amount of scaling.

The commas separate the versions, and the percentage tells Photoshop the amount of scaling.11
The commas separate the versions, and the percentage tells Photoshop the amount of scaling. (View large version12)

Now, activate Generator.

Activate Generator.13
Activate Generator. (View large version14)

Generator will create a folder next to your PSD file and will automatically save PNG files to it when you save the Photoshop document.

Generator will automatically save PNG files when you save the Photoshop document.15
Generator will automatically save PNG files when you save the Photoshop document. (View large version16)

To add a new scale factor at a later point in time, you simply have to alter the layer’s file name.

Get Creative For Different Resolutions Link

Modifying artwork for different scaling factors is a common practice because you can show more detail in a 2x graphic than you can in a 1x version.

In the following example, the 1x version of the icon contains just a single eighth note, whereas the 2x version contains a beamed note.

Create different icons for different resolutions.17
Create different icons for different resolutions. (View large version18)

Obviously, you wouldn’t delete the 2x version because it is different from the 1x. Create an extra group for the 2x version, and give it a layer name that is compatible with Generator. Because you’ve already scaled the 2x version in Photoshop, don’t add “200%.”

To end up with a 3x version after working in 2x, you’ll have to scale by 150%. So, you would add this number to the 3x file name.

To end up with a 3x version after working in 2x, you’ll have to scale by 150%.19
To end up with a 3x version after working in 2x, you’ll have to scale by 150%. (View large version20)

Size Matters Link

Making the 2x versions of your assets exactly two times larger than the 1x assets is absolutely critical. Sometimes this is harder to do than you think. Consider this keyboard:

Making the 2x versions of your assets is sometimes harder to do than you think.21
Making the 2x versions of your assets is sometimes harder to do than you think. (View large version22)

For the 1x version (the smaller keyboard on the left), I decided that 1-pixel-wide black keys were to thin, so I used 2 pixels.

When you scale that version up (marked in pink in the keyboard on the right), you end up with black keys that are 4 pixels wide, which looks a little too wide.

But with 3-pixel-wide keys, the distance between all of the keys changes. To keep everything symmetrical, we need to make the keyboard 1 pixel shorter. And because we can’t scale 3 pixels by 1.5 without ending up with fuzzy graphics, we also need a special 3x version.

To fix the export size of our 2x asset, we can add a layer mask. Generator will always use the dimensions of a layer mask if one is present.

To fix the export size of our 2x asset, we can add a layer mask.23
To fix the export size of our 2x asset, we can add a layer mask. (View large version24)
Generator will always use the dimensions of a layer mask if one is present.25
Generator will always use the dimensions of a layer mask if one is present. (View large version26)

Summary Link

Hopefully, the methods described here will simplify your workflow. As you can see, creating pixel-perfect assets for different screen sizes and densities isn’t such a chore when you use vector graphics to your advantage and let Photoshop do the grunt work.

Downsides of This Approach Link

  • Assets are stored at 1x in the Photoshop file.

Upsides of This Approach Link

  • Create multiple image assets from a single shape layer, potentially saving yourself a lot of time in the future.
  • Icons are all in one document.
  • Generating assets for other scale factors from your PSD becomes easy for other people.
  • Seeing which resolutions of an icon need special attention becomes easy for other designers.

(ml, al)

Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
SmashingConf Barcelona 2016

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook


Karsten Bruns is passionate about creating all things digital, from DTP to apps. He began writing code at 12 years old and later studied graphic design at HTK Hamburg, Academy for Design. His work on deepblue christmas tunes was an FWA award winner and was featured in Google's Creative Sandbox. He is currently developing iOS apps at grandcentrix.

  1. 1

    The Photoshop Features are damn amazing. The only importance is how to use it. Creative uses can bring out some amazing result of which this can be one. Thank you for the post!

  2. 2

    Or of course you could just use Antetype which can do this with illustrator graphics by Justine ticking the boxes export @2x and export @3x.

    • 3

      Jonathan Ober

      October 15, 2014 3:03 pm

      Very cool app. I will have to test drive the trial version sometime soon on a project.

  3. 4

    If you’re designing in Illustrator, why would you copy them to Photoshop, instead of just exporting them as svg icons?

    No need to make icons ‘retina’ anymore, unless you only have the Photoshop file of course..

    • 5

      iOS supports native SVG assets?

    • 7

      Karsten Bruns

      October 16, 2014 9:55 am

      Sadly for native app development designers cannot use SVG files or icon fonts yet. But at least with Xcode 6 it is possible to use .pdf as vector based file format. So If Adobe adds .pdf export to Generator or “Extract Assets” you could introduce vector-based assets into your workflow for apps.

      But nevertheless, on build time Xcode will render these assets to GPU-optimized PNG files anyway.

      On the other hand you have to consider that vector based file formats are not the solute for more detailed assets on higher scale factors.

      • 8

        Vector data is not always the perfect solution (complicated textures, “organic” images), but for many applications it is the way to completely get rid of the “scaling factor”. Having all assets in SVG (no bitmaps at all) for web development is straightforward, so hopefully it will be the case for apps too.

  4. 9

    Another way to export retina ready images is the Photoshop extension Spriteowl. Especially when you work with sprite images, then you also get css, less, sass, scss and stylus code with the x, y, width and height info of all sprite elements.

  5. 10

    hihihi, I mentioned on twitter, but thought would save my comment here for posterity. I am the Product Manager for a new feature in Photoshop called ‘Extract Assets’. We enable exporting assets from photoshop in an easier manner and is our first step to replace Save for Web. Our intention is to make it easy to generate multiple file formats from a layer or more and to generate multi-resolution versions for each file format. More info here:

    Would love to hear your feedback!

    • 11

      The ‘extract assets’ feature is a nice idea, i think the UI and implementation is quite clumsy.

      Currently there are much better tools than this called Oven (sadly has stopped development) and Devrocket. Devrocket has recently been updated to output all 1,2,3x assets and a 1x pdf.

      Oven would have to be my favourite for simplicity, and it uses the standard generator features to do all the annoying layer naming for you with a press of a button.

      If ‘extract assets’ gets anywhere near Oven for ease and simplicity, I might try it again.

  6. 12

    The iPhone 6 and other large smartphones are completely changing the game for responsive web design.
    Scott V.
    Integraphix – New York City Web Design

    • 13

      Why do you think so? If you have reasonable media queries, use SVG’s and grids like SUSY & SASS, there isn’t anything what to change.

      Each day I develop web sites for anything from small form factor to phablets through tablets and desktops and I can’t see any difference.

      Mobile first, then typical media query breakpoint at 600px (or better, translated to 37em) for tablets and 1024px (68em) for desktops.

      That’s all. iPhone 6 is not going to change that, as internally, it still reports it’s screen as 320px wide.

    • 14

      The very purpose of responsive web design is for the layout of the page to respond to the size of the device, so I don’t see how large smartphones have any impact on RWD.

  7. 15

    Instead of doubleworking in Photoshop to realign the vectors to the pixel grid, you can always work in Illustrator in the final Photoshop size, so that when you paste, you will have near-perfect aligned vectors.

  8. 16

    I know technically modern OS’s it doesn’t matter as much. But it’s bothering me so much to see you put @ signs in your filenames… cover_2x.png would do the same naming convention and be 100% allowed character =P

    Overall though, nice article & some nice tricks/tips with Photoshop pixel perfect alignment & sizes.

    • 17

      He isn’t putting “@” signs in his file names…”@ 800%” is part of the Ps interface (which dynamically scales up and down as the user minimizes and maximizes).

    • 19

      For others reading this that feel the same as Andy about the @. The @ lets Xcode know what size the picture really is. It’s not merely his preference, it’s a required part of developing a native iOS app.

  9. 20

    Koen van Niekerk

    October 15, 2014 9:26 pm

    Photoshop is for “shopping” photos.

    Especially with the recent minimalistic “flat design” assets, there is usually no need to use Photoshop.

    Illustrator very capable of producing pixel-perfect PNG assets in any resolution you want:
    – put illustrator in pixel units and turn on “snap to pixel grid” & “pixel preview”
    – make a sprite sheet with all icons you need in a 1x size, evenly spaced
    – create slices to define the bounding box you need and name them (getting efficient with slices may take some time)
    – use save for web (SFW) to export to PNG (for your 1x set)
    – double the export resolution in the SFW dialog and export again (for your 2x set)
    – triple the export resolution in the SFW dialog and export again (for your 3x set)
    – if you create your vectors tidily you end up with a nice set with no need for PS. Saves me a ton of time

    I can share our workflow if you are interested

    • 21

      This sounds more efficient than the article’s method of pasting into Photoshop and then having to clean it up. Please share your workflow with us!

    • 22

      Karsten Bruns

      October 16, 2014 9:45 am

      Hi Koen,

      I think using Illustrator from end to end is a feasible option.

      In an Illustrator-based workflow you would have multiple versions of an icon in your spreadsheet if you decide to create extra artwork for specific scale factors – like in the approach I described. But I think one downside is, that after the exporting to multiple scale factors via STW you would then have to delete the icons you don’t intend to use by hand and append the scale factor to the filename. In this case this information is not stored inside the spread sheet.

      I think this is why Adobe introduced Generator and now Extract Asset. If these tools come to Illustrator I definitely will revisit this workflow.

      Thank for the feedback


      • 23

        Koen van Niekerk

        October 16, 2014 11:06 pm

        Hello Karsten,

        Thanks for your reply. You are definately right about the dwarbacks you mention.

        Ideally I would like to see some of the more intelligent naming features from Photoshop be available in Illustrator too.

        A vector-only workflow (untill you export them) would be the logical way to go, but Illustrator should provide some feautures to streamline this and make it more flexible.

        One of the key things is for Adobe to re-introduce the SVG-option in the save for web dialog. Now I am forced to use artboards to export SVGs where I would like to use Slices.

        (are you listening Adobe?)

    • 24

      Hi Koen,

      I really like your method of design apps in Adobe illustrator. Plz share your workflow with me. I would be very thankful!

  10. 25

    After more than 20 years using Photoshop and Illustrator I’ve recently switched to Sketch 3 which makes creating icons or any size-independent artwork a cinch. You create one size and can automatically export to @2x and @3x without he need to create more artwork or use plugins.

    Check it out at it might surprise you.

    I’m not affiliated with them in any way, I just really like their product.

    • 26

      Exactly, Sketch! It’s getting better with each version and considered a very good alternative to Adobe Fireworks.
      I use Photoshop to edit images, not to create them..

    • 27


      October 16, 2014 3:08 pm

      Exactly what I was thinking Alex. I also switched recently to Sketch for the “pure” Ui design, after I was flabbergasted of its capacity and simplicity.

  11. 28

    Small tip: I have a keyboard short-cut for switching the between pixel-snapping and not (mine is F1/shit-F1, it’s essentially just an actions that plays for both states). Makes moving points to the nearest pixel, if the pasted shapes is a bit off.

  12. 29

    Nice to see some love for Sketch and AI in the comments. I’m a designer and I’m all for trying new apps and workflows whenever possible, but with app design I’m not sure how that fits in, unless you’re doing some of the development too. I’ve just finished supplying PSDs to developers for an app design, it’s a pity designers often feel forced to work in Photoshop and in one workflow because of handover.

    My tool of choice was always AI for web work (and if I was doing the coding), but any time I know I’ll be handing artwork over, I’ll work in Photoshop because I feel I have no choice. I guess at the same time, it would be unfair to expect developers to learn how to use every design package.

  13. 30

    Why not start designing in Illustrator…

  14. 31

    If retina displays are meant to display images at a resolution that our eyes can’t detect, and presumably, your 2x images are being served to those retina displays already, why even bother with a 3x image for higher resolutions. Your 2x images should technically be at a level to which the eye can’t distinguish anymore correct? Am I thinking about this wrong?

  15. 32

    L.chand Shrestha

    October 17, 2014 9:41 am

    Nice article. This is really gonna save time and effort for both designers and developers….
    One thing, I prefer to use “Snap Vectors tools and Transforms to pixel grid” and “Auto Select”. ;-)
    While you are working with “Auto Select” ticked you can move the selected layer by pressing “command” key to prevent selecting other layers. :-)

  16. 33

    This article made me really appreciate

  17. 34

    I change very few icons with progressive reduction of icon detail. I normally design icons at 3x, proportioned by pixel for reduction exponentially (eg.. 4px > 2px > 1px), and background-size the image for the indended size of the icon. For the few I do remove detail from at smaller sizes, I use a media query to detect the pixel density of the device and reserve a new icon accordingly. I’ve been using this method for three years and it hasn’t done me wrong.

  18. 35

    The one “con” mentioned in the article states that you have to have your assets at 1x in your photoshop file. Can’t you just work at 2x and when naming your group layers for generate name one 50%, and one 150%? That way it will scale down your 2x by half then upscale it by 150% to generate the 3x version?

  19. 36

    I work just on Illustrator to make my icons, Pixel Perfect. I think the main point is use the correct grid, and the correct alignment. It helps a lot when you have muliples of 8 and you work with pair and round numbers.
    The just one thing about working with Illustrator is the final export. It’s fine when you have to export just in @1x but if you want @2x you have to work in @2x, each icon in its own artboard, then export on png. Once you have the @2x, you can open the whole lote in photoshop and simply do a resize to the half and use the command “Save layers to individual images” and that’s it. It’s 90% accurate, some icons simply can’t be used just changing its size, as the article states. To those cases, you can easely work each version of the icon in different artboards and export just with one action as well “Export – Use Artboards”

  20. 37

    Some truly good stuff on this website, I like it.


↑ Back to top