How To Create A Grungy And “Sticky” Icon With Photoshop – Free Icon Set Available!
- 6 March 2010
- Freebies, Tutorials
- This post was written exclusively for PV.M Garage by jeprie
- Comments (43)»
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.
25 Great Stock Images Plus with $100 Subscription Giveaway
Entrepreneurs that inspire you to grow your internet business
Unique Handwritten Free Fonts For Your Next Designs
A Roundup of 45 Industrial Free Fonts
55 Unconventional And Original Free Fonts For An Unique Design
How to Create a Battery Icon in Photoshop
How To Create A Magnifying Glass Icon In Photoshop
Touch The Future: Create An Elegant Website With HTML 5 And CSS3
Lovely icons, good tutorial. Nice explained. Thanks
You’re welcome. It’s nice to hear you like it.
Thats a pretty neato technique!!!!! I was always wondering how to do those folds! Sick icons though!
The icons are very cool and the tutorial is fantastic!
The grunge effect is awesome :)
Thank you!
I agree. I have no idea why but grunge effect is always awesome.
Wow. Really nice icons, and tutorial. Well explained.
Nice tutorial. Simple and very straight.
Love it! It’s the most awesome grunge social icon set ever and also the tut!
Cheer!
Thank you. As I said earlier, grunge effect is always awesome.
Great tutorial!
Anyway I think the best way to realize icons is by the use of Illustrator. Photoshop doesn’t work with vector elements so you wouldn’t get the best quality if you have to resize your work.
You should work with Illustrator to create the vector icon, and then work with Photoshop for all shadows.
Secondly, the way you create the “T” of Twitter is nice but you could create it easily by using Twitter’s logo font as: “Arista”. You can grab it for free on Dafont.com.
Well. I think for an icon with maximum size 128×128 px, Photoshop does a good job. The truth is, i’m not really good in illustrator. :)
Thanks for the info on “Arista”. Personally, i don’t use many fonts, too confusing. So, for just one character like this i prefer to trace it manually.
I just loved it ! the grunge effect is so awesome .. nice tut ^^
Hi Mohammed, nice tut indeed!
Piervincenzo, I would like to interview you for my blog, may I write you in private e-mail?
Thank you!
Ester.
Nice one. I am planning to release mine soon :)
That’s great. Please write the link here so we can all see it.
Great Tutorial, thanks for sharing ;)
you’re welcome. glad you like it.
Awesome tutorial, thanks a lot!
You’re welcome. Your tuts are also awesome.
get free photoshop
Nice work man i love your type of teaching
Glad to hear that. Thanks :)
This is a lot like an older tutorial I wrote on my old web project floatingcitydesigns.com
Glad to see you guys came up with a simple and effective way to do what I had done better.
What a very informative photo shop tutorial. I loved it. I also really love the design, feel, and look of your blog. Really cool!!
I really love that, thanks for sharing this tip and pretty icon set.
This is awesome
thanks for a great tutorial
Suoer simple and effective,great stuff here.
Nice tutorial, nice outcome!
floatingcitydesigns.com pretty sucks
Download60s.com is a graphic designing website. photoshop tutorials.
http://download60s.com
Nice tutorial :) It is great to be able to create your own icons and those grunge icons really look great. I didn’t think that it was that simple either. Thanks for sharing.
Nice tutorial as well as icons, really so helpful for newbies like me.
Thanks!!
I wish learn all thing bout PS and design :/
I want be good designer