Comments on: How To Draw An iPhone App Icon In Illustrator

By: Alex

Alex — Wed, 15 Jul 2009 02:00:41 +0000

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!

By: plumsauce

plumsauce — Wed, 01 Jul 2009 05:09:20 +0000

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.

By: Anonymous

Anonymous — Tue, 30 Jun 2009 20:17:03 +0000

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

By: ralph.m

ralph.m — Mon, 29 Jun 2009 22:21:13 +0000

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.

By: StevenHu

StevenHu — Mon, 29 Jun 2009 14:42:16 +0000

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.

By: Jennifer Farley

Jennifer Farley — Mon, 29 Jun 2009 07:27:38 +0000

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.

By: ssttoo

ssttoo — Mon, 29 Jun 2009 03:35:47 +0000

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

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.

By: ralph.m

ralph.m — Sun, 28 Jun 2009 23:31:05 +0000

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.