Ok I know I said I’d have this on Monday, so I’m a little late. Hopefully the wait was well worth it!
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:
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!
Chris
July 5th, 2007
Thanks for the tutorial! I have some problems though. I am a beginner so please bear with me.
On the second part of the “inner edge glare” section, you say to add a layer mask. Do I select hide all or reveal all? I tried this a few times and I usually end up with a white glare through the center of the image.
Chris
July 5th, 2007
On the “crop the top glare” section, I am not getting a shiny gloss as shown. What layer should be selected when I select the top section with the ellipse tool? I am doing this in the last layer that was created (for the top gradient) and when I inverse/delete, nothing happens. I don’t understand how a gloss could be created from these actions. Any chance you could break it down even more? thanks
matt
July 6th, 2007
Howdy Chris! Sorry I didn’t make the tutorial detailed enough, I think I left out some stuff.
Until then, let’s see if I can help you here.
For the inner edge, it’s a little difficult to explain, but not really that hard to do. Here, I’ll upload a quick video.
matt
July 6th, 2007
Ok the edge glare video is here:
http://blog.jotlet.net/images/edgeglare.mov
I’ll make a quick one for the rest of the tutorial too while I’m at it
Ok here’s the rest of the tutorial in video form:
http://blog.jotlet.net/images/restoftutorial.mov
I don’t know much about video compression. It’s 4 minutes long and 7MB.
I hope this is helpful! If you need anything explained, just let me know.
Chris
July 6th, 2007
AH! On the inner edge, I was adding the mask to the original color layer, not the new layer where I stroked the path. That was my problem. When you said “Select your base layer…”, I thought that meant the original layer.
The videos really helped. I can see you adjust the opacity in many of your layers.
Thanks a bunch. You rock!
Index of /
July 14th, 2007
them with you, and create a psd kit for anyone wanting to do the same thing. I’m all about making things look uniform, so I used the traditional Apple iPhone app buttons as a template.Update: I have created a tutorial on how I made this .psd file!Check it out!
Rich
July 15th, 2007
Awesome. There are a lot of really cool applications for some of the tricks you’ve used here. Thank you!
Sully
July 16th, 2007
Awesome tutorial, looking forward to making a few icon/buttons.. One question tho, where is the tutorial for getting the icon on the phone itself?
Thanks
Sully
matt
July 16th, 2007
Thanks for the comments and the feedback! Glad to know the tutorial is helping people out.
As for getting the icons on the phone, Apple has not given developers access to anything, so you won’t be able to use these icons like I thought. If you make a web site for use on the iPhone, these icons would be a great fit.
matt
July 17th, 2007
Sully,
I take that back! Apparently the iPhone has been hacked and you can change the icons yourself. Maybe this is what you were referring to?
http://www.modmyiphone.com/wiki/index.php/Iphone_skinning
I’m pretty cautious when it comes to stuff like that, so I’m not sure I’ll try it myself. If you do, let me know how it goes!
區段40
July 17th, 2007
[IMG iPhone Icons] 如果你要做個iPhone應用，你可以用這個iPhone Icon Kit給Photoshop。即使你只想把很好看的圖標(icons)給你的網路應用，或是網站你也能用。 他們這裡也交代怎麼做那種圖標。
てっく煮ブログ
August 1st, 2007
iPhone style icon tutorial ≪ Jotlet Developer Blog
stacks
August 14th, 2007
iPhone style icon tutorial.
2803 webdesign | webdesign, css, graphisme, scripts...
August 27th, 2007
- Une superbe version remasterisée des icônes des menus de l’iphone chez fasticon : [IMG icone iphone] - Et si vous voulez faire vos propres icônes dans le style de l’Iphone vous pouvez jeter un oeil àce tutorielqui vous permettra d’arriver à ce rendu : [IMG Icône Iphone] Autres articles potentiellement en rapport:
DS
September 4th, 2007
WOW!, i´m spechless, im photoshoping right now, hope you don´t mind if i come back later with some questions?
Hehehe
Keep Smiling.
matt
September 4th, 2007
Please do! I’m happy to teach =) Hopefully my tutorial is helpful.
wurch.blog
September 7th, 2007
These are my links for September 6th:iPhone style icon tutorial « Jotlet Developer Blog-
lyndell
September 16th, 2007
hey man, im a little slow on the whole photoshop thing since i just got it today, would it be too hard to video tape the whole process? thanks
vanqy
September 22nd, 2007
Nice work!Could you send the iPhone-style.psd to my e-mail box? I could not download form the website!Thanks!
tarik
October 10th, 2007
Excellent tutorial matt! Now Ive read it, im gonna give it a bash….why not! might even be fun!!! Great work buddy, i like your style!
T
xylopia
October 10th, 2007
thanks a ton! I’ve been wondering how those cute icons of iphone could be cooked with Photoshop for about long enough, and I can now do it myself. Yeeeeeeha!
matt
October 11th, 2007
Many people have emailed me asking for a new tutorial that matches the final iPhone icons that are on the phone now. They are a bit different than these, and I think I will skip the screenshots and just make a video this time.
Keep an eye out! Thanks foe the great feedback, everyone!
FreeJTV
October 12th, 2007
CC web designs and other free and royalty-free resources. You can visit the following links to contact the authors: Jhlabs’s Image Filters lib; License: APACHE Sarissa Ajax Lib; License: GPL/LGPL/APACHE. Javazoom’s Jlayer Mp3 Lib; License : LGPLJolet’s Apple Iphone style icon PSD Template: used in album page. Lefinnois’ Gimp aqua button script: Buttons in album page and applet are created with it. NanoHTTPD; An Embeddable http daemon; License: Apache Backgroundsarchive; The fancy tileable background patterns came from
SlidePlay
October 26th, 2007
CC web designs and other free and royalty-free resources. You can visit the following links to contact the authors: Jhlabs’s Image Filters lib; License: APACHE Sarissa Ajax Lib; License: GPL/LGPL/APACHE. Javazoom’s Jlayer Mp3 Lib; License : LGPLJolet’s Apple Iphone style icon PSD Template: used in album page. Lefinnois’ Gimp aqua button script: Buttons in album page and applet are created with it. NanoHTTPD; An Embeddable http daemon; License: Apache Backgroundsarchive; The fancy tileable background patterns came from
Steven
December 1st, 2007
Hey could you make a tutorial for how to make sliders for windows. thanks
Juwilz
December 25th, 2007
in the second step, i dont understand it. When i use the path selection and do that, i can MODIFY it. its not even highlighted, and what do u mean by “nice” ? make a vid doing all of this plz.
Juwilz
December 25th, 2007
yo man, can u plz make a vid for this! its so difficult, espically the command plus w.e, then with the control click nice path like WTF LOL
or make a more detailed tutorial..
DigMo!
December 30th, 2007
the same color as the bg color so it looks a little beveled on top of the glare. I tried to build this into the kit by making the stroke black/soft light blend mode, but again, it didn’t look quite right. Download PSD Visit Creator’s WebsiteVisit a Tutorial on how to create the file.
Gabe
January 5th, 2008
Hi!
Great work, btw. I just have one interesting observation…
I cannot for the life of me understand why Photoshop can’t save as a PNG format.
Whenever I save my file, I have to save it as a JPEG, and that doesn’t really work when I try to import it into my iPhone because it ends up having a non-transparent background.
Could you help me as to what I should be doing? I want to have a nice transparent icon, but it just won’t work.
I’m using Photoshop CS3 on a MacBook.
Make an iPhone in JavaScript using jQuery :: JavaScript Demos
January 10th, 2008
[…] This process is fully described in this excellent tutorial. […]
The Full Of Hate Brothers Say......
January 11th, 2008
It’s still cool making little shiny bits:making iPhone style icons in Photoshop.
Sascha
January 18th, 2008
Hi there,
i kept searching for such a tutoial all over the internet…
finally i found this page!
thanks a lot: great work!
Sascha
daphne
January 31st, 2008
Great tutorial — exactly what I hoped to find! And the quick fix psd is an awesome touch. Thanks for sharing your knowledge with everyone!!
iPhone icons
February 4th, 2008
If you want iPhone icons for your homescreen check out http://www.icons4iphone.com
Apple iPhone
February 7th, 2008
Thank you for this very very nice tutorial !
Storm
February 8th, 2008
Hey!!!
Thank you so much for this tut!!! only had my iphone for about a week now. got it already unlocked/jailbroken and so on. so still very new at adding and changing things. but using your tut i managed to create my own theme and put it on why phone!!! and i love it!
Thanks so much
Marc
February 9th, 2008
Your tutorial is a gift I thank you for! I can see the care (and hours) that went into this… the quicktime videos were an added bonus. Thanks.
sondlerd
February 10th, 2008
Great tutorial… I could never do this on my own.
David
March 22nd, 2008
Hey. This tutorial is really neat. Unfortunately there is one step that I cannot figure out. I am using Photoshop CS2 on a Windows machine, in case that matters. Here’s my problem:
In the first step, it says to select a color and draw a rounded rectangle. Then in the next step it says that “the layer I just created should have 2 parts: the fill color and the path. Control click the path to get a nice selection”. My problem is that when I draw the rounded rectangle, I don’t get a new layer with a fill color and a path. All I get is a locked background layer with a colored box on it. Usually I am reasonably proficient with Photoshop, but clearly I am doing something wrong.
AG
March 31st, 2008
Great tutorial! Learned a few new techniques
Do you know where there is a tutorial on how to make the ‘gear’ widget icon?
Many thanks!!!
Anthony
April 11th, 2008
Awesome! Thank you VERY much for this tutorial.
jake
April 17th, 2008
im having problems with the preview once its completed.
when its up on the internet (customize 2.0 beta4), and when its used, the outer edges still show the entire canvas. the picture still has corners. how do i get rid of this?
thank you.
anonimous
April 18th, 2008
I don’t understand how to do the inner edge glare can you help me. because you make the same shape inside then what? i can’t get the select modify thing to work can you please help me?
Fist Sun
May 17th, 2008
Thanks for the tutorial. I’m completely new to Photoshop so some parts were difficult, I could’ve probably benefitted from screencaps of the actual PS buttons we were supposed to click but awesome anyways!
Michael
June 18th, 2008
Can you tell me if Photoshop 6.0 or 7.0 can create the iPhone style icons?