自由手記

http://steveweller.com/articles/toolbar-icons/




[Note: I have created 
a companion article that covers tab bar icons
. It includes an updated template with new guides and a new example project.]

Creating good-looking iPhone toolbar 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, a toolbar 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.

Download the template . It contains an OmniGraffle 5.1 document and an example Xcode project that uses the UIToolbarItem icon.




The template includes three layers in the Drawing canvas: a backdrop, 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.

The horizontal and vertical lines show the center so the artwork can be aligned. The outline rectangle is 21 squares high. I have found that 19 to 21 pixels high is a good size for toolbar 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 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 a pen. I draw two rectangles and a triangle, group them, rotate the group, and then position it on the grid:

  

 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, 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 and ensuring that the Maintain aspect ratio box is checked. The working area I defined on the backdrop is 21 squares high: 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, set the bar button item style to Plain and select the icon as the image in the drop-down:

  

 Here is the final icon used a toolbar:

  

 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.