I’ve been busy working on the graphics for my iPhone application.  I started working on generating icons for my UITabBar and ran into lots of problems.  How do you create these icons?

I started with a grayscale image figuring it looked similar to what I saw in other applications.  I ended up with a gray square when I used. it.  Next I tried to use an image with a palette and a transparent color and that worked a little better.  But I seemed to be limited to on/off, no shades of gray.

The documentation says the image “is typically 30 x 30 points” and “alpha values in the source image are used to create the unselected and select images – opaque values are ignored”.  What does that mean?

I did a little research on PNG images and found that they can have an alpha channel and that the value for this channel could be 8 bits.  So now I needed to take my grayscale image and turn it into an image with an alpha channel.  I tried a couple of simpler image editors but couldn’t find the right combination of operations to make it work.

Then I remembered I had ImageMagick installed on my development machine (since I also do Ruby on Rails and am using the excellent Paperclip plugin).  I found that from the command line I could get ImageMagick to create a mask from my image and then use that mask to add an alpha channel to my image.

Here is what I did:

First, I generate a mask with the following command line:

convert run.png -alpha Off -negate run_mask.png

This takes my source image (run.png) and instructs ImageMagick to strip out any existing alpha channel, negate the image (flip black to white) and save the result (run_mask.png).

Next we need to apply this mask as an alpha channel.  We use the following command line:

convert run.png run_mask.png -alpha Off -compose Copy_Opacity -composite run_icon.png

This takes the source image (run.png) and the mask (run_mask.png), strips any existing alpha channel, composes a new image using the Copy_Opacity operation (this is the secret ingredient) and composites it all into a new image (run_icon.png).

Here is the source image, the generated mask and the final icon image.

run.png
run_mask.png
run_icon.png