Episode 4: Photoshopping iPhone Icons
08. Aug, 2009 
27 Comments
Ash Davies.
You're not seeing anything here because either you haven't logged in or you're not a PhotoGuides member. Don't worry though, it's free to join
Episode 4: Photoshopping iPhone Icons [7:47m]: Download (7687)
Don’t forget to check out the Podcast on iTunes.
Apple has forever been a trendsetter in design. Not only are their products timelessly elegant, but their photoshop and advertising work is simply beautiful and highly recognized. Campaigns like iPod Graffiti are worldly renowned and seen as an apple icon, and more recently, these iPhone Application Icons have been stepping forward as an Apple trademark.
In this tutorial you’ll learn how to create the glass style iPhone icons and buttons. You’ll be able to choose your own colours and integrate your own logo or text into it.
Here’s the version i created in the tutorial:
Good Luck!
Thanks alot for tutorial, it’s an absolute belter. I have one question please.
When I tried to change the colours at the end many of them looked like a ‘negative’ or no where near as good. I think this exact process only works for certain colours. Could you tell me how to get it looking great with a yellow or a silver please?
[Reply]
Ash Davies Reply:
August 14th, 2009 at 9:49 pm
Hi JScud
Glad i could be of help.
I’ve been playing around with your problem to see if i could find a fix. Unfortunately there’s no direct solution to this that i’ve found. Some colours, especially yellow, don’t seem to work as well.
I can suggest a few things though.
Firstly, try turning off the ‘Glass’ layer. This overlaid gradient can sometimes have a bad effect on the colour.
Regarding the colour, try tweaking that to a slightly darker compound. For yellows I’m using e1c31d, and the darker compound seems to give a better result.
You might also like to try and add an ‘outer glow’ to your Main Glare, Top Glare, Bottom Glare and Edge layers. Set the colour to white, the size to 0 and the opacity to roughly 30%. This i find intensifies the glares which is needed for some colours.
As for silvers, the colour works quite nicely for me. I’m using a5a5a5 on the same file created in the tutorial.
If these tweaks don’t solve your problem then i’m not sure what to suggest. Maybe just look back over the tutorial and see if you missed a step, or maybe check that your blending modes are all correct.
Hope that helps
–
Ash Davies
[Reply]
Perfect! This is exactly what I’ve been looking for
[Reply]
Ash Davies Reply:
August 19th, 2009 at 7:04 pm
Glad i could help Clay
[Reply]
Awesome tutorial! I’m a beginner so it helped me a lot. You should make more tutorials like this, simple yet useful. Gonna check out photoguides.net soon!
[Reply]
Ash Davies Reply:
August 22nd, 2009 at 3:46 pm
Thanks DuckTape. I’m glad I could help
I’ve got a few more tutorials like this in mind and i’ll probably have another one out within a week or two.
[Reply]
DuckTape Reply:
August 24th, 2009 at 2:22 pm
No Problem, can’t wait for the other tutorials!
[Reply]
Amazing tutorial, but I got a one question. How can I save that kind of file, with transparent background, and without losing a quality? If I try a gif file, then the quallity is poor, and the jpg does’nt use transparency
[Reply]
Ash Davies Reply:
September 3rd, 2009 at 7:58 am
Hi Mike
You’ll need to save it as a PNG file. This is a high quality format that allows for transparency.
You should be able to find this option in the format section when you save it, or alternatively, you could choose ‘save for web’ and select PNG-24 with transparency enabled. This will give you a high quality transparent image with a low size for easy web use.
Hope that help
[Reply]
Great tutorial! I actually can’t afford ps. But even in pse, your tutorial works just fine. Just followed step by step. Although the top of the icon looses a bit too much of saturation – in my opinion – I should have no probs to get some correction there… if only I had some time…
Thanks again.
[Reply]
Thanks for this great tutorial. It’s easy to follow and awesome for people who have iPhones and iPod touches!
[Reply]
Thanks for the tutorial! I’m trying to place it in an existing PS layout and even when I save it as PNG with transparency enabled it comes in with grey background…is there a way to cut out the shading except for drop shadow?
Thanks again!
[Reply]
Ash Davies Reply:
November 18th, 2009 at 12:07 am
Hi
I think i know what is causing this. It might be your ‘Glass’ layer. Unfortunately, I only discovered this problem just after I released the podcast.
To fix it all you really need to do is clear all of the glass layers contents that are outside of the button shape.
To do this you can control or command click on the shape of the button layer (in the layers window).
This should select just the shape of the button. You can now click on your glass layer, and click ‘add layer mask’.
Doing this should hide the outside contents, and hopefully will solve your problem.
Alternatively, you could download the PS source file. I’ve just updated it to contain this fix.
Hope that helps!
[Reply]
jhldesign Reply:
November 18th, 2009 at 4:45 am
HI and thanks for your swift response! Your solution worked for the glass layer though I found that I still needed to quick mask all the glare layers as well to remove any remnants on edges and now it works perfectly. Thanks!
Jennifer
[Reply]
Hi, awesome guide, the best i’ve seen and actually been able to do!
Just a quick question though, I’ve tried doing it with a black fill, but everytime i overlay, like with the edge, i can’t see it!
Have you got any ideas or fixes to solve this?
Many thanks in advanced
[Reply]
Ash Davies Reply:
December 20th, 2009 at 4:59 pm
Hi Liam.
Unfortunately the colour black won’t work with the overlay blending mode. It will just appear opaque.
All i can suggest is that you try a dark grey, or perhaps experiment with other blending modes (hard light could work)
Hope that helps
[Reply]
Hi, this tutorial is also very lovely!
I created an ipone button by following your instructions but at 1 time there is something I don’t understand. The item were you have to delete the shadow with inverse.
There was no possibility to set the layer with the “floating” lines. But alas, I’ve used the eraser for the outsite and created a iphone-look-a-like button!
Thanks!
[Reply]
Nice tutorial. But I have a problem. When I go to Select-Modify-Contract.I can´t click on modify. What am I doing wrong?
[Reply]
Thanks for sharing the knowledge brother. Much appreciated!!
I have been playing around with just images, breaking the button mold for a more cartoonish look. Having fun and looking good except for certain apps where the default apple drop shadow remains behind my image making it look like an image in a semi transparent black box. Not very pretty. Do you have any idea how to disable or remove apples default icon drop shadow??
Thanks for your time
Hoping u have some wisdom to share…
[Reply]
There’s a lot of this kind of tutorial out there but yours is the best. The final result is excellent. Thanks for sharing and for the source file!
[Reply]
I stumbled on to your site from mockapp.com and I am glad I did. Yours is an outstanding tutorial!! Congratualtions. You have contributed a LOT to iPhone App development process by thousands of developers who will thank you for this. I do. One suggestion – Can you put your *.psd files for other icons as well? You might be surprised, where other developers will take them in terms of modifying those icons and designs in terms of further colors and user experience!! Thanks again.
[Reply]
I need some help. I’m using CS5 and trying to follow along. Whenever I make my round rectangle shape, I’m not able to get the shape part to show up in the layers pallet, nor will making the shape automatically create a new layer. Is there a setting I’m missing ?
[Reply]
Ash Davies Reply:
June 4th, 2010 at 6:11 pm
When you’re using the rounded rectangle tool, on the top left of photoshop there should be three options for the type of selection you’re making. My guess is that you have ‘paths’ selected. Try setting it to ‘Shape Layers’ or just fiddling with those selection options (there should be three), and see if that works.
Hopefully that’s on the right track. I’m not sure of CS5′s interface because I’m still on CS3.
Let me know how it goes
[Reply]
wow, nice! Good photoshop lecture. Thanks!
[Reply]