This tutorial isn’t about about creating a specific icon, instead instructions on how to setup Illustrator so you can creating clean (pixel wise) icons in the least amount of effort possible. If you’ve never created an icon for the toolbar or tab bar for the iPhone, you must first know that icons are rendered off the alpha channel (or transparency) of the image. Colors, black and white don’t matter. You may wonder. why not just use the pencil tool in Photoshop? These instructions will come in hand when you want to create circles and rounded rectangles that clean looking and aren’t fuzzy.

Turn Illustrator into pixels
First, we need to change the units of Illustrator to pixels. Go to the Units & Display Performance in the Preferences (from the menu, click Illustrator >> Prefences >> Units & Display Performance). Change all the units from Inches  to pixels. Next go the Guides & Grid section of the Preferences. Change  the gridline to every 1px and  subdivision to 1. These changes will allow you to create objects that are pixel perfect clean and will allow you to create objects faster.

New Document
Create a new 32px by 32px document, the size of tab bar icons on the iPhone. From the view menu, turn on the “Show Grid” and “Snap to Grid” options so you create icons that will be rendered cleanly. Now when you create a circles, rounded rectangles, squares or lines, it will show up crisp without any fuzz when you go to export them without worrying if they will when creating the icons. Setup the color palette so that the fill color is black, and the stroke is None.

Exporting Icons for the iPhone
You’ve created your icons. Great! Now you need to get them out of Illustrator (or Photoshop) and into your iPhone app. Go to File >> Save for Web & Devices… and export the icon as a transparent PNG-24. Remember that the transparency is the instructions for how to create the icon on the iPhone tab bar.