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

Advertisement

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.

retinize-it-action1

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.

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 It102 on Smashing Magazine.

Retinize It website3
Retinize It uses Photoshop actions and retina.js4 to optimize for Retina displays.

How It Works

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 It5

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

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 established6 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 Web7” 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%?

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 Display8,” as does Niklaus Gerber in his article “Designing for the iPhone 49.”

What Kind of Layers Will This Work With?

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?

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?

  • 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

Additional Tools

PNG EXPRESS (MAC & Windows, $29)

png-express12
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 Express13 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)

imageoptim14

ImageOptim15 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)

slicy_mini16

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

(al)

Footnotes

  1. 1 http://www.smashingmagazine.com/wp-content/uploads/2013/07/retinize-it-action_mini.png
  2. 2 http://retinize.it
  3. 3 http://retinize.it/
  4. 4 http://retinajs.com
  5. 5 http://www.smashingmagazine.com/wp-content/uploads/2013/07/steps1_mini.jpg
  6. 6 http://developer.apple.com/library/ios/#documentation/2DDrawing/Conceptual/DrawingPrintingiOS/SupportingHiResScreensInViews/SupportingHiResScreensInViews.html#//apple_ref/doc/uid/TP40010156-CH15-SW1
  7. 7 http://www.smashingmagazine.com/2012/08/20/towards-retina-web/
  8. 8 http://bjango.com/articles/designingforretina2/
  9. 9 http://niklausgerber.com/blog/designing-for-iphone4/
  10. 10 http://retinize.it
  11. 11 http://retinize.it/RetinizeIt.atn.zip
  12. 12 http://www.pngexpress.com
  13. 13 http://www.pngexpress.com
  14. 14 http://imageoptim.com
  15. 15 http://imageoptim.com
  16. 16 http://macrabbit.com/slicy/
  17. 17 http://macrabbit.com/slicy/

↑ Back to topShare on Twitter

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.

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

    0
  2. 2

    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.

    1
  3. 4

    Jayanti Solanki

    July 9, 2013 12:39 pm

    Great article, thanks for laying everything out so clearly.

    0
  4. 5

    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.

    0
  5. 6

    iPhone 5 is 640 pixels wide, not 960

    1
  6. 8

    Manish Salunke

    July 9, 2013 4:29 pm

    Good One

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

    0
  8. 11

    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 http://www.imgix.com. 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.

    0
  9. 12
  10. 13

    great!

    0
  11. 14

    Sounds good… Thanks for sharing…

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

    0
  13. 16

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

    0
  14. 17

    A much better alternative to this would be “http://www.cutandslice.me/”

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

      -1
  15. 19

    Will this work in Fireworks CS6?

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

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

    0
    • 21

      Artiom Dashinsky

      July 12, 2013 3:16 pm

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

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

        -1
        • 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 :(

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

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

    0
    • 27

      Artiom Dashinsky

      July 21, 2013 12:10 am

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

      0
  19. 28

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

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top