Episode 4: Photoshopping iPhone Icons

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?

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

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

Glad i could help Clay

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!

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.

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

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

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

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.

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

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!

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!

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

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

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

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!

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?

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…

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!

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.

[...] some of you will find a use for it. You might also like to check out this tutorial for Photoshopping iPhone Icons. Enjoy! Share This post was written by Ash [...]

[...] Apple iconos, fondos de pantalla, etc. Para aderezarlo un poco, también nos dejan un interesante video-tutorial para que puedas hacerte tus propios [...]

[...] some of you will find a use for it. You might also like to check out this tutorial for Photoshopping iPhone Icons. [...]

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 ?

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

wow, nice! Good photoshop lecture. Thanks!

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.

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

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!

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?

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

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

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

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

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!

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

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