Using Automator to pimp your iOS asset preparation workflow

Preparing assets for the iPhone 4 can be a tricky business when you need to ensure you've created the retina display assets as well as the standard resolution.

For anybody that doesn't know what I mean; the iPhone 4 has a retina display which is basically (and conveniently) twice the resolution of the older iPhone screens.

When developing an app for the retina display all the developer has to do to cater for these two resolutions is to ensure that there is a copy of every asset produced at twice the size in pixels with the filename appended with '@2x' (I remember this by thinking of it as 'AT TWO TIMES').

When you are working with your raw graphic files in the design process it is obviously better to work at the higher resolution. This can start to get a bit fiddly when you have to save out the two versions. You can forget to scale down, lose track of files, forget the naming convention etc.

For this reason I have created services in Automator on the mac to streamline the process. Automator is a cool and rarely used tool that has been shipped with the Mac OSX install for some years now. You'll find it in your Applications folder and it has a cool looking robot as its icon.

Now before we start there are many ways to prepare your assets depending on which software you have used to create them. Many designers use Photoshop to create their UI and good designers use Layer comps to create different states and screens. Button rollover states for example. This saves you having to turn layers on and off to try and re-create these effects ... which can soon end in disaster. I personally prefer Fireworks for UI as it allows you to create multiple states and sequences on an object context instead of across the entire document which is how Photoshop works with layer comps. The technicalities of stripping out particular layers and objects from a document in preparation for creating cropped web assets are the subject of another post but if using Photoshop I would create a PSD for every UI object and use layer comps for states on that object.

Once you have a PSD with different layer comps created for states then you can use a Photoshop script called 'layer comps to files' to output your large assets as PNG files in the folder of your choice. The only downfall with this approach is that your files are automatically named based on your layer comp title. This is where Automator service scripts become handy. And the first script you'll need is one to add the '@2x' string to your assets filename.

When you open Automator it will ask you which type of template you'd like to create. We want to create a Service that you can access from the Finder menu as this is how we will rename a bunch of files.

When the app opens you have to tell the service what types of files it will accept and from where. We want any files in the finder as input for this service so in the top-right choose 'files and folders' and 'finder' as the target.

Now from the list on the left choose 'files and Folders' and drag the 'Rename Finder items' macro over to the right. A dialog will open asking you if you wish to make a copy of the items you are processing. This is a good idea in case of a problem. Choose 'add' and continue.

This will automatically add the 'copy files' macro and you can choose where it will make the copies. The desktop is fine. You also have the option of how you wish to rename your files. You want to 'Add Text' and enter '@2x' to append this after the filename'

Now save this service and try it out. Select some files in the Finder and then from the Finder/Services menu you should see your newly created service ready to process the files. It will save them to your desktop and you can then move them back to your source folder and delete the originals.

This is great right? But now you need to process these retina display files to create the assets required for older phones. Time for another Automator service.

Open Automator again and choose 'image files' as the items the service will receive from the Finder and choose the 'photos' option on the left and drag the 'scale images' macro over to the right. You'll get the same dialog open up asking you if you want to make a copy. Do so. Now choose 'By percentage' and 50% will suffice to create your new assets.

You'll be using the retina display images as the source for this Service so you'll want to strip out the '@2x' string from the filename. To do this you need to drag the 'rename Finder items' macro over to the right again and replace the string '@2x' with nothing to strip it out.

Save this service and take it for a spin. Select all your retina display images in the finder and then select the service from the Finder/Services menu. You'll soon see a new bunch of new images on your desktop without the '@2x' in the filename and at half the pixel size.

There's so much more you can do with Automator and as mentioned earlier there are also a bunch of tricks you can use for getting assets out of Photoshop and Fireworks which I will post about very soon.

If you are lazy you can download the services I created by clicking here. Install them into your Library/Services folder.