How To Draw An iPhone App Icon In Illustrator

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

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:

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.pageaffairs.com/ ralph.m

    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.

    • zav

      Yeah. There is no bottom part of the square.

      • SW

        She’s referring the bottom part of the top level rounded square.

        Step 4 might be clearer if it you copy and “Paste in back” the rounded square and lock that layer so that it won’t get deleted on accident. That entire rounded square copied beneath should still be there after deleting the “bottom part of the square”

  • http://www.phpied.com ssttoo

    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.

  • http://www.laughingliondesign.net Jennifer Farley

    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.

    • zav

      People are forgetting step 4, or skipping it. That’s what happened to me.

  • StevenHu

    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.

  • http://www.pageaffairs.com/ ralph.m

    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.

  • Anonymous

    Very vague directions, what’s the rounded corner specs? Is there a site, possibly by Apple, that gives precise directions?

  • http://edgedirector.com/ plumsauce

    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.

  • Alex

    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!

    • zav

      You’re forgetting step 4.

  • Anonymous

    great!

  • Craig

    Create an iPhone homescreen bookmark icon for your website | http://bit.ly/94QUAV

  • John

    Very nice tutorial! Another interesting page on how to make iphone icons

  • David

    When changing the gradient for the ellipse there is no red coming though, it’s simply white and grey. I along with 10 other people have followed your EXACT instructions and no one can get it to work. Works up to point 7, then it just goes wrong. Any thoughts, ’cause I’m stuck…

    • zav

      You’re forgetting step 4 where you make a copy of the rounded square. Same problem I had.