Episode 4: Photoshopping iPhone Icons
08. Aug, 2009 
18 Comments
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 (4308)
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]