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.
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
After this you should be left with something looking like this!
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.
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.
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.
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:
STEP 5
You should now have your finished icon!
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.
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!
