Episode 4: Photoshopping iPhone Icons


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

Good Luck!

Twitter Digg Delicious Stumbleupon Technorati Facebook Email
This post was written by Ash Davies.

"Hi I'm Ash Davies, the founder of Photo Guides. I'm an Australian student with a passion for photography and design, and Photo Guides is my excuse to learn cool new stuff. You can also follow me on twitter."

18 Responses to “Episode 4: Photoshopping iPhone Icons”

  1. 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:

    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]

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

    [Reply]

    Ash Davies Reply:

    Glad i could help Clay :)

    [Reply]

  3. 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:

    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:

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

    [Reply]

  4. 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:

    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]

  5. 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]

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

    [Reply]

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

    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:

    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]

  8. 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:

    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]

  9. 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]

  10. 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]

Leave a Reply

Get Adobe Flash playerPlugin by wpburn.com wordpress themes