• Enter your image description

ios icon tutorial

In this tutorial, I will show you the simple design process of a Apple Style iOS icon and how to utilize it on a website.

Step 1

Start by creating a new document in Photoshop that’s 1024 x 1024 pixels at 72 dpi.

Screen Shot 2013-05-01 at 10.48.19 PM

Step 2

Select the Rounded Rectangle Tool and double click anywhere on the canvas. Enter a Height and Width of 1024 pixels and a Radius of 160 pixels and hit ok. Then align  your shape to the center of the canvas.

Step 3

Apply a gradient overlay to your shape.

Screen Shot 2013-05-01 at 10.51.37 PM

In this example I will be using a basic light blue to dark blue.

Screen Shot 2013-05-01 at 10.54.06 PM

The colors are (1b2a30) and (3a5a68). Once you’ve chosen your colors, hit ok.

Step 4

Select your gradient tool and open the gradient editor window. Set the gradient type to noise and the roughness to 100%. Then hit ok.

Screen Shot 2013-05-01 at 10.57.43 PM


Step 5

Create a new layer and with the new gradient select “angle gradient” and start it from the center of the screen.

Screen Shot 2013-05-01 at 11.01.14 PM

Screen Shot 2013-05-01 at 11.01.44 PM

You should end up with something like this.

Screen Shot 2013-05-01 at 11.02.40 PM


Step 6

With our new layer selected, click Image > adjustments > desaturate.

Screen Shot 2013-05-01 at 11.03.56 PM


Step 7

Next apply a gaussian blur set to 5.0 pixels.

Screen Shot 2013-05-01 at 11.04.43 PM


Step 8

Set the mode to “soft light” and the opacity to 75%.

Step 9

By this point, you should have something that looks like this.

Screen Shot 2013-05-01 at 11.07.08 PM


Create a new layer and select the “elliptical marquee tool” and make an oval towards the top of the canvas.

Screen Shot 2013-05-01 at 11.09.43 PM


Step 10

Next apply a black to white gradient like shown below.

Screen Shot 2013-05-01 at 11.14.57 PM


Step 11

Set the mode to “screen” and the opacity to “75%”.

You should have something that looks like this.

Screen Shot 2013-05-01 at 11.16.03 PM


Step 12

Now simply place your logo/icon behind this layer and it’s good to go.

Screen Shot 2013-05-01 at 11.18.12 PM


Step 13

Now the fun part, save the file as a PNG. The file MUST be named apple-touch-icon-precomposed.png. Then upload your new file to the root directory of your website (where the index.html file typically is) and you are all set.

Now when you bookmark your website on the home screen of your iOS device, you will get your awesome icon.

Ios Icon tut

ios app demo