Design

“Retinize It” Simplifies the Creation of Retina-Ready Images in Photoshop

May 7th, 2013

Creating retina-ready images from within Photoshop is no rocket-science. Still, it is a tedious task no designer is likely to associate the term fun with. Help in shortening the amount of life-time that has to be put therein will be much appreciated. Artiom Dashinsky from Tel-Aviv is the one to be thankful for as he developed the freely usable Photoshop action Retinize It.

retinize-it

Retina at 200%: Scale It Up, Baby

“Retinize It” is a set of two Photoshop actions. One does simply slice a selected layer or group into a single image, then opens the dialog for saving for web. The second one does the same, then scales the sliced area up 200 percent and reopens “Save for Web”. You have to take care for proper naming and proper saving to proper directories. Remember, Apple’s convention for Retina is filename@2x.format (e.g. buddha@2x.png).

retinizeit-atn-deflated
Downloaded and Deflated: Now Drop it into the Actions Window of your Photoshop

The actions work on layers and groups. As the retinizing does a simple upscaling you should make sure, your image relies on shapes or is created as a smart object. Otherwise you might be surprised to end up pixelated and not retinized…

retinizeit-photoshop
Select Layer, Select Retinize It, Select Play. Go…

Dashinsky created the actions specifically to retinize UI elements without having to rework the necessary steps manually. Used as intended, the action will save you a decent amount of time. As it is free to use, I don’t see any obstacles in at least giving it a try.

If you need to revamp or initially gain knowledge on designing for Retina, you will definitely like the articles, Dashinsky aggregated on the product’s website.

Related Links

  • The best Photoshop actions for preparing designs for iOS or optimized for Retina-display websites | Retinize It
  • Artiom Dashinsky tweeting | Twitter.com

Dieter Petereit is a veteran of the web with over 25 years of experience in the world of IT. As soon as Netscape became available he started to do what already at that time was called web design and has carried on ever since. Almost a decade ago he started writing for several online publications, some well, some lesser known. Dieter is a heavy G-Plusser, so why not meet him over there?

Tags: ,

5 comments for „“Retinize It” Simplifies the Creation of Retina-Ready Images in Photoshop
  1. busyPixels on May 7th, 2013 at 9:43 pm

    I suppose this would only work on vectors? For rasterized images it seems like it would just create a large pixelated version of the first image. Wouldn’t you need to start with a 2x image and scale down for non-retina?

    • Dieter Petereit on May 8th, 2013 at 9:48 am

      This is just what is written. However, scaling down pixel-based images is not that much better than scaling them up.

  2. Tim on May 8th, 2013 at 4:49 pm

    Slicy FTW. http://macrabbit.com/slicy/
    You will never look back.

  3. Creatifox on May 11th, 2013 at 5:50 pm

    Yep, another Slicy supporter here… does the job right for me.

  4. Paul on May 15th, 2013 at 12:01 pm

    Just use Sketch! And not silly photoshop.