Designing a Facebook Icon for the iPhone with Photoshop

By on iOS, Photoshop

Nowadays, the iPhone and the iPad play a big part in our life, from apps to social networking, we all make use of them. What I like about apps is that all of them have fancy and glossy icons which are populating our devices and therefore.

In this Photoshop tutorial, I will show you how to design a Facebook icon by following some easy steps.

This is what we`ll be creating…

Download the Source Files

Facebook Icon Source Files

Step 1

First step, open Photoshop and create a new document of 600x400px:

Step 2

Stylize the background by applying a blue gradient overlay (double click the first layer):

Step 3

To draw the icon, select the Rounded Rectangle Tool(U) and with a radius of 20px, draw a rectangle of 115x115px:

Step 4

Now we need to apply some layer styles…

…Pattern Overlay…

…Inner Shadow…

…Drop Shadow…

…Your button should now look like this:

Step 5

Now you need to draw a vertical line on the left side of the button while still maintaing the rounded corners. Ctrl+Click on the button’s layer thumbnail to reveal the selection.

Create a new layer and select the Rectangular Marquee Tool(M). Choose Intersect With Selection mode and draw a rectangle:

Step 6

Grab the Paint Bucket Tool(G) and paint the selection with a dark-blue color. Then, apply the next layer styles to the layer:

Gradient Overlay first…

…Pattern Overlay…

…The button should now look like this:

Step 7

Now, with the Line Tool(U), draw 2 vertical lines just next to the shape just created. Make sure to make one lighter and the other one darker than the icon, to create a nice in-depth effect.

Step 8

Now, we add the Facebook logo, which is the “f” letter using the Arial-Bold font sized at 80px.

Step 9

Stylize the text by adding some small layer styles…

…Gradient Ovelay…

…Inner Shadow…

…Inner Shadow…

…The icon should now look like this:

Step 10

Alomost done!

The last step is to give your icon the distinctive IOS glossiness.

OK, Ctrl+Click the icon main layer thumbnail in order to reveal the entire selection of the icon. Create a new layer above all of them (because all of the effects will be applied to all the elements).

Grab the Elliptical Marquee Tool(M) and in “Intersect with Selection” mode, try to create a selection like this:

Paint the selection white and reduce the layer’s opacity to 10%. You should now have a nice shiny effect which is applied to all of the elements.


The icon is now complete and ready to stand out on your Apple device. Following these simple steps, you can create any icon you want. If you have an app but don’t have an icon, simply open Photoshop and draw something…it is very easy and the result may just be outstanding!

I thank you for reading my tutorial and hope to hear your thoughts and feedback below.

Here is the finished Facebook icon: