Episode 4: Photoshopping iPhone Icons

By Ash Davies
August 8, 2009 from Graphic Design,Podcast

function fbredirect(url){ window.location.href = url; }
Episode 4: Photoshopping iPhone Icons [ 7:47 ] Download

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:
iphone-icon-grey-with-logo2small

Good Luck!

Related Posts

  • http://WorkingOnIt! JScud

    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?

  • http://www.photoguides.net/?fbconnect_action=myhome&userid=1&height=400&width=370 Ash Davies

    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

  • http://www.pika.me Clay Jackson

    Perfect! This is exactly what I’ve been looking for :)

  • http://www.photoguides.net/?fbconnect_action=myhome&userid=1&height=400&width=370 Ash Davies

    Glad i could help Clay :)

  • DuckTape

    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!

  • http://www.photoguides.net/?fbconnect_action=myhome&userid=1&height=400&width=370 Ash Davies

    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.

  • DuckTape

    No Problem, can’t wait for the other tutorials!

  • Mike

    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

  • http://www.photoguides.net/?fbconnect_action=myhome&userid=1&height=400&width=370 Ash Davies

    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 :)

  • Phil

    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.

  • http://iconsdepot.com/ Icons Depot

    Thanks for this great tutorial. It’s easy to follow and awesome for people who have iPhones and iPod touches!

  • http://www.photoguides.net/?fbconnect_action=myhome&userid=220&height=400&width=370 jhldesign

    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!

  • http://www.photoguides.net/?fbconnect_action=myhome&userid=1&height=400&width=370 Ash Davies

    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!

  • http://www.photoguides.net/?fbconnect_action=myhome&userid=220&height=400&width=370 jhldesign

    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

  • http://Website(optional) Liam

    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

  • http://www.photoguides.net/?fbconnect_action=myhome&userid=1&height=400&width=370 Ash Davies

    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

  • http://www.photoguides.net/?fbconnect_action=myhome&userid=534&height=400&width=370 Ashcat

    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!

  • http://www.photoguides.net/?fbconnect_action=myhome&userid=683&height=400&width=370 FikusCZ

    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?

  • MiPhone

    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…

  • http://www.photoguides.net/?fbconnect_action=myhome&userid=1884&height=400&width=370 ger225

    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!

  • http://www.photoguides.net/?fbconnect_action=myhome&userid=2441&height=400&width=370 AppDevGuy

    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.

  • Pingback: Free Apple iPad Photoshop PSD | Photo Guides

  • Pingback: Personaliza el iPad… que aún no tienes « www.albertopveiga.com

  • Pingback: Free Apple iPad PSD | icanbecreative

  • http://www.photoguides.net/?fbconnect_action=myhome&userid=3989&height=400&width=370 redchannel

    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 ?

  • http://www.photoguides.net/?fbconnect_action=myhome&userid=1&height=400&width=370 Ash Davies

    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

  • http://www.photoguides.net/?fbconnect_action=myhome&userid=5217&height=400&width=370 Korail

    wow, nice! Good photoshop lecture. Thanks!

  • http://Website(optional) Liam

    Quick Question. I tried the glass layer steps above to cut the backround (white area) out around the icon, but it still shows up. How to I get rid of that part?

    Thanks for any info.

  • http://Website(optional) Seng Zhao

    Thanks for tutorials , but how do I save this onto iPod Touch / iPhone? Reply asap please and thank you ! :)

  • http://www.photoguides.net/?fbconnect_action=myhome&userid=1&height=400&width=370 Ash Davies

    Hi Seng,

    To save it into an ipod touch or iphone you’ll have to sync it as a photo with itunes, or alternatively email yourself the image and download it on your iphone.
    Just to clarify, the tutorial is for creating an image, and not an actual icon to be used on the iPhone.

    Hopefully that helps, and happy new year!

  • http://Website(optional) 80Stevn

    Hey man, excellent job on the tutorial, I can always count on you to deliver quality tutorials. :) I just have one question though, at the end of the tutorial, it looks, like there is a oval shaped shadow at the bottom of the app icon, can you tell me how you did that?

  • Roland

    Hey Ash, i like your videotutorials and i want to watch the other episodes but i can’t find them, can you help me please?.

  • http://www.photoguides.net/?fbconnect_action=myhome&userid=1&height=400&width=370 Ash Davies

    Hi Roland, glad you like them :)
    You can see the rest of the video tutorials over in the Podcast section.
    Thanks

  • Alberto

    Thanks a lot again.. just downloaded it, will check it out and post if I run into problems :)

  • http://www.photoguides.net/?fbconnect_action=myhome&userid=9901&height=400&width=370 foxphoto2011

    Hi Ash,

    Thank you so much for making this great tutorial. I am a bit of a newbie to PS and I am using CS5.5 PS5.5. In the early part of your tutorial when you create the rounded horizontal, a new layer automatically appeared with a color adjustment. When I try to replicate what you did I simply remain on the original single layer and I can’t get the color adjustment to show up. I know you have a layer thumbnail and a vector thumbnail. Please tell me how you got the color adjustment to appear in your layer thumbnail. Thank you.

    -Frank

  • SteveJ

    Fantastic tutorial! I’m using CS5 and yesterday everything worked just as you demonstrated. I’m not sure what I’ve done, but now in the Main Glare layer, after creating the ellipse and selecting inverse, when I hit the delete key, nothing happens. Help!

  • http://bobbyjonc.tumblr.com/ Bob

    Thank you for this tutorial! I have made two logos for my personal blog.
    PhotoGuides is very helpful!

  • Lucas

    I am using a mac and very time i press delete after i selected inverse nothing happens. Please help I am eager to use this as a template for my Winterboard theme. Thank you

  • http://www.facebook.com/people/Calin-Chifor/100000438047336 Calin Chifor

    much appreciated . thank you

  • Kinglord2012

    can you do a tutorial on windows?