Many iOS apps use tab bars and usually we want to create our own icons. However, creating icons for the tab bar is not as simple as drawing a pretty icon in Photoshop and saving it as PNG due to the way iOS renders tab bar icons.

Read this brief tutorial to learn how to make tab bar icons…

The thing about tab bar icons is that iOS does not care what color the pixels are. The only thing that is considered when rendering a tab bar icon is the pixels’ transparency (or alpha value or opacity). It does not matter if a given pixel is white, red, black or mauve. If the pixel is solid, non-transparent it will be rendered as solid white (yes, even if the pixel is black). (Well, gray actually, but we’ll call it white). If the pixel is completely transparent it will be rendered as black. And if the pixel is somewhere in between transparent and solid it will be rendered as gray. 50% transparent corresponds to 50% gray. 10% transparent (90% opaque) is 90% white.

When the tab is selected, the icon is rendered as blue (a blue gradient, actually) instead of white.

The size is fixed at 30 x 30 pixels. And thus 60 x 60 pixels for the Retina version.

So how to make icons like that? By following this simple tutorial.
The tutorial assumes that you are using Photoshop and are fairly familiar with working with layers and stuff.

1. Create a new Photoshop document. 60 x 60 pixels, RGB mode with transparent background. This is for the Retina resolution image.

2. Select all and fill with solid white color.

3. Add a layer mask

4. Show the Channels list, select the mask channel and hide all other channels.
The mask channel is where all drawing will take place!

5. Start by filling the channel with solid black
Now draw your icon. Using grayscale colors only! You cannot use colors other than white, black and grays. (Indeed, you can not even select any other color since you are drawing in the mask channel.)

In this example I have drawn using both Photoshop tools (pencil and marquee) and by copying a shape from Illustrator and pasting it into Photoshop (make sure the mask channel is still active) as a path which I then filled with white:

If you switch back to viewing RGB channels (click the white square in the Layers list) it will look like this:

7. Export the image as PNG: Choose File -> Save for Web & Devices. Choose PNG-24 with Transparency. Remember to append “@2x” to the file name since this is the Retina resolution image. (E.g. “tab_image@2x.png”.)

8. Now create the normal resolution image. This image must be 30 x 30 pixels. The easiest way is to Save for Web & Devices again but scale to 50% (30 x 30) first:

Give it the same name but without the “@2x” (i.e. “tab_image.png” if using the filename above).

This was the easy way of making the lo-res image. But the much better way of doing it would be something like this:

1. scale the image (Image -> Image Size…) to 50%
2. save the document as a new file (File -> Save As…) so you have one file for the Retina version and one file the the normal version
3. adjust the image by hand so it is still pixel-perfect since the automatic scaling usually creates imperfections. See this example of how the scaled-down image looks. This is not quite what we want (we want solid boxes and black lines between them):

And you’re done

Here is what the final result looks like in the app. First in normal resolution:

And Retina version: