How to slice a PSD for use with iPhone & iPad

If you are designer doing iOS interfaces and want to help your developer, these guidelines are for you.

  1. Slice both a regular and retina version.
  2. Retina files are postfixed with “@2x.png” (for “two times”) e.g. “account.png” vs “account@2x.png”
  3. Retina files must be placed in same folder as its non-retina brother
  4. Retina dimensions must be dividable with 2 e.g. 25×13 is not a valid retina dimension but 26×14 is fine
  5. All files should be of type PNG (24bit if necessary)
  6. Background files might be in JPG too (saves on file size)
  7. Use transparency if needed – no background color
  8. All files must be lower-cased
  9. All files must not include any spaces
  10. Separate filenames with dashes if necessary e.g. “black-box.png”
  11. Group files in folders if needed e.g. “icons/account.png”, “backgrounds/washed.png”
  12. Keep folder structure after delivery to developer and update files in that structure if needed
  13. Animations must be postfixed with a number e.g. “anim_0.png”, “anim_1.png”, “anim2.png”, etc. (retina would be “anim_0@2x.png”, “anim_1@2x.png”, etc)
  14. Inform developer of any special masking necessary
  15. Slice each image with zero margin/padding i.e. keep to size of image

An additional tip for Mac users. Download Slicy from macrabbit. It’s an incredible cool tool which slices your PSDs automatically based on your layer naming.

Let me know in the comments if you have more suggestions I need to put on the list.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.