iPhones has been really popular since it was released, and with a massive audience developers stared creating app that can be used on this phones. But today we will create an icon, not an app I believe that an app icon can speak for itself when used and design properly.

To start, we will download a font from fontsquirrel called Ballpark, make sure it is installed on your computer.

Let’s Begin!

Open your Photosop and set the canvas to 500px by 450px.

Grab your Rounded Rectangle Tool (U) and draw the shape same as above.

Fill it with # 52433e using the Paint Bucket Tool (G).

Duplicate the layer by pressing CTRL + J and drag it on top of the layer, fill it with #FFFFFF.

This is for the top layer, right click on the layer and select Blending Options > Drop Shadow. Set the foreground color #545353, distance and size are 10px.

You’ll have something like this one.

Grab the wood texture here, drag it on the canvas. Now, hold CTRL + Left Click on the top layer and press CTRL + SHIFT + I and hit DEL.

This is what you should have.

We will use Ballpark as font, 33pt # 86290f.

For the text drop shadow, foreground color is #ffffff distance and size is 1px.

Inner Shadow foreground color is #602209 and distance, size 1px.

Create a new layer; grab your Marquee Tool (M) draw a small rectangle shape on the right side of the text.

Fill the ribbon-layer with # d30901, and grab your Pen Tool (P). Draw a triangle shape and make sure you close the path, after that right click > Make selection and press DEL.

This is what you should have, now to add more detail to the ribbon.

On ribbon layer’s blending options > drop shadow, foreground is #848383, distance and size is 5px,

Copy the colors in your gradient overlay settings.

After that, here is the gradient setting.

Stroke, foreground color is #51061a and size is 1px.

Here is the finished ribbon detail.

Create a new layer, and grab your Elliptical Marquee Tool (M), select the top part of the icon. Fill it with #ffffff.

Now, press CTRL + SHIFT + I and hit DEL to remove the excess layer. Set the hightlight layer Opacity to 22%.

We are done! This is really a short tutorial and we created everything from scratch using the basic techniques in Photoshop.

If you have other way to create this kind of icon please do so in the comments, I am all out for it J. Hope you learned something today and this can help you in your projects whether commercial or personal.

 
Sanjay is a Web Designer from Philippines, he shares tutorials about web design, web interface, and wordpress tricks on his blog.