HTML & CSS
Article
By Jennifer Farley

How To Draw An iPhone App Icon In Illustrator

By Jennifer Farley
Last chance to win! You'll get a... FREE 6-Month Subscription to SitePoint Premium Plus you'll go in the draw to WIN a new Macbook SitePoint 2017 Survey Yes, let's Do this It only takes 5 min

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.

iPhoneIcon1

--ADVERTISEMENT--

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:
iPhoneIcon2

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.

iPhoneIcon3
6. Select both the square and the ellipse, then open the Pathfinder palette and click on the Divide icon.
iPhoneIcon4

iPhoneIcon5

7. Choose Object > Ungroup, to ungroup the divided objects then. Delete the top of the ellipse and the bottom part of the square.
iPhoneIcon6

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%.
iPhoneIcon7

The button should look a bit like this:
iPhoneIcon9

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.
iPhoneIcon10
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.

iPhoneIcon11

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:

Login or Create Account to Comment
Login Create Account
Recommended
Sponsors
Get the most important and interesting stories in tech. Straight to your inbox, daily.Is it good?