As a mobile developer preparing all of you images for your app can be very time consuming. Since the launch of the iPhone 4 with its retina display I have been using Unretina, an app available in the App store to take my retina images and scale them down for older iPhones. However, the current version of Unretina has a bug that makes converting large batches of files problematic. Instead I use Photoshop and a custom action to down-size all of my retina images. It is quite straight forward here are the steps,

  1.  Lunch Photoshop.
  2. Open the Actions Panel. This can be found on the floating tool bar, and looks like a play button on a square box. If you can’t find this you can open the panel via Window->Action
  3. (Optional) Create a new set. This is done by clicking the folder icon at the bottom of the action panel. Then select the folder
  4. Create a new action by clicking the note icon next to the folder icon.
  5. Name your action something sensible like unretina and click record
  6. Open a file. It doesn’t matter which file or where it is you will select where your files are to be taken from when you start processing your image batch.
  7. Select Image->Image Size
  8. Important change your units from pixels to percentage and change width and height to 50%. Hit OK.
  9. Save the file. Again it does not matter where this will be dealt with when we select the batch of images we are processing.
  10. Close the file.
  11. Hit the stop button at the bottom of the Action panel near the folder and note icons you used previously.

You will now have successfully created your action script. In the future you will be able to use this without the need to follow these steps again.

To apply this new action to a batch of images you must got to File->Automate->Batch in the windows that opens choose a folder where your retina images live and select a folder where your newly created images will be saved to. Finally construct the format that you want the new filenames to take and click OK. You should see all of the files in the selected folder open be resized and closed one after the other with the result being saved in the chosen destination and you are done.

Just incase you create the wrong filename format or have any other need to change a large batch of file names here is a useful little command to be used at the terminal,

for file in *\@2x.png; do mv "$file" "${file%\@2x.png}.png"; done

this particular example renames all files ending in @2x.png with .png. This is particularly useful if you have a bunch of retina images that you resize but still have the @2x in the name.

Another useful terminal command is,

for file in *; do mv -v $file ${file#[0-9]*_}; done

this removes all of the leading numbers that are generated by exporting all the layers to file in photoshop. In my opinion this is better than editing the photoshop scripts, and stoping them from putting in the number.