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.
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 It on Smashing Magazine.
Retinize It uses Photoshop actions and retina.js 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.
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 established 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 Web” 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 Display,” as does Niklaus Gerber in his article “Designing for the iPhone 4.”
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
- Retinize It website includes FAQ and additional information.
- Download (ZIP, 4 KB)
Additional Tools
PNG EXPRESS (MAC & Windows, $ 29)
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 Express 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)
ImageOptim 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 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.