iPhone Style Icon Tutorial

August 13th, 2008

Ever since I posted the iPhone-style .psd kit for developers to use in their applications, people have asked me to make a tutorial on how I did it. I’m assuming here that these people would like to know the “how”s and “why”s of what I did, so this tutorial is rather in-depth. For those who want a quick iPhone icon fix, just download the .psd file.

Apple has recently posted some guidelines regarding making web applications. It seems I was mistaken, and Apple is merely saying “make a web page, LOL”. The extent of their interaction is tagging phone numbers, emai addresses and google maps links with special key words to open their respective iPhone apps.

Good enough.

If you like this tutorial and would like to see more, let me know. I don’t just do iPhone-related icons, either .

That said, let’s get started!

Update! Since I’m not the best writer in the world, I made a couple of little videos outlining what’s going on. I made them pretty quickly so they don’t exactly cover everything, but they should give you a pretty good idea as to what’s going on:

• The Edge Glare Step
• The Rest of the Tutorial

Let me know if you have any questions or comments!

Create a New file

This step is pretty self-explanatory, but I’ll list it anyway. I made the new file 80px by 80px at 72ppi. Name it whatever you want (”myiPhoneIcon” in this case) and hit “Ok”.

Make your base shape

Choose a color in the color palette that you like. Don’t get too picky, you’re not marrying this color– you’ll be able to change it at any point. Now right-click the shapes tool and select “Rounded Rectangle Tool”. Set your radius to 10px and the path type to “fill” (in the options at the top) and draw a square roughly 60px by 60px (hold shift to make sure it’s square).

Make the inner edge glare

Note: this is not present on the iPhone icons upon release. I saw this used in one of Apple’s screenshots of the iPhone awhile back. I like it, so I kept it. If you don’t, just skip this step.

There might be a design-y technical name for these inner edges that show up in glossy items, but I sure don’t know it. Anyway in the layers palette you’ll notice that the layer you just created has two parts to it, the fill color and the path.

Command-click (control-click?) the path portion and you’ll get a “nice” (more on this later) selection of your button. In the menu bar click on “Select”, “Modify >”, “Contract” and type in a “2″ and press “Ok”. This contracts your selection by 2 pixels.

Create a new layer (command-shift-N) and set the layer mode to “Overly”. Make your foreground color white (Pressing “D” and then “X” is my preferred method of doing this) and select “Edit”, “Stroke” from the menu bar. Stroke it 1 pixel and press “ok”. Now we have a line. Neat.

Select the layer that contains the stroke you just created in the layers palette and add a mask to it. Select the gradient tool (”G”) and pick the foreground to transparent gradient in the gradient list up top (it’s the second one, typically). Make Black your foreground color and draw a vertical gradient within your mask from the center of the button to the top of the document.

Next make white the foreground (”X”) and draw a vertical gradient within the mask from around the bottom of the button to the middle of the button. The result is pictured.

Make the top glare

Create a new layer (command-shift-N). Now make a selection of your button again (command-click the path on your button layer) and draw a white-< transparent gradient within that selection that roughly mimics the image shown. The degree of glare is up to you.

For more control, I like to create yet another new layer and do the same thing again, only making a shorter, whiter glare up top to really make the gloss pop. This way I can get a good amount of contrast while still making the gradient smooth.

Crop the top glare

Assuming you’ve still got the button selection, change your Marque tool to the Elliptical Marquee Tool and change your selection style to “intersect”.

Draw an ellipse over your selection however you want the crop to go. You can check the image here for reference.

Select your glare layer and select the inverse (command-shift-I) of your selection. Press “delete” to delete everything outside of your selection and you’re left with a nice shiny gloss!

Apply an underglow

Underglows are essentially what give 3d glossy items their depth. They give the illusion that the light from the top is reflecting off of the bottom of the button.

Use the exact technique as the upper glare, but do it to the bottom. I like to do a combination of two small gradients, and set one of them to “overlay” to get a nice light color.

Make the sharp drop shadow

Drag the color portion of your button to the “new layer” button on the layers palette to duplicate it. Fill it with black (double click the color and select black). Now change the opacity to around 80% and select the Move Tool (”V”) and nudge it a couple of pixels down.

Make the surrounding drop shadow

Select your button layer and click the “layer effects” button at the bottom of the layers palette. Select drop shadow and apply the following:
Opacity: 83%
Angle: 90
Distance: 2px
Size: 2px

It makes a nice little soft shadow the whole way around the button.

Fix the aliasing poking through

This next step isn’t as important on dark colored backgrounds, but it’s pretty much required for white backgrounds.

You’ll notice that the glare selection isn’t perfect, so we have some ugly blue poking through around the edges. The fix is easy, but it’s a little difficult to explain. Essentially we’re just going to mask out that part of the button.

Add a mask to your button layer. Command-click your glare layer (the largest one, if you have multiple) and select inverse (command-shift-I). Select black as your fore color and select the brush tool. Make it around 10px and change the hardness to 0%.

Now mask out those ugly edges! Select the mask on the button and just brush along the edge to get rid of those pixels poking through. Be careful that you’re not removing too much. Since you’re only selecting what’s outside of the glare, you don’t have to be overly cautious.

Apply your logo/icon

Here’s the deal, if you’re doing an icon, it looks better (in my opinion) on top of the glare, with a stroke to make it appear slightly inner-bevelled. It looks like it’s etched into the glossy surface this way.
If you’re doing a logo (multiple colors) you want it to appear inside of the button, so put it under the top glare, but on top of the underglow.

To give icons their bevelled look, just put a 2px stroke on it the same color that you chose for the background (edit -> stroke -> 2px).

Customize to your heart’s content

You’re essentially “done”, but you can do whatever you want from here. Add more shadow, less shadow, larger shadow, less glare, ditch the glare crop to make it a softer gloss, stroke the button to give it a sharper look, whatever you want!

Questions and comments

This is my first Photoshop tutorial, so I’m certain I left out some important items while babbling on about unimportant ones.

Also I’m not formally trained in Photoshop at all (although I’ve been using it for 10 years) so if someone knows a better way of doing some of these effects, just let me know! I’m particularly interested in working with more vector shapes to apply the effects, so they’re not as “permanent”.

Thanks for reading!