How to make tab bar icons

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:

12 kommentarer

  1. Arteku

    This tutorial is awesome. Only took me a few minutes to make my icon following your instructions. Thanks!

  2. phil

    thanks for tut, solved my problem. But what an annoyance. typical annoyance from apple.

  3. ski

    Awesome Tutorial, thank you…

  4. truthsmiles

    The “pixel perfect” problem is why I like to start with the “low res” image first and make THAT perfect. Make it perfect in 30×30, and when you blow it up it will be perfect at 60×60 already!

  5. this is a great tutorial, but i cannot figure out how to make gradients appear like yours (you have varying shades of gray). mine just come out solid white when i fill the path in photoshop, even though i reduce the opacity to 50% in illustrator.

  6. Nathan

    Easiest Photoshop experience I’ve ever had. Nice work!

  7. Jayne

    This is a wonderful tutorial. Thank you! I do have one “quick” question though. The first two times i did this, I pasted an image path (copied from my illustrator file) into the photoshop file, then filled it in. The first two icons turned out perfectly (no pixelation, very smooth lines), but the last two times I have tried- about a week later – I can’t get the same effect. The final tab bar images are turning out quite pixelated on the iphone…. and I can’t figure out what i’m doing differently. Any suggestions? Thank you again. This is a wonderful and easy to follow tutorial!

  8. Zius

    This is a great tutorial, thanks!

  9. tyler

    Thanks for the detailed instructions. I was trying to remember how I made the icons the last time and apparently it changed (pre retina displays).

  10. Simon Littlehales

    Thanks for this – best explanation I’ve found so far and easy to translate to Corel PaintShop Pro X5

  11. Ali bayati

    Nicely done.
    Thanks for illustration.
    Thanks for sharing this greate tutorial :-)

Trackbacks for this post

  1. iOS change Tab Bar Icon Color | BlogoSfera

Skriv en kommentar

Af Jens Willy Johannsen
+45 70 26 00 69