Following on from yesterday’s post on how to draw a vector iPhone, here’s how to make an iPhone style icon in Illustrator.
1. Use the Rounded Rectangle to draw a square with round corners. Hold down the Shift key as you drag to create a square.
2. Open the Gradient and Color palettes. Make sure the square is still selected. Create a linear gradient with 3 shades of the same color, starting with the lightest color on the left hand side. To change a color stop, first, click on the color stop, and then click on the color you want on the Color palette. To add an extra color stop, simply click under the gradient slider.
3. Set the Stroke color to None.
Here’s how my palettes and square look: 
4. Make a copy of the square and paste it directly on top of the first square.
5. Draw a black-filled ellipse above the square.
6. Select both the square and the ellipse, then open the Pathfinder palette and click on the Divide icon. 
7. Choose Object > Ungroup, to ungroup the divided objects then. Delete the top of the ellipse and the bottom part of the square. 
8. Select the new top of the square and fill it with a linear black and white gradient. (White at the top grey at the bottom). Set the blending mode to Screen and the Opacity to 80%. 
The button should look a bit like this: 
Now you can add a logo or symbol to the button. Whatever you choose to add, make sure that is sits beneath the top gradient. I used a webding for the ambulance. 
9. The icons sit on a dark screen and generally have some text underneath them. Use Helvetica or Arial if you don’t have that font on your computer.
10. Once you’ve made your icon you can select all parts and group them. Then add them to your iPhone vector image, or your web page if you want to use the icons for that.
Related Reading:
Thanks for this nice, simple and (mostly) clear tutorial. Very easy to follow and repeat ‘at home’. Could I clarify a few points?
In 7, not sure what you mean by “Delete … the bottom part of the square.”
In 10, it looks like something was left out. What font is meant by “if you don’t have that font”?
Thanks again.
June 29th, 2009 at 9:31 am
thanks, that was cool.
since I’m illustrator-challenged, here’s what I came up with:
http://phonydev.com/iphone-like-glossy-icons/
basically you have a <div> with a normal background image, then you put another image on top of it, which is your reusable “mask”
I’ve found I really like this technique where you put a semi-transparent image on top of another (or on top of a solid color background), in order to avoid having multiple images. Another example for shiny buttons:
http://phonydev.com/easy-shiny-buttons-and-toolbars/
Same can be used to do gradients – different color gradients can be achieved with a single mask image.
June 29th, 2009 at 1:35 pm
Hi Ralph. At point 7, you should have two copies of the round square on top of each other. After you use the pathfinder to divide the elliptical shape and the round square, you’re left with 3 new shapes. Delete the top of the ellipse (this is the part that is outside the square), and the bottom of the round square so that you are left only with the part of the ellipse that covered the top of the square. Because you made a copy of the round square, it might look like you haven’t deleted anything.
Hi Sstoo. Thanks for showing that CSS technique for putting the semi-transparent image on top of another. Very useful.
June 29th, 2009 at 5:27 pm
I am currently learning how to build apps for the iPhone. The documentation says that when you make icons for the iPhone (and iPod touch) you will not need to create the rounded corners or the sheen. You will create the icon flat with no sheen. The compiler will add the rounded corners and sheen to the icon automatically at runtime.
June 30th, 2009 at 12:42 am
Thanks for your clarification, Jennifer. The answer probably would have been clear to me if I’d tried the process out first. (Sorry!) I also realize now that in step 9 you mean ‘use Arial if you don’t have Helvetica‘. It’s amazing how easily language can be misinterpreted.
June 30th, 2009 at 8:21 am
Very vague directions, what’s the rounded corner specs? Is there a site, possibly by Apple, that gives precise directions?
July 1st, 2009 at 6:17 am
Actually, the instructions are more than adequate. A rounded corner is whatever you make of it.
The only thing is that I almost did not click on this article because it emphasised iphones. It might catch a wider audience if it also mention aero glass effects.
July 1st, 2009 at 3:09 pm
I’ also having problems with step 7. I followed Jennifer’s tip and it didn’t work. I made a copy of the square, divided and ungrouped them. The I preesed delete when the ellipse was marked. PLEASE HELP ME!
July 15th, 2009 at 12:00 pm