How To Create A Grungy And “Sticky” Icon With Photoshop – Free Icon Set Available!

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 (87)»

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.
Create A Grungy And Sticky Icon With Photoshop

Download Source

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 And Sticky Icon With Photoshop

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.
Create A Grungy And Sticky Icon With Photoshop

Step 1

Add layer stye: Drop Shadow and Stroke (Layer > Layer Style > Drop Shadow and Layer > Layer Style > Stroke). Use settings shown below.
Create A Grungy And Sticky Icon With Photoshop
Create A Grungy And Sticky Icon With Photoshop
Create A Grungy And Sticky Icon With Photoshop

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.
Create A Grungy And Sticky Icon With Photoshop
Create A Grungy And Sticky Icon With Photoshop

Step 3

Create another circle, same size and layer style as previous one (or duplicate it). Move it to top right corner.
Create A Grungy And Sticky Icon With Photoshop

Step 4

Click Layer > Create Clipping Mask. This step will cut the second circle and put it inside first circle.
Create A Grungy And Sticky Icon With Photoshop

Step 5

Download paper grunge texture from deviantart. Place it above all layers and change its blend mode to Overlay.
Create A Grungy And Sticky Icon With Photoshop

Step 6

Click Layer > Create Clipping Mask. The texture will be inside the circle.
Create A Grungy And Sticky Icon With Photoshop

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.
Create A Grungy And Sticky Icon With Photoshop

Step 8

Again, click Layer > Create Clipping Mask.
Create A Grungy And Sticky Icon With Photoshop

Step 9

Hold down ctrl key and click all layers to select them. Hit ctrl+G to place all layers inside a group.
Create A Grungy And Sticky Icon With Photoshop

Step 10

Using Polygonal Lasso Tool to select a section of the circle as shown below in the image.
Create A Grungy And Sticky Icon With Photoshop

Step 11

Press ctrl+shift+I to reverse the selection.
Create A Grungy And Sticky Icon With Photoshop

Step 12

Click Add Layer Mask icon. This operation will add a layer mask to the group and it will hide unselected areas.
Create A Grungy And Sticky Icon With Photoshop

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.
Create A Grungy And Sticky Icon With Photoshop

In Photoshop, drag logo image to our icon file.
Create A Grungy And Sticky Icon With Photoshop

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.
Create A Grungy And Sticky Icon With Photoshop

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.
Create A Grungy And Sticky Icon With Photoshop

Step 16

Add layer style Stroke to the logo. Use the settings shown below.
Create A Grungy And Sticky Icon With Photoshop

Here’s what we have so far.
Create A Grungy And Sticky Icon With Photoshop

Step 17: Save as Transparent PNG Icon

Now we need to remove empty areas around the icon. Click Image > Trim and click OK.
Create A Grungy And Sticky Icon With Photoshop

Click eye icon in front of “Background” layer to hide it. Now, we have a transparent icon.
Create A Grungy And Sticky Icon With Photoshop

Step 18

Click File > Save For Web & Device, choose Preset PNG-24 with Transparency. Click save to create a transparent PNG icon.
Create A Grungy And Sticky Icon With Photoshop

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.
Create A Grungy And Sticky Icon With Photoshop

Author: Mohammad Jeprie

Mohammad Jeprie is a writer from Indonesia. He loves to share his design skill by writing tutorial in various blog. When he is not too busy, he shares free design resources in PSDfreemium. Don't forget to say hi to him in Twitter.

website design and development

87 Comments

  1. Nikola Lazarevic

    Lovely icons, good tutorial. Nice explained. Thanks

  2. Ian Patrick Buss

    Thats a pretty neato technique!!!!! I was always wondering how to do those folds! Sick icons though!

  3. La Trucoteca

    The icons are very cool and the tutorial is fantastic!
    The grunge effect is awesome :)
    Thank you!

    • jeprie

      I agree. I have no idea why but grunge effect is always awesome.

  4. Jan Cantor

    Wow. Really nice icons, and tutorial. Well explained.

  5. Smashing Share

    Nice tutorial. Simple and very straight.

  6. Lam Nguyen

    Love it! It’s the most awesome grunge social icon set ever and also the tut!

    Cheer!

    • jeprie

      Thank you. As I said earlier, grunge effect is always awesome.

  7. Antoine Gu

    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.

    • jeprie

      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.

  8. Sinfonia

    I just loved it ! the grunge effect is so awesome .. nice tut ^^

  9. Ester Liquori

    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.

  10. cooljaz124

    Nice one. I am planning to release mine soon :)

    • jeprie

      That’s great. Please write the link here so we can all see it.

  11. marbio

    Great Tutorial, thanks for sharing ;)

  12. Imon

    Awesome tutorial, thanks a lot!

  13. Free Photoshop

    get free photoshop

  14. Zaka

    Nice work man i love your type of teaching

  15. Ash Blue

    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.

  16. Greg London

    What a very informative photo shop tutorial. I loved it. I also really love the design, feel, and look of your blog. Really cool!!

  17. Herb

    I really love that, thanks for sharing this tip and pretty icon set.

  18. Web Design

    This is awesome
    thanks for a great tutorial

  19. Tj

    Suoer simple and effective,great stuff here.

  20. Abradabra

    Nice tutorial, nice outcome!

    floatingcitydesigns.com pretty sucks

  21. Gebel Scarduzio

    Download60s.com is a graphic designing website. photoshop tutorials.
    http://download60s.com

  22. TwitterBackgrounds

    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.

  23. suraj

    Nice tutorial as well as icons, really so helpful for newbies like me.
    Thanks!!

  24. Hussein

    I wish learn all thing bout PS and design :/
    I want be good designer

  25. prateek

    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

    • Jeprie

      Are you refferring to Step 5, step 6?
      As you can see in screenshot above, the texture is not completely hidden.

  26. prateek

    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

    • Jeprie

      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?

  27. prateek

    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

    • Jeprie

      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.

  28. miracel

    i love your tutorial,very easy 2 understand, thanks man

  29. Paul @ Social Icon Studio

    Nice Tut and Great Icons Thanks For The Share..

  30. garry

    excellent job, i like the detail of this tutorial. very easy to follow

  31. Dezine Weblog

    ah, finally I know how to save icon format for web.

    Thanks for the detailed tutorial :)

  32. white

    nice one too

  33. credit card processing

    I may go after comments I disagree with, however I do not seek the destruction of the opinion of these with whom I disagree.

  34. lights outdoor

    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.

  35. led outdoor lights

    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.

  36. wva

    A very nice tutorial and great icons, thanks for sharing!

  37. Beckie Rohrich

    as I website owner I think the subject matter here is really wonderful, thankyou for your efforts.

  38. laptop i5

    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.

  39. progesterone in pregnancy

    A Practical Pregnancy Diet Plan

  40. dasdasdasd

    Hi, this blog is very usefull and i like this blog so much.i’ll share this blog on my facebook page.

  41. Free Articles

    You made some good points there. I did a search on the topic and found most people will agree with your blog.

  42. healthy weight loss tips

    wow!I think you are amazing

  43. scrapebox

    There are a lot of strange comments on here. People must be using SCRAPEBOXLIST.COM

  44. Bronwyn Linnen

    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.

  45. lap band Long Beach

    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!

  46. impress a girl

    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.

  47. Arion

    Awesome tutorial. Simple, elegant, and looks fantastic.

  48. amber

    can you also make one for hyves and linked in?

  49. aktivtek.no

    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.

  50. How Many Calories For Weight Loss

    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!

  51. oxyelite pro alcohol

    This web site does not show up properly on my iphone 4 – you may want to try and repair that

Leave your comment

You must be logged in to post a comment.

-->

This website is proudly powered by WordPress, hosted by Suite48. Icons by WeFunction, KomodoMedia and DezinerFolio.
Contents and resources released under Creative Commons License.
Design and code by PVM Garage - Copyright © 2010 PV.M Garage Theme - All Rights Reserved.

HOME | ABOUT US | ADVERTISE | CONTACT US