Image preview: Awesome Grunge Text Effect

Awesome Grunge Text Effect

This tutorial will show you how to create an awesome grungy text effect. The effect can be used to liven up your website layouts, but can also provide a good way to display logos and other graphical elements alone.

Read More... 68 comments

Final Image:

Here is the final image that we’ll be creating:

mouldtextfinalthumb Awesome Grunge Text Effect

Step 1:

Open up your background image. For this particular example I’ve chosen this lovely example of a mouldy wall.

mouldtext19 Awesome Grunge Text Effect

Step 2:

Go to image > adjustments > desaturate to grayscale your image. Then go to adjustments > brightness/contrast and reduce the brightness to -100, and contrast to -90.

mouldtext2 Awesome Grunge Text Effect

Step 3:

Now I want to add some text to the center of my document. An easy way to do this is to drag from one edge of your document to the other using the horizontal type tool. Then simple align any text that you’re going to type to center. I’ve chosen a nice larger, bold Tahoma font, mostly because it matches my logo.

mouldtext3 Awesome Grunge Text Effect

Step 4:

Next go to layer blending modes, and select an inner shadow, inner glow, and gradient overlay with the settings shown below. The outcome will look something like this:

mouldtext4 Awesome Grunge Text Effect

mouldtext4a Awesome Grunge Text Effect

mouldtext4b Awesome Grunge Text Effect

mouldtext4c Awesome Grunge Text Effect

Step 5:

Open up your original mould image again and paste it onto a new layer above your text layer. Make sure that you resize it to be roughly the same width as your text.

mouldtext5 Awesome Grunge Text Effect

Step 6:

Now hide this new mould image layer to reveal the text underneath. Select your text layer. Use the magic wand selection tool to select around the text, and also the areas within the text (the gaps within the P, D and A). With your selection in place go back to your new mould image layer. Go to layer > add layer mask > hide selection. This will hide the area around your text, meaning that your mould image now is in the shape of your text.

mouldtext6a Awesome Grunge Text Effect

mouldtext6b Awesome Grunge Text Effect

mouldtext6c Awesome Grunge Text Effect

Step 7:

Change your mould imagery layer blending mode to ‘hard light’ and reduce it’s opacity to 50%.

mouldtext7 Awesome Grunge Text Effect

Step 8:

I now want my finished text complete with effects/textures to be on one easy to edit layer. I can’t merge layers down to achieve this as it will mess up some of my layer styles. Instead I simply hide my background layer and go to layer > merge visible.

mouldtext8 Awesome Grunge Text Effect

Step 9:

Now duplicate your merged text layer. Move your duplicate layer beneath the original and use edit > transform resize to resize your duplicated text layer to about half the size of the original. Position this below the ‘PSD’ part of your original larger text. Duplicate the smaller text layer and position this about the ‘FAN’ part of the larger original. Resize a tiny bit where necessary to get it to fit nicely above the letters.

mouldtext9 Awesome Grunge Text Effect

Step 10:

Repeat this resizing technique, positioning the smaller text below the PSD of the bottom text, and above the FAN of the top text.

mouldtext10 Awesome Grunge Text Effect

Step 11:

Keep repeating this until you can’t go any smaller. You will need to magnify in to work with the ultra small text after repeating this a few times. Finally go to layer > merge down and merge all of these text layers into one single layer.

mouldtext11 Awesome Grunge Text Effect

Step 12:

Now create a new layer above your text layer and make a large custom shape that covers most of your text. It’s important that the custom shape allows much of the text through, despite almost being the same size. I’ve made the shape pink in the example below just so that you can see it more clearly.

mouldtext12 Awesome Grunge Text Effect

Step 13:

Rasterize your custom shape layer and select around the shape using the magic wand tool. Then hide the custom shape layer and go back to your merged text layer, selection still in place.

mouldtext13 Awesome Grunge Text Effect

Step 14:

Then go to image > adjustments > hue/saturation. Make the hue -10, saturation +20 and lightness -10. The outcome should look like the example below:

mouldtext14 Awesome Grunge Text Effect

mouldtext14b Awesome Grunge Text Effect

Step 15:

Duplicate your text layer. Go back to the original layer underneath the duplicate and go to image > adjustments > brightness/contrast. Reduce brightness to -100 and up the contrast to +100. This will make the text completely black. Then using the arrow keys on your keyboard to move the layer down 2px and right 2px. Duplicate this layer and do the same. Keep repeating this until you have a kind of 3d shadow effect coming from the top text layer, which is still in tact. Finally merge all of these black text layers into one.

mouldtext15 Awesome Grunge Text Effect

Step 16:

Now go to the layer blending options for this ‘black text’ layer and apply a white stroke, size=1, opacity=6%. You should get something like the outcome below:

mouldtext16 Awesome Grunge Text Effect

mouldtext16b Awesome Grunge Text Effect

Step 17:

Now paste onto a new layer an image of some sticky tape. Select the white background using the magic wand tool and delete it. Resize and move the tape to an appropriate place and reduce the layer’s opacity to 25%.

mouldtext17 Awesome Grunge Text Effect

mouldtext17b Awesome Grunge Text Effect

Step 18:

I wanted to add a little something to the background of my image, so I grabbed an awesome image of a paint splatter. Credit goes to Didi90, and the original image can be found here: http://www.sxc.hu/photo/906249. I pasted this paint splatter onto a new layer below my text layers, but above my original mould background.

mouldtext18 Awesome Grunge Text Effect

And we’re done!

To blend the splatter image nicely I simply set the layer’s blending mode to ‘multiply’. I hope that you found this tutorial useful, and as always would love to see people recreate my work! Please click the image below if you would like to download the full sized version free!

mouldtextfinalthumb Awesome Grunge Text Effect

About the Author: Tom is the founder of PSDFAN. He loves writing tutorials, learning more about design and interacting with the community. On a more interesting note he can also play guitar hero drunk with his teeth.

68 Awesome Comments: Leave Your Comment

  1. User GravatarRaj 1st July 2008

    nice tutorial Tom :) Thanx 4 sharing!

  2. User GravatarTom 1st July 2008

    Thanks Raj :) I’m glad that you enjoyed it.

  3. User Gravatarnetridge 2nd July 2008

    nicely done work, thank for sharing it came out pretty good.

  4. User GravatarTom 2nd July 2008

    Thanks Netridge! I’m glad that you found it useful.

  5. vimmy negi 3rd July 2008

    nice man good tutorial

  6. Teresa 3rd July 2008

    Thanks!!!!Nice work!! That’s what I am looking for

  7. User GravatarTom 3rd July 2008

    Thanks Vimmy Negi and Teresa! It’s great to know that people are finding these techniques useful!

  8. User GravatarPSDFAN a Success! - psdfan.com - 18th July 2008

    [...] Awesome Grunge Text Effect [...]

  9. MikeL_zO! 22nd July 2008

    wow! i really like the tut.. it’s really cool man! \m/
    but i wanna ask something Tom.. hope you won’t mind.
    how to make that signature below an image? or the signature of the person who does the tricks in the picture? any site you can suggest? thanks man! keep on posting cool tutorials! :)

  10. User GravatarTom 23rd July 2008

    Thanks MikeL_zO. I’m glad you enjoyed the tut. I definitely don’t mind you asking stuff :) Would you mind posting an example of what you mean though, perhaps you could comment in my suggest a tutorial post, and I’d be happy to write a tutorial on the subject for you.

  11. Anthony 30th July 2008

    hey, awesome tutorial.
    but for some reason, it doesn’t work for me.
    i am using Adobe Photoshop CS2 and when i get to the part of the tutorial where i select the image, select the outside and create and hide the layer mask, the pattern does not show through the text. I hope someone can help me out.

  12. lUKE 2nd August 2008

    imPoSSIBLE tO Do!!

  13. Ivan 4th August 2008

    im stuck… after you hide the selection after you selected psdfan, i still have that non-dark background image behind my words and on top of the dark background

  14. User GravatarTom 4th August 2008

    Hi Anthony. The pattern shouldn’t need to show through, as it’s on a layer above your text. What you’re really doing is having the mould pattern above your text layer, and then simply deleting the area around the shape of your text, to make the mould pattern fit that shape. If the mask still isn’t working for you then hide your mould layer, select around your text, make your mould layer visible again, select that layer, then hit delete to delete the selection around your text shape.

    Ivan: Sorry I’m not sure exactly what you mean by this. If you don’t mind being a little more specific and perhaps referring to a certain step then I’d be happy to try and help.

  15. PDizzle 2nd September 2008

    Dude that is sweet.
    You are freaking awesome : )

    If only my imagination was as good as yours, hahah.
    I would never think to try something like that.

  16. User GravatarTom 3rd September 2008

    Haha thanks mate, glad you enjoyed it :)

  17. Wolfie[NoCT] 12th September 2008

    Hey, could you send me the picture of the pink flower thing?

  18. User GravatarTom 12th September 2008

    Hey Wolfie. The shape should be in your Photoshop custom shapes.

  19. Wolfie[NoCT] 12th September 2008

    Also, I’m stuck on what “Rasterize” means, could you explain that step in detail?

    (I’m using CS2)

  20. User GravatarTom 12th September 2008

    Rasterize means to convert an image or object from vector to raster format. If you want to learn more about both vector and raster then Google should bring up a ton of information for you.

  21. Wolfie[NoCT] 12th September 2008

    I tried Google but nothing really.
    I figured it out a different way though…
    Change it to “Hue” then do the Hue/Saturation to -10, 20, -10.

  22. Wolfie[NoCT] 12th September 2008

    Here’s my finished version, nothing special, just followed the tut.

    http://img529.imageshack.us/img529/9725/grungeevh5.jpg

  23. User GravatarTom 12th September 2008

    I’m glad that you figured it out. I really like your end result! It has a gamer feel to it or something. Nice work! :)

  24. Wolfie[NoCT] 12th September 2008

    Wow, thanks!
    That’s what I was shooting towards.
    I’ll be sure to go over some of your other tutorials tomorrow and try them out!

  25. Wolfie[NoCT] 12th September 2008

    Forgot to say,
    I’m going to try and add an animation into it somewhere, I’ll post the *.gif when I finish it.

  26. User GravatarTom 12th September 2008

    No problem :) I can’t wait to see the finished animation.

    If you’re interested I’m launching a Flickr group for PSDFAN really soon, it’s just been held up slightly by a hectic schedule. I’d love for you to share your works.

  27. Wolfie[NoCT] 12th September 2008

    Just added a slight animation, I didn’t want to distract the user away from the symbol/logo of my name too too much.
    I don’t think I’ve ever used Flickr, but I’d be glad to check it out and share my works with people. I have a couple of pictures from my last years Communication Technology class I worked on, and I have some from this years class too.
    Anyways, here’s the gif:

    http://img513.imageshack.us/img513/499/ggrungevk1.gif

    Tell me what you think! =]

  28. User GravatarTom 12th September 2008

    Wow! Very impressive Wolfie :) . You should definitely check out Flickr and join the PSDFAN community there once it’s all live. Nice work!

  29. Wolfie[NoCT] 12th September 2008

    I found this tut’s final product to be a very nice and fun image to make. Can you recommend your “most fun” tuts from the others on this site to me, and I’ll do those ones first.
    Or recommend me some you want to see other people’s work from the most and I’ll do them.

    Also, you want the links to some other works I’ve completed on my own, they are nowhere near as good as your products, but I liked them nonetheless.

  30. User GravatarTom 14th September 2008

    Hi Wolfie. I’m glad that you enjoyed making your piece. I’m not really sure which of my tutorials are considered the most fun, but if you browse the archives the post thumbnail images should let you know what looks best.

    I would love to see more of your work, and if you want to provide any new designs to offer as freebies here that would be awesome too! ;) If you want to send me some examples of your work you can contact me at: http://www.pushstandards.com. Thanks!

  31. Wolfie[NoCT] 14th September 2008

    I’m going to try your grungy island tutorial next I think. I definitely did enjoy making this piece, maybe I could request of you to make more text based tutorials?

    I’ll be sure to send you a couple links to my pieces through Push Standards.

  32. Azzy 27th September 2008

    thanks again….cant help but wonder what i’dve done if i didnt find this

  33. MedicatedArts 28th September 2008

    wow! impressive! but i like it more on white background! it seems with more power and personality! but awesome! … ah! and a little tip! if you click the little image preview on the layers palette holding down the command key (on mac … i dont know if crtl do it to on pc) photoshop will select al the visible things on that layer! try it its very cool!!! see ya soon! and again awesome tutorial!

  34. Nitos 30th September 2008

    Nice effect! thanks 4 sharing…!

  35. User Gravatarandy 10th October 2008

    Hi Tom, I’m a bit of an old dog always learning new tricks. I’d have done all this using an airbrush once! Thanx for the clear and very helpful instructions and for sharing your ideas to inspire others.

  36. Illusion Design 10th October 2008

    Here is my result lol http://i481.photobucket.com/albums/rr172/Alp1ne/Illusionsplash.jpg Not the same but still thx for the tut

  37. User GravatarMuhammad Salahudin 13th October 2008

    PSD file please… =)

  38. User GravatarDigiArtBali 25th October 2008

    wow.. cool… great tutorial… perfect. thanks for share.

  39. User GravatarNeri-Rwks 16th November 2008

    Awesome Tutorial i really enjoy it..
    and i kinda changed somethings a little bit.

  40. Add 20th November 2008

    Thanks, I used this tutorial for the cover of a school project(with my minor own touch to it), turned out really cool.

  41. Matt 15th December 2008

    hey heres mine http://img241.imageshack.us/my.php?image=walletlh9.jpg

    i changed it a little i am an aspiring designer and are a big fan of this site and your work

  42. User GravatarLooking Back at 2008 (Plus News and Flickr Roundup) - psdfan.com - 31st December 2008

    [...] Time for a Grungy Text Tutorial – The most popular tutorial of the 2 published at the end of June, receiving over 40 comments to date. It seems that people appreciate a good text tutorial. [...]

  43. Aky 20th January 2009

    Hey, thanks for the excellent tutorial!

  44. Deepak 30th January 2009

    Thanx a lot………….

  45. slappy99 12th February 2009

    Great tutorial. My only problem is I can’t get the 3d shadow effect to look proper.

  46. Mark 17th February 2009

    Awesome tut. Thanks Tom. Why is it I can never get my fonts to render perfectly smooth – they always seem slightly more pixelated. Your font is render perfect – my edges looked a bit jaded. I am using a Windows machine.

  47. User GravatarTom 18th February 2009

    Mark: Try turning on your anti-aliasing, this should do the trick.

  48. User Gravatarweberica 25th February 2009

    great idea :) )

  49. User GravatarStephen 15th March 2009

    Awsome!!!
    Thank you, you are inspiration to us
    who are on our PSbeginnings.
    I.m thinking on making PS related blog on my
    mather language,
    would you mind if I feature some of your tuts
    translated in my language.
    Of course I would post from where is original tut and link it to original post.

    you are doing a great stuff.
    dont stop.

  50. izah 19th June 2009

    I really do learn a lot in this tut. thanks for the good share. keep it up.

  51. User GravatarFoxumon 26th June 2009

    Thanks, nice and easy type treatment with great results :)

  52. User GravatarKaplang 10th August 2009

    really cool tutorial, thanks :)

  53. dev 31st August 2009

    really very nice and easy to understand tutorial.
    Very Nice…

    Keep It Up!!!!

  54. User GravatarWeb Design Tolworth 11th September 2009

    Superb tutorial. Very clear and simple to follow. The end result looks incredible. Thank you.

  55. User GravatarRyanJin 17th September 2009

    very inspire psd tutorial, thank you bro!

  56. User Gravatarhttp://game4home.com 22nd September 2009

    nice effect

  57. User GravatarJason 12th October 2009

    awesome tutorial! … something I can actually do lol

  58. RamirezZZ 15th October 2009

    Hi tom, i have some problems..the first one is…i cant set contrast to -90 and the first image doesnot look like yours..then another problem is with the text blending…when i fill it just like u, it doesnot looks like yours..its..mmm black&white…another and most interresting problem is: I dont know how to insert an image like a new layer…cause if i will just do it, then the inserted image will be just black&white…sorry for my english, int not my mother tongue so if u dont understand me then just write me a mail and i will record some movie and u will tell me where is the problem ok?

  59. KEVIN 6th November 2009

    I CANT UNDERSTAND YOUR RULE 6!, ive been working for 2 hours!!;[

  60. KEVIN 6th November 2009

    i cant understan rule 6!:( (working it for 2 hours)

  61. User GravatarSlaughtr Destny 16th November 2009

    Very nice mate.

    Changed mine up a bit, very new to photoshop but I enjoyed the final result. Kind of wish I didn’t merge the text layers, so I could still fix them up =/

    Heres what I came up with:

    http://i598.photobucket.com/albums/tt63/Slaughtr_Destny/Design_Art_First.jpg

  62. User Gravataroes tsetnoc 19th November 2009

    You are right, the grungy text effect is awesome. very easy to understand and practise.

  63. hima 7th December 2009

    nice tutorial

  64. User GravatarGuildford 15th December 2009

    Really great tutorial. It takes time to prepare such wonderful easy to understand tutorial.

  65. User GravatarEdit Digital Photos Easy 7th January 2010

    I like this TUT has a good grunge effx i’ll try it tomorrow tho….post some more tuts like this

  66. alexjuuhh 13th January 2010

    Step 6 doesn’t work for me, I tried everything, but all I get is the plain white text, without the mould “printed” in the text.

    Any idea why this happens? :l

  67. User GravatarAdam K. 3rd February 2010

    Amazing! Thanks for sharing these :)

  68. joe 4th February 2010

    this was amazing tutorial, i practiced it step after step with a lot of attention and the results was different but just how i wanted them. u can check the final result in link bellow
    http://i249.photobucket.com/albums/gg228/wolflovesmoon/text.jpg
    thanks a lot

Leave a Comment: