Create your own social network icons

There are thousands of icons for social network that you can use for your project but why you don’t try to create your own? Here, you will learn how to make your own social network icons, simple and fast! Just follow the guide!

Create a new document in Photoshop. You are free to choose whatever dimensions you see fit, I personally chose 200 x 200 pixels for this tutorial. Let the rest of the settings on their default values.

markedlines

Fill the background with a color of your choice (I used #c5c5c5) and add some noise (FiltersNoise Add Noise…).

markedlines

Create a new Layer and get the Rounded Rectangle Tool. Draw an 115 x 97 pixels shape.

markedlines

Rasterize the shape to type (LayerRasterize Type) and apply the follower layer styles (Layer Layer StylesBlending Options…):

Bevel and Emboss: Highlight Mode Color: #ffffff, Shadow Mode Color: #000000

markedlines

Gradient Overlay: First Color: #3b5998, Second Color: #719efc

markedlines

Stroke: Color: #ffffff

markedlines

Result

markedlines

Then, get the Horizontal Type Tool and write the “f” (you can download ChunkFive font here).

Settings:

markedlines

Result

markedlines

Apply the follower layer style (Layer > Layer Styles > Blending Options…):

Outer Glow: Color:#ffffff

markedlines

Result

markedlines

Create a new Layer and get the Pen Tool.

Settings:

markedlines

Make a path like this:

markedlines

Left click on “Work Path” and select Fill Path…

Fill Path: Color: #ffffff

markedlines

Then, set the opacity of this layer to 15%.

Result

markedlines

In the same way, you can make several icons.

markedlines

Download Facebook Icon (.png, .psd) | Download All Icons (.png, .psd)

Posts from around the web
Written by: Stratos Iordanidis

Stratos Iordanidis is a 16 years old Web Designer. Works with Photoshop, Wordpress and HTML/CSS everyday! Check out Stratos' Portfolio or follow him on Twitter.

8 Comments

  1. Nice! :-)

  2. A nice article. Well done!

  3. Excellent!!

  4. Good Stuff.. :)

    • Stratos Iordanidis

      Thanks!

  5. Thanks.

  6. You’re in http://www.socialbookmarkingicons.com ;)

    • Stratos Iordanidis

      Thank you!

Leave a Reply