How to make an iPhone application icon in Photoshop

STEP 1

For this tutorial I have set up a 550px x 550px canvas with a light gray background. The first stage is to select the rounded rectangle tool (shown below). Set the radius to 15px and draw yourself a square inside the canvas. You can make sure you draw only square shapes by holding the shift key.

1


STEP 2

In this step we will create the interior colour for our icon. Start by command clicking (control + click on PC) on the layer mask from your square layer created a moment ago to load the outline as a selection.

Now create a new layer by hitting cmd+shift+n (crtl+shift+n on PC). Now on this new layer – and with the selection still loaded go to Selection > Modify > Contract. I used the setting 12px.

You should now have a new selection which fits perfectly inside the square from step 1, but has been shrunk by 12px. Fill this layer with your background colour of choice!

Finally add a small shadow to the bottom of this new later by adding a new layer style gradient as shown below

2

After this you should be left with something looking like this!

2


STEP 3

Next we need to duplicate the blue layer we have just created. To do this, right click on the layer and select duplicate.

To this layer copy, apply a new ‘normal linear’ gradient as an effect later as shown below. In essence, I am gradating from the original blue, to a lighter blue at the bottom.

3

To create a light-bevel effect on the icon, we are now going to delete the bottom half of the ‘duplicate blue’ layer, to reveal the original blue layer underneath.

To do this use the elliptical marquee tool to draw on the area you wish to keep. Invert the selection using cmd+shift+I (crtl+shift+I on the PC). Once the bottom part of the layer has been selected, hit backspace to delete it.

4


STEP 4

Now we have the background of our icon, we want to add a logo or some text onto it.

Simply drag your preferred logo onto the canvas or create your text and place it to preference. I’ve used the Storm feather for my icon.

4

To make the logo or text look as if it is set into the icon we are going to apply a new layer effect. This time an outer bevel. The settings that I have used are below:

4


STEP 5

You should now have your finished icon!

6

You can present your icon in a number of ways. Below I have is a very simple description of how I have presented mine with simple reflection.


STEP 6

To achieve the below effect I have created a blue gradient background, and added a ‘floor’ in exactly the same way we added the light bevel to the icon (draw a new layer on top, use the elliptical marquee tool to remove the section that was not required.

I have then brushed in black corners at the bottom using a large black brush with 0% hardness. I have also added a large white brush of white behind the logo to provide it with an outer glow. Ive blended these into the composite by playing with the opacity settings on the layers panel.

7

Finally, the reflection has been added by selecting all of the layers that make up the logo, right clicking and selecting merge. This flattens the layers into 1.

This layer is then duplicated, and flipped vertically edit > transform > vertical and dragged into position.

To achieve the faded effect, apply a new gradient layer style from blue (use the eye dropper tool to select the blue you want) to clear. Finally set the opacity to around 45%.


Extra: Using your icon

Once you have created your iPhone icon, you will be able to use it in your application by doing the following:

- Exporting it as a PNG and name it Icon.png (note the capital I of Icon).
- Place the  into the root directory of the project to use it as the applications default icon!

By Dave Kelly

A native of Cornwall, Dave was forced to flee his homeland due to a constant struggle in finding signal for his beloved iPhone. Luckily he ended up in Bath, and so it was that Storm came to be.

As well as leading the team at Storm, Dave sits on the Creative Bath steering group, helps organise BathSPARK and is on the organising committee for the first ever Bath Digital Festival. He is also a mentor and adviser to a number of startup tech companies.

dave-kelly.co.uk →

31 comments

  1. If your having problems grabbing the selection you can always use the wand tool (w) – and click the first white box. Once you have selected it create a new layer and shrink the selection as described.

    Also make sure you dont miss the ‘fill the selection with a background colour of your choice’ step, if you dont do this, you wont be able to apply a gradient!

    Good luck & email me with anything you are finding tricky: dave@ (see url)

  2. Nice.

    The ideas are very useful… since I don’t have PhotoShop I am trying to replicate using PaintShop 9 which I am more familiar with.

    Thanks for posting.
    -Alex

  3. Great tutorial, very informative – the best iphone app icon tutorial online (I have looked).
    Congratulations and thank you!

    Rob

  4. Step Two Problem…. I did everything correctly but when it comes to modify i cant seem to go on it I goto Select but modify u cant press for some reason Please help. Nice Tutorial btw

    Adobe Photoshop CS5

  5. Apparently, it is not necessary to name your icon “Icon.png” with a capital I. Seems to work perfectly well with just “icon.png”. Not to mention, you can specify the icon’s name in your project’s .plist settings file.

  6. @Vermillion It may well be that since this was originally posted in 2009, you no longer need the capital. And yes, you can now edit name in a .plist :-)

    @tom & @anton – Thanks!

  7. when your feathering the corners or the icon set it to 60px this makes it the same as the default icons on the device

  8. i need help on step 3. when i try to delete the elliptical selection, the entire layer gets deleted.

    just figured it out. you need to first rasterize the layer.

  9. actually, no, that doesn’t quite work either. now i’m getting the bevel effect on the bottom part of the layer copy.

  10. I also think after having another look that the icon is a little to square at the edges for the iphone style apps, I find instead of 15px it is best to use 35px or 45px.

    Just adds a more rounded look

  11. Spent 2 hours on this and still cannot get an image to show up in the icon. “Simply drag your preferred logo onto the canvas or create your text and place it to preference. I’ve used the Storm feather for my icon.” What’s the trick???

  12. Great article, i’ve been looking at using this kind of iPhone app logo on our website but have been struggling with getting the gradient just right. Thanks for the info!

  13. Thanks alot for the tutorial, I am currently designing my own custom icons and I always need a reminder in case.