How to Draw Pixel-Perfect iPhone Toolbar and Tabbar Icons

As an update to my article on drawing pixel-perfect toolbar icons, I explain how to apply the same technique to tab bar icons and provide a new template and Xcode project. I recently created the tab bar icons for SuperRacing using the techniques describe here.



Creating good-looking iPhone toolbar and tabbar icons is definitely a challenge. The background must be transparent and the icon antialiased. It's also white, so you'd like to work in white against a dark background and have some sort of preview that you can reference. Unless you're a Photoshop or Illustrator jockey, it's hard to know where to start.

I create pixel-perfect icons for my iPhone apps using OmniGraffle, an icon template, and a simple workflow. You can buy OmniGraffle from Omni Group and get the rest here. Note that although I'm creating a bit-mapped PNG as the final output, I'm working with vector images. This gives me the freedom to adjust and tweak as needed for the best output.

What's The Difference?
Toolbar icons are normally white on black with no grays. They're about 21 pixels high and fit inside a toolbar that's 44 pixels high.

Tabbar icons are still monochrome, but they can be enhanced with shades of gray between black and white. These shades are specified not as color, but as degrees of transparency, with fully transparent giving a white icon that turns bue when selected. Fully opaque always shows as black.

Tabbar icons also have a little more room since the tab bar is 50 pixels high, but have to share that with a line of text that fits below. I have found that a good size for the icon is 27 pixels; as with toolbar icons an odd number so that it can be centered correctly.

A Template for Tabbar and Toolbar Icons
Download the template. It contains an OmniGraffle 5.2 document and an example Xcode project that uses the UIToolbarItem and UITabbarItem icons.

The template includes five layers in the Drawing canvas: a backdrop, a toolbar layer, a tabbar layer, a tracing layer, and an artwork layer. The Backdrop provides a grid and a working area set up so that the grid lines represent the edges of the pixels in the final icon image. Each square on the backdrop is rendered as exactly one pixel if the exporting instructions are followed. Combined with the toolbar layer and/or tabbar layer, ths provides rectangles for guiding the design:



The horizontal and vertical lines show the center so the artwork can be aligned. The outline rectangles are 21 squares and 27 squares high. I have found that 19 to 21 pixels high is a good size for toolbar icons, and 27 pixels good for tabbar icons, so this provides a frame in which to work. The whole background is locked and does not print.

The tracing layer can be used to provide an image for tracing. I import the image, set the alpha very low and then trace it on the Artwork layer. This can be very useful for anything that has a 3D aspect to it, or is not geometrical in nature. It's also locked and non-printing.

The artwork layer is where the drawing occurs. I draw in pure white and use degrees of transparency to control the amount of gray in the final image. I turn off shadows and stroke for everything. If there is no need to align to the grid, then I turn off alignment, but in many cases I want sharp outlines, or to make sure that curves look the same on opposite sides of an image, so the alignment is useful. I usually disable magnets on everything and disallow anything becoming a line label in order to prevent objects from affecting each other.

For this exercise, the image I want is an icon for Home. I construct it out of a house shape with a notch for the door, add the door using partial transparency, then put on the roof using a line, the chimney as a polygon, and the doorknob as a single pixel:


Note that when painting with transparency, you can always get more transparent (closer to white in the final image) by adding transparent layers on top, but can never make it less transparent (closer to black). For this reason I had to cut a rectangle out for the door, but was able to add the door knob on top. OmniGraffle Pro includes booleans, so it is possible if you have the Pro version to cut holes in objects to achieve more black. In the image above you can see the white guide lines showing through the door: it's a white door, but its transparency lets the black background and guide lines show through.

The preview icon top left gives me a good idea what the final icon will look like:



When I use lines, I use very fat lines. In the template each square is 10 drawing points and I normally view it at 200%, so my lines are going to be about two icon pixels wide, or about 40 screen pixels. It's easy to go too thin. Look at some of Apple's icons and you'll find they are very chunky.

Exporting the icon is a two-stage process. First I export as PDF, then import the PDF and export again as PNG. The PDF export converts everything to vectors (including line widths and text) and allows the image to be scaled while preserving transparency. The PNG export sets the final pixel size.

I perform the PDF export with a specific region, exactly the white rectangle in the Backdrop. In the template it's set to 200, 100, 190, 210 pixels for toolbar icons and 160, 70, 270, 270 for toolbar icons, so I just type that into the export box:


Note that the other settings must be exactly a shown here.

Next I select the PDF canvas and drag the exported PDF into it. Once selected I rescale it by setting the Height to 21 if it's a toolbar icon and 27 if it's a tabbar icon, and ensuring that the Maintain aspect ratio box is checked. The working area I defined on the backdrop is 21 squares high for toolbar icons and 27 squares high for tabbar icons: this is how I get the match between squares on the screen and pixels in the icon.


For the final export, I export as PNG and select All Objects:


Now I add my image to my project. For a toolbar icon I set the bar button item style to Plain and select the icon as the image in the drop-down:


For a tabbar icon I set the text that appears below the icon, and then select the icon file from the drop-down:


Here is the final pen icon used a toolbar:



And the house icon in a tabbar:



Also note that PNG rendering in the simulator is not perfect. I have seen shape and color artifacts appear there that do not occur in the final image.