Menu Search
Jump to the content X X
Smashing Conf Barcelona

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 Barcelona, dedicated to smart front-end techniques and design patterns.

Retinize It: Free Photoshop Action For Slicing Graphics For HD Screens

High-definition (or “Retina”) displays have spread wider and wider, and evidently their numbers will keep growing. So, as creators of products that will be consumed on Retina devices, we have to optimize our design and development workflow accordingly.

Slicing graphics from finished designs to use for development is one of the less enjoyable parts of building a website or app. And it takes a long time. Because slicing is a monotonous and straightforward task, using the right tool and workflow can save you hours or even days of work.


Preparing graphics for development mostly entails saving user-interface elements from the final mockups, with transparent backgrounds. And to support Retina displays, we also need to create double-sized versions of elements.

Further Reading on SmashingMag:

Upon failing to find a tool that fits my design team’s workflow, I created a set of two time-saving Photoshop actions for slicing graphics for Retina and standard displays. The great feedback from my team inspired me to share it with other designers. The tool has gotten good buzz in the Web design and front-end development community, so today I’m happy to introduce Retinize It146 on Smashing Magazine.

Retinize It website7
Retinize It uses Photoshop actions and retina.js8 to optimize for Retina displays.

How It Works Link

Select one layer, several layers or a group of layers, and run the action. Once you’ve activated it, you just need to name the files and set the directory to save them to.

Retinize It9

In the background, Retinize It copies the selected layers to a new file, makes the background transparent and trims the space around the element. Once that’s done, the action asks what you want to name the file, saves it, scales the original element by 200%, and saves that as a separate file. After this process, you’ll be returned to the original file.

How Much Of The Slicing Process The Action Saves Link

Almost all of it. The only thing you have to do is choose the directory and name the files. Remember to add a high-resolution modifier, @2x, for the Retina versions of the files. This convention was established10 in Apple’s iOS Developer Library.

If you’re building an iOS application, then you’ll need to provide a background and splash screen in three resolutions: standard (320 × 480 pixels), Retina (640 × 960 pixels) and iPhone 5 (1136 × 640 pixels). The naming convention for the standard and Retina versions is straightforward. For images for the iPhone 5’s screen resolution, Apple recommends adding a -568h@2x suffix, although Apple doesn’t require it.

Apparently, this happens because Xcode does not automatically associate -568h@2x images with the iPhone 5’s resolution; developers may set the suffix manually for this kind of file. I’ve worked with an iOS developer who has asked Apple to add a @5x suffix. So, the best way to determine the naming convention for iPhone 5 images in future is to ask your developer. In other cases, use the -568h@2x suffix.

The techniques presented in the article “Towards A Retina Web11” bring the @2x convention from mobile apps to the Web, helping us to optimize websites for Retina displays very quickly.

Why Scale by 200% and Not 50%? Link

Retinize It is good for those who start designing at non-Retina sizes, which is a better practice for two reasons. First, the non-Retina version of an image will look much closer to the final product, giving you more accurate feedback on how the design will actually look.

Secondly, an element with an odd size value that is scaled by 50% will end up with a x.5 pixel value, making the element blurry. Bjango explains this issue in his article “Designing for Retina Display12,” as does Niklaus Gerber in his article “Designing for the iPhone 413.”

What Kind of Layers Will This Work With? Link

The non-Retina action in this pack will work with any kind of layer. If you’re using the Retina version, then you should work with shapes and smart objects, so that the 200%-scaled file will not look pixelated.

Also, if your layer has an inner or drop shadow, then uncheck “Use Global Light”; otherwise, those effects in the sliced version of the layer will inherit Photoshop’s default angle.

What Does The Set Include? Link

The set includes two Photoshop actions:

  • Slice It
    This action slices a 100%-sized version of an element.
  • Retinize It
    This action saves a 100%-sized version and a 200%-scaled version.

What Makes It Special? Link

  • It’s free to use.
  • Install in one click.
  • You don’t need to change the layer structure in PSD files.
  • You don’t need to name layers.
  • It’s optimized for Retina displays.
  • Run in one click, no setup needed.
  • Windows and Mac support.

Download And Documentation Link

Additional Tools Link

PNG EXPRESS (MAC & Windows, $29) Link

A specification created by PNG Express

If you will be having limited interaction with the developer who will be coding your design and you’re not sure it will be pixel-perfect, PNG Express17 can be a great time-saver. It helps you to create specifications with instructions on element positions, margins, fonts and font sizes.

PNG Express also has an option for slicing images including Retina support.

ImageOptim (Mac Only, Free) Link


ImageOptim19 reduces image sizes while maintaining quality. The tool removes internal data embedded by graphics editors, such as comments and color profiles. I recommend adding an images folder from your website to this app before compiling and going live. ImageOptim will reduce around 30% of an image’s size on average.

Slicy (Mac Only, $29) Link


Slicy21 is great-designed tool most designers and developers are using for slicing graphics for iOS apps. The tool exports graphics from PSDs automatically, but it requires to organize your layers in Photoshop and name them in certain way. In addition once you make changes in Photoshop, Slicy updates the slices automatically. The main reason I decided not to use Slicy is no ability for quick export for couple of elements from PSD without preparing it for Slicy.


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

↑ Back to top Tweet itShare on Facebook

Artiom Dashinsky is a young UI/UX designer based in Tel Aviv, Israel. He leads a design team in Israeli start-up Tvinci and works with several start-ups including InVision . Visit Artiom's website and follow him on Twitter.

  1. 1

    This looks like an amazing feature. Although slicing isn’t my favorite thing (trying to avoid it all together), this might come in handy.

  2. 2

    steve stevens

    July 9, 2013 12:33 pm

    This sounds like a great action I’ve tried it and it’s very helpful and productive indeed. My only question is does everything have to be set to high res and made into a smart object in order to retain the quality? This is probably more apparent with rastorized images.

    • 3

      Artiom Dashinsky

      July 9, 2013 8:08 pm

      I recommend to design your UI with shapes and vector elements in advance.

  3. 4

    Jayanti Solanki

    July 9, 2013 12:39 pm

    Great article, thanks for laying everything out so clearly.

  4. 5

    Lauri Kieksi

    July 9, 2013 1:19 pm

    I realize this was made to accommodate a workflow, but for other kinds of workflows, this might not be so useful — let’s say you need assets for Retina that are visually distinct from the low DPI version, in other words added detail that’s not there in the normal graphic, or a slightly different composition or pixel alignment. Upscaling might also not be so hot if you have to work with raster images. That said, for vector shapes where pixel doubling is sufficient, this looks like a pretty awesome tool.

  5. 6

    iPhone 5 is 640 pixels wide, not 960

  6. 8

    Manish Salunke

    July 9, 2013 4:29 pm

    Good One

  7. 9

    Philip Hastings

    July 9, 2013 5:42 pm

    I just use an interpolation script. Works great and there’s no need for saving multiple images.

  8. 11

    Ethan Hackett

    July 9, 2013 7:48 pm

    I totally love slicy! It comes in especially handy when you’re working with photoshop designs. Pumping our retina images saves so much time. Also when you’re working on say an icon that needs 10 different colors you make them in folders and outputting them is super easy and if it’s vector making a size change saves loads of time.

    Also check out Its an interesting concept where you upload the image in it’s higher resolution formatting and then based on the url you request for the image imgix resizes it caches it for future use and then sends the size you requested.

  9. 12

    nice tool!

  10. 13

    Rendi radiandi

    July 10, 2013 8:19 am


  11. 14

    Sounds good… Thanks for sharing…

  12. 15

    Great resource, I just found out about Slicy though and I’m using it on every project … Slicy works with naming your layers or folders. And if you use @2x in the naming it will make a retina version for you.

  13. 16


    July 10, 2013 2:42 pm

    Interesting Nice concept !! You made it handy. Thanks for sharing !!

  14. 17

    A much better alternative to this would be “”

    • 18

      Artiom Dashinsky

      July 10, 2013 11:13 pm

      Cut&Slice is great too, but it feels much more heavy, I like Retinize It because it’s very simple and straightforward without too much features.

  15. 19

    Will this work in Fireworks CS6?

    I work at building sites in Fireworks (much easier that PS) and am wondering.

  16. 20

    This would work great on vector images, but for raster type of images (personally, that is what I’m dealing with mostly) scaling up 200% is not going to render a beautiful result.

    I’d rather work with even dimensions for the initial canvas and when finished scale down to 50% to preserve the crispness and details as much as possible in the regular versions of the images.

    But otherwise, your ATN is a big time-saver for designers, I guess.

    • 21

      Artiom Dashinsky

      July 12, 2013 3:16 pm

      Hey Steve, what kind of files you are dealing with?

      • 22

        Travis Lee Wiggins

        July 15, 2013 5:40 pm

        I agree with Steve.

        This action doesn’t make a lot of sense from an image optimization standpoint. You’re basically just doubling the pixel resolution and not taking advantage of a retina device’s pixel density, which the point was to have tighter pixels to make an image sharper and closer to our own vision – not just scale up a 100% image 2x so that developers can use it. You’re going to get half the pixel resolution that you could otherwise have on most retina devices.

        A better tactic is to always design at 2x and make sure your image can mathematically scale down properly. If you are also an Android designer there is also hdpi (which is 1.5). A general rule we have found is if the dimension is divisible by 4 it will scale from 200% to 150% and 100% properly and you’ll always be having the optimal pixel density possible for that image in the various image sizes required. When designing for iPhone you should start out at 640×1136 to make sure you have the tightest pixel density possible.

        • 23

          Artiom Dashinsky

          July 21, 2013 12:20 am

          Scaling elements which were originally created in 320×480 by 200% is actually preparing them for Retina display.

          “A better tactic is to always design at 2x and make sure your image can mathematically scale down properly.”
          It means that you’ll have to check that every element you create has an even height/width value. It doesn’t sound like too much fun :(

  17. 24

    I create my icons on illustrator. I can bring them to photoshop and paste them on different layers as smart objects. Then export them using your action. Does that sound like a good idea?

  18. 26

    Seriously awesome action. Seems like the most important thing is to plan for it in advance by thoughtfully creating layers and using vectors and live type.

    Thanks for sharing! I’ll definitely be putting this to good use.

    • 27

      Artiom Dashinsky

      July 21, 2013 12:10 am

      I recommend to use vector elements and live type in your designs even if you’ll not use Retinize It :)

  19. 28

    I agree with Ethan about because of it’s higher resolution formatting..but thanks also, Artiom, for the great info you have passed on to us here!

  20. 29

    Wow! Your a blessing. I just tried it and looks like really effective just the way I am looking for. Thank you so much!

  21. 30

    Samuel Soler

    July 9, 2015 10:26 pm

    I like actions for photoshop.

    Here I saw more actions for photoshop:


↑ Back to top