Quickly creating non-retina graphics for the iPhone

Posted: December 6, 2010 in Computing, iPhone

The down-side to the iPhone 4’s retina display is that developers need to now create two sets of graphics for their apps. For apps to take advantage of the higher resolution iPhone 4 screen, they need to create double-sized graphics saved with an “@2x” at the end of the name.

Moving forward, creating those double-sized graphics aren’t really a big deal. The standard workflow (for me) has usually been to create all of my graphics at 2x, then open the exported graphics and scale them down to the 1x size. Not really a lot of work, but using Photoshop for this is a little overkill, and to be honest, Photoshop’s actions and replication skills tend to leave a lot to be desired. Luckily in about 3 minutes you can build your own app that will do the job quickly and easily.

Enter Automator. If you’re unfamiliar with Automator, it is the wizard-like editor for Applescript (Apple’s scripting system). This allows you to chain together commands to accomplish tasks. We’re going to have Automator do four things for us:

  1. Filter items dropped on our application to remove items that we don’t want to scale
  2. Duplicate the items that match our requirements
  3. Rename the duplicate to meet our requirements
  4. Scale the image to 50% of the original

It’s probably better just to show the final automator action then try to explain it all…

So you can see in step one, we are filtering on the @2x, which will only allow graphics that we’ve created for retina to pass through to the next step.

The next step just duplicates each of those items.

The third step removes the text “@2x copy”. This is because when the finder duplicates a file like “icon@2x.png” it renames it to “icon@2x copy.png”, we want our destination filename to be “icon.png”.

The last step uses the Preview app to scale the image file down 50% and saves it.

We could add some additional functionality to this script including folder processing and more, but the fact is this app is going to work really well for those times when you want to quickly create standard resolution images from retina graphics. I put my app in the utilities folder, but dropped a link to it in my finder side-bar so I can drag and drop from anywhere.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s