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.