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 Mohammad Jeprie
- Comments (77)»
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
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
when i place grunge paper texture above all layers and change its blend mode to Overlay the texture is completely hide so there is not reason to Click Layer > Create Clipping Mask when texture is already hide so please help me
Are you refferring to Step 5, step 6?
As you can see in screenshot above, the texture is not completely hidden.
ya in step 5 i place the grunge texture above all layer then change its blend mode to overlay but afterward the texture is completely hide so you explain me what mistake i do & there is no doubt that this tutorial is too good
First, the texture is maybe too light, you should use darker and grungier texture.
Second, the circle maybe too light. Use darker color. Have you opened the PSD file available above?
sorry sir for disturbing you again but same old problem happened with me when i place grunge paper texture above all layers and change its blend mode to Overlay & the texture is completely hidden so tell me what problem its this
Overlay will darken dark areas and lighten light areas. Maybe the texture is too light, so it disappear. Don’t use Overlay, try to use Multiply.
i love your tutorial,very easy 2 understand, thanks man
Nice Tut and Great Icons Thanks For The Share..
excellent job, i like the detail of this tutorial. very easy to follow
ah, finally I know how to save icon format for web.
Thanks for the detailed tutorial :)
nice one too
I may go after comments I disagree with, however I do not seek the destruction of the opinion of these with whom I disagree.
I’m just writing to make you know of the fine discovery my cousin’s princess had going through your web site. She came to understand plenty of issues, including how it is like to possess an amazing giving nature to get other people really easily learn specific complex subject matter. You really surpassed our expected results. Thank you for presenting these great, dependable, informative not to mention unique tips about the topic to Emily.
I simply desired to thank you very much all over again. I am not sure the things I might have taken care of without these basics shared by you regarding such subject matter. This has been a real alarming situation for me personally, nevertheless considering your specialized technique you solved the issue took me to cry over delight. I am just grateful for your advice and as well , believe you recognize what a powerful job that you’re putting in educating men and women through your webblog. Most probably you’ve never come across any of us.
A very nice tutorial and great icons, thanks for sharing!
as I website owner I think the subject matter here is really wonderful, thankyou for your efforts.
Hey There. I found your blog using msn. This is a really well written article. I will be sure to bookmark it and come back to read more of your useful info. Thanks for the post. I will definitely comeback.
A Practical Pregnancy Diet Plan
Hi, this blog is very usefull and i like this blog so much.i’ll share this blog on my facebook page.
You made some good points there. I did a search on the topic and found most people will agree with your blog.
wow!I think you are amazing
There are a lot of strange comments on here. People must be using SCRAPEBOXLIST.COM
Hi there, You’ve done a great job. I will definitely digg it and personally suggest to my friends. I’m confident they will be benefited from this website.
My neighbor and I had been simply debating this particular subject, he’s often in search of to show me incorrect. Your view on that is great and precisely how I truly feel. I simply now mailed him this web site to point out him your individual view. After wanting over your website I book marked and can be coming again to learn your new posts!
Howdy I am so excited I found your site, I really found you by accident, while I was searching on Digg for something else, Anyhow I am here now and would just like to say many thanks for a incredible post and a all round entertaining blog (I also love the theme/design), I don’t have time to browse it all at the moment but I have bookmarked it and also included your RSS feeds, so when I have time I will be back to read more, Please do keep up the excellent work.
Awesome tutorial. Simple, elegant, and looks fantastic.
can you also make one for hyves and linked in?
I was never good in photoshop design. I am using some other stuff like paint shop pro. I am able to get the same effect as You but not before I have seen this tutorial. Thanks so much. I am not so smart to figure it out by my self.
I was recommended this website by my cousin. I’m not sure whether this post is written by him as no one else know such detailed about my difficulty. You’re amazing! Thanks!
This web site does not show up properly on my iphone 4 – you may want to try and repair that