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 at apps is that all of them has fancy and glossy icons which are populating our devices and therefore, In this to show you how to design a Facebook icon following some easy steps.
This is what we`ll be creating…
Download the 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.
Finished!
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:
You might also like…
A Round-Up of 50 Fresh Photoshop Tutorials and Techniques →
The Best 40 Photoshop Text Effects from 2009 →
49 Most Creative Photoshop Tutorials of 2009 →
50 Imaginative Fantasy Art Tutorials for Photoshop →
37 Cool Movie Poster and Text Effects Photoshop Tutorials →
29 Cool and Creative Text Effects Photoshop Tutorials →
28 Incredible Photoshop Image Manipulation Techniques and Tutorials →
33 Photoshop Tutorials for Designing Amazing Posters and Ads →
25 Beautiful & Fresh Photoshop Brush Sets for Brush Lovers →
50 Beautiful Light Effects Photoshop Brush Packs (740 Brushes) →
50 Photoshop Brush Collections – 1000s of Brushes →
40 Amazing Photoshop Brush Directories and Collections →
38 Watercolor Photoshop Brush Sets (950 Brushes) →
1000 Grunge Photoshop Brushes (40 Sets) →
