This tutorial will teach you how to create a grungy icon and save it as a transparent png file. You can see the final result below and, as usual, you can also download the PSD source file.

Download The Complete Social Media Icon Set

We want to provide useful freebies to our readers and for this reason, apart to explain how to create your own social media icon, you can download the complete set for free.

Create A Grungy Social Media Icon

This is a tutorial for beginners, in fact it explains some basic techniques in order to realize a nice social media icon. We hope that you can find useful this post.
First of all, you need the following material to complete the tutorial: Grunge Paper Texture from omnigenus.

Step 0

Let’s start, create new file with a size of 512×512 px, 72 dpi, RGB. Activate Ellipse shape tool. shift+click to create a circle.

Step 1

Add layer stye: Drop Shadow and Stroke (Layer > Layer Style > Drop Shadow and Layer > Layer Style > Stroke). Use settings shown below.

Step 2

In Layers panel, right click on the small “fx” icon at the end of circle layer and choose Create Layers. With this trick you can create the layers for the style, separating them from their layer.

Step 3

Create another circle, same size and layer style as previous one (or duplicate it). Move it to top right corner.

Step 4

Click Layer > Create Clipping Mask. This step will cut the second circle and put it inside first circle.

Step 5

Download paper grunge texture from deviantart. Place it above all layers and change its blend mode to Overlay.

Step 6

Click Layer > Create Clipping Mask. The texture will be inside the circle.

Step 7

Create a new layer (ctrl+shift+N) and with the Gradient Tool draw a white to black gradient. Change layer’s blend mode to Multiply.

Step 8

Again, click Layer > Create Clipping Mask.

Step 9

Hold down ctrl key and click all layers to select them. Hit ctrl+G to place all layers inside a group.

Step 10

Using Polygonal Lasso Tool to select a section of the circle as shown below in the image.

Step 11

Press ctrl+shift+I to reverse the selection.

Step 12

Click Add Layer Mask icon. This operation will add a layer mask to the group and it will hide unselected areas.

Step 13: Add Twitter’s Logo

So, we’ve just created a base for our icon. The next step is adding the logo of the web application. Go to Twitter and save its logo image.

In Photoshop, drag logo image to our icon file.

Step 14

For Twitter, we just need to add the “t”. So, erase “witter” text and press ctrl+T to resize the “t” of the logo.

Step 15

Activate Pen Tool. Choose shape icon from option bar and change foreground color to #4cd9ff. Carefully trace the “t” shape to redraw manually the logo.

Step 16

Add layer style Stroke to the logo. Use the settings shown below.

Here’s what we have so far.

Step 17: Save as Transparent PNG Icon

Now we need to remove empty areas around the icon. Click Image > Trim and click OK.

Click eye icon in front of “Background” layer to hide it. Now, we have a transparent icon.

Step 18

Click File > Save For Web & Device, choose Preset PNG-24 with Transparency. Click save to create a transparent PNG icon.

Conclusion

Our icon is flexible, we can use it for adding many logo: Facebook, Twitter, MySpace, LinkedIn, anything. All you have to do just add a character or the logo inside it. If you have other nice idea on creating icon, please share it in comment form below. Don’t forget: we love our reader, along this tutorial we will give you a free set of icon and its raw PSD file. Click here to download.

Go to Source