Cutting reusable images on iOS

Guides | Tutorial By 4 years ago

I mention iOS in the title, but this really applies to most platforms.

Often I find apps where the developers have cut the exact images they need for buttons and other graphics, sometimes with the text on the buttons as well.

Something like this

This is no good:

  1. The images are cut to the exact size for each instance. This is a lot of wasted space in the app’s bundle, and means a different image for each size.
  2. If your client ever wants to change the text on a button, somebody needs to go in and recut another button
  3. If you ever want to localize your app so it works in other languages, you are going to need to cut  a lot of images…
  4. Any sub images in the image are directly in the button, meaning they can’t be reused for other areas where they don’t need the button or text around it (the location pin in the above example)
  5. Using a single image, the down state is usually the same image just darker, which doesn’t look that great. If you look at the down states on properly built apps, you will see that it usually has a completely different image, and a different text colour or shadow direction. I’ve actually seen people cut two images, both with text and their down states.

It may seem obvious, but I see the time and time again.

The solution

I always draw things in code when I can, it provides the most flexibility. The button background above would actually be extremely easy to draw in straight code. This is not an option when images start becoming super complicated. I’m going to explain how to make the button above flexible just using images (no code for this one, sorry)

  1. Follow the layers. Your designer probably composed the image using different layers. The one above was done using three. One for the background, one for the text and one for the pin. This is exactly how it needs to be. Sometimes it wont be that simple, so you will need to use your best judgement to figure out what needs to be cut.
  2. Use 9 patches. If you look at the background image above from step one, the center is all a single colour. It looks like a waste right? Well it is, and we can get rid of a lot. The less round your corners, the more you will save. 9 patch means that your image is separated into 9 sections, the 4 corners, 4 sides and the middle. Because the middle sides are the exact same horizontally and vertically they can just be stretched out, and the same with the middle, with no quality loss. Using the below image I could scale it up to infinity, all using that one image.
    On iOS you can make a UIImage resizable using resizableImageWithCapInsets and passing in your left, right, top and bottom insets (25 for all in my example).
  3. Use a label and set the text in-code. As mentioned above, if the text changes because of the wording, or because you need to make an app multilingual, your images remain the same and don’t need to be recut.