How to slice images as PNG for iOS app in Photoshop


I have a finished design for my iOS app, but the developers don't use PS and asked me to provide all the UI elements as PNGs for retina and standard. The designer who originally created the design in PS stated that he doesn't do slicing.

  1. Is there a way to do this automatically? If not which is the best method to do it?
  2. Isn't it usual that the designer provides this per request?

Thanks in advance

6/18/2013 12:42:00 PM

There is a semi-automatic way to slice images, that is using the Slice Tool.

You can use it to subdivide your file into blocks of icons:

Sliced PSD

When you use File → Save For Web & Devices... Photoshop will export each slice as a separate image for you:

Sliced Images

This is a non-destructive method, so you can still make changes to the icons if needed and still use the same slices. There are a couple ways you could resize all the icons for retina/standard: either resize the whole image prior to saving or you could batch resize them all after they are already saved.

Whether or not your designer will slice up your images for you depends on the agreement you have in place with your designer. If it wasn't part of the contract, they aren't obligated to do so. I'm sure they'll be happy to do it for a fee :)

6/18/2013 1:12:00 PM