Retinize It Action

Scaling images for retina displays and saving multiple copies can be a pain and a giant time consumer. The Photoshop action Retinize It makes life much easier in this process.

This action takes the image that you are working with in the non-retina PSD format, and then it scales your object by 200 percent. Installing this action is the same as you would normally do. If you aren’t sure how to do that, then view this video. This one-click process takes the manual workflow out of the picture, and brings a work smarter approach to the retina image issue.

The process for making this happen is fairly straight forward and makes a lot of sense as you get into it. The first thing that you want to do is select the layers that you want to export as an image. Then you want to run the action. After doing this you will be presented with the “Save for Web” dialog box in Photoshop. In here you can select the format you want to export it in (.jpg, .gif, .png, etc…), as well as the quality you want to save it at. In this step be conscious of the file weight, this will help down the road with page loading times. Then once you have saved this image, the action will run again and scale the image up to the retina size. You then will be given the same saving options. But, when you save be sure to title this file something different. I would suggest using the same file name as your non retina size image, and then adding”_2x” after the name before the file extension. After your retina size Photoshop action has ran you are done. Then all you need to do is re-run this action for every item you want to save out for retina display resolution.

A big thank you goes to, Artiom Dashinsky, for making a lot of developers and designers lives better.

If you are interested in seeing how to determine when to show a retina display sized image check out this page: http://css-tricks.com/snippets/css/retina-display-media-query/.

0 Comments
Be the first to leave a reply!

Leave a Comment

* required