Quick Grungy Poster

Feb 28th in Designing by Fabio
In this tutorial, I will show you how to create a sort of grunge poster. We will learn how to make some elements look a bit dirty, create textures, and add some depths to the elements using shadows and blend modes.

Author: Fabio

I am a Brazilian designer living in Porto Alegre (south of Brazil). In 2003, I founded a web design studio called ZEE, with Fabiano Meneghetti, an architect and friend of mine. It's a small studio now, with 4 people working basically with web.

Step 1

Create a new document. Fill the background layer with a dark brown.

Step 2

Set the background color to black and the foreground color to white. Select the background layer and go to Filter>Texture>Texturizer.

Step 3

Select the Horizontal Type Tool (T) and type PSD. Then Select the Rectangle Tool (U) and create some shapes like the image below. After that, group the PSD text and the rectangles. Rename the group to "white lines."

Step 4

Rotate the group like the image below.

Step 5

Using the Pen Tool (P), create some shapes to fill the gaps before the P, the S, and the D. Make sure that these shapes are beneath the "white lines" group. Use yellow for the first shape, red, for the second, and blue for the third. After that, group these layers and name the group "colors."

Step 6

If you use Photoshop CS3 convert the yellow, red, and blue shapes to Smart Filters and go to Texture>Texturizer again. Apply the filter to all three shapes. If you don't use the CS3 version, just apply the filter.

Step 7

Now select the white lines and using the Layer Styles, select Drop Shadow. After that put the PSD text layer in front of the lines.

Step 8

Double-click on the PSD text layer and in the Layer Style box, select Drop Shadow This time let's make a bigger and stronger shadow. After that, click with the right button of the mouse over the text layer and select Create Layer. That command will create a layer only with the shadow. Then go to Layer>Layer Mask>Reveal All and delete some parts of the shadow that go above the white lines. Make the text and the lines be the same.

Step 9

Create a new layer and name it "dirty." Change the Blend Mode to Color Burn. Select black for the background color and a white for the foreground color. Go to Filter>Render>Render Clouds.

Step 10

Hold the Command Key (Mac) or Control (PC), and click on the thumbnails of the layers, which will create selections from the layers. With all white objects selected, create a new layer and fill the selection with white. After that go to Texture>Texturizer...

Step 11

Select the white objects again and create a new layer. Then go to Filter>Render>Render Clouds. After that go to Image>Adjustments>Levels and add more white to the clouds.

Step 12

Now go to Image>Adjustments>Hue/Saturation. Select the colorize option and change move the sliders until you get a beige color.

Step 13

Select all layers and group them. With the group folder selected go to Layer>Add Layer Mask>Reveal All. Now select some grunge or dirty brushes and start deleting some parts of the image. You can get amazing brushes at http://www.brusheezy.com/brushes

Step 14

Using the Horizontal Text Tool (T), create the word TUTS. Rotate it to the same angle as the other text, perpendicular to the lines. And you can repeat the Texturizer filter as well.

Conclusion

You can use this technique in lots of different projects, like logos, posters, and Web site headers, for example. The most important thing, again, is to play with the tool and change some values to see what happens, like with the Render Clouds Tool. This time we use that filter to create stains in our design, a totally different approach from when we used it to create lighting effects.


Enjoy this Post?

We'd love your vote!

User Comments

( ADD YOURS )

  1. Arik February 28th

    That’s actually quite a nifty concept you got there…I like what you do to the text and the colors.


  2. Evan Rogers February 28th

    Nice tutorial. Check out iso50 for better examples of this type of style.


  3. khaled February 28th

    Nice and clear!


  4. Jim February 28th

    Reminds me of Scott Hansen’s work


  5. knife geek February 28th

    sweet use of texture. It always surprises me how the simple tools in photoshop that I’m already familiar with can be used to do things I never imagined.


  6. Aloke Pillai February 28th

    Cool stuff!

    Keep Rocking!

    Aloke Pillai


  7. Millz February 28th

    Very good concept and i can see myself recreating that in somewhat a different approach with the same output but very nicely done!


  8. giackop February 28th

    wow!! fabio you are such an inspiration!! thanks..


  9. Natty P February 28th

    ISO50 Eat yur heart out!!!!!! Nice one Fabio, Scott Hansen won’t be happy though!


  10. craZed February 28th

    thanx a lot !


  11. Zach February 28th

    cool, i like the textured look. im going to try to incorporate this effect into my next website header.


  12. Craig S February 28th

    Awesome tut!

    The random, light-brown grunge brushes look a little out of place, but overall it’s great.


  13. Colin February 28th

    my co worker has a wallpaper just like that! instead it says ‘helvetica’. boy it’s a hoot!


  14. firewalker February 28th

    Beautiful and dirty! Like it! :)


  15. Brian February 28th

    I never ceases to amaze me how great the cloud filter can be when used in the right situations.


  16. Sergio February 28th

    I liked it overall but the word “tuts” is too clean (too much white). I like the retro kinda style but definitely not the grunge part (and I’m a huge fan of grunge).

    Love your site thou.


  17. Jonathan February 28th

    Looks the best at step 6.


  18. Andrew D February 28th

    Wow that is awesome!


  19. Adioz February 28th

    wow now we really start copying artist’s styles.


  20. Andrei Constantin February 28th

    always liked blend modes


  21. Rosano February 28th

    I saw something like this on ILT

    http://ilovetypography.com/img/wallpapers/366-helvetica_1680.png


  22. Daniel February 28th

    Very nice and clear Fabio, i definitely love it. Great tutorial !


  23. honso February 28th

    omg, thats amazing! really really nice! thank you fabio.

    btw, fabio sei italiano?


  24. Salva February 28th

    Fabio 4 president


  25. GeminiArt February 28th

    nice colour and style ;) good job


  26. Lamin Barrow February 28th

    Well done.


  27. Shane February 28th

    A very interesting tutorial, as always. Thanks - I’ll be trying this one out tonight. :)


  28. kuldeep February 28th

    Simply awesome!!


  29. Constantin Potorac February 28th

    Hey… pretty cool job :p I love it


  30. Frippe February 28th

    Very cool tutorial.

    But is it only me that is missing 2 pictures? At step 8 and step 9.


  31. bweb February 28th

    Wow, soo cool. Really thanks for this tut.


  32. Markus February 28th

    OMG, it looks soo real!! :D *Applause*


  33. BogDinamita February 28th

    yours looks way better than what I got


  34. Mark Abucayon February 29th

    I love the texture very neat and clean- great job right there.


  35. Paulo Sales February 29th

    Another very good concept tutorial…
    final result is awsome.
    Very well explained, congratulations to the creator.

    psdtuts rules…


  36. Markus February 29th

    I cant see the pictures in step: 7 8 9? Can someone tell me why? ;)


  37. Chris February 29th

    Good effect in theory, the shadows are a bit off.


  38. Fabio Sasso February 29th

    I have that helvetica wallpaper too, it’s really beautiful, I was using it here so I tried to create a design like that. I think that’s a good way to learn how to do some effects. Of course the original is always better :).

    @Honso. Im Brazilian, that explains my poor english ;)

    and thank you all for the comments…


  39. sean steezy February 29th

    seriously psdtuts is pumping out tutorials faster than I can keep up. this is crazy. crazy awesome.


  40. foo February 29th

    Another ripoff from an existing artist. C’mon guys, this used to be a great site. Do something new.


  41. god056 February 29th

    they’re not ripping off ideas… that’s what you call inspiration. getting ideas from others and recreating it to understand the concept better.

    even if i can’t convince you on that, rip off or not, they still make it better a notch or two. sometimes even WAY better


  42. Terry February 29th

    I agree. Plenty of techniques are learned just by trying to do what you’ve seen before.


  43. Joefrey Mahusay February 29th

    I like it! great job fabio


  44. therapix February 29th

    Awesomeness…..


  45. Ricardo February 29th

    Very nice effect!


  46. Neil February 29th

    Some of the pics are not loading :/


  47. Katalog Stron March 1st

    For me: great!


  48. b00m March 1st

    like it


  49. Isaac March 1st

    Amazing! Images missing on steps 8 and 9 though. I think this is *much* better than the Helvetica wallpaper - better texture, shadow and it works better with a shorter word!

    Keep them coming!

    Isaac


  50. Coconut Pete March 1st

    yea steps 8 and 9 are missing pics but other than that excellent tut.


  51. Cheloju March 1st

    Muy interesante, veamos como sale jajaja


  52. Jaakko March 1st

    I cant add that texturizer in first picture. Im working on CS3 what should i do? ive tryed everything cant get further this is amazing tut!


  53. Lazi March 2nd

    Thanks! F* Great Tutorial! :)


  54. xcarpatti March 2nd

    xcellent tutorial, tnxs


  55. Nate March 2nd

    Working on this nice tutorial but when I get to step 8 I kinda get mixed up. It tells me to right click my text layer and click create layer. Ive tried clicking the actual layer the layer in the layer palette and check the whole menu and no where do I see create layer. Anyone else who has done this please let me know.

    Thanks a bunch for the help and the awesome tut’s


  56. skut March 2nd

    nice and simple, another great tutorial :)
    *pic 8 & 9 missing


  57. Elke March 3rd

    Thanks so much for this great tutorial! I used it to make my site’s header… Looks fab! :-)


  58. Digital Fake March 3rd

    Thats kick ass man, really like it


  59. Boska March 4th

    Nice tutorial!

    @Nate: Select the text layer, go to Layer in the menu -> Layer Style -> Create Layer.


  60. Mehdi March 4th

    Nice Tutorial but pics of step 7 to 9 is missing.
    tnx


  61. Collis March 5th

    Holy moly, I didn’t even realise two images are missing. I’ve looked through my hard drive and I don’t think I even have them :-( I’ll email Fabio and see if he’s got them, sorry guys!


  62. Rohith.Sun March 5th

    simply awesome


  63. web design cheltenham March 6th

    brilliant article just about manage to complete with out the two images - i am always looking for new photoshop techniques and this has defintly helped me out. cheers


  64. Collis March 6th

    Those two images are fixed now!!


  65. Sister Curare March 7th

    It looks to me you have got inspired:

    http://ilovetypography.com/img/wallpapers/365-helvetica_1920.png

    Good Tutorial though.


  66. john man March 13th

    hey, this is great,
    thanks.
    im kind of a photoshop n00b, but it was easy to follow etc,
    im making a flyer with a similar approach


  67. DudeZilla March 14th

    AWESOME MAN >>> USED IT IMMEDIATELY!!!!


  68. Protestboarder March 14th

    Wow Great Tutorial!
    Tried it at once. Had some trouble to get a good cloud render. They were all messed up.
    What Font is used in this Tutorial?

    Keep it up!


  69. [C]antwo March 15th

    Nice Tut !!!
    I can do it!


  70. IDEAL March 18th

    ITS COOL


  71. petnos March 18th

    Thanks a lot. This is really great tutorial for me.


  72. David March 19th

    Like most tuts, you left out the most important part - the finishing touches!! In the last photo, how do you get the grungy marks (in the olive green part of the image) or the ragged edges?


  73. Andy March 19th

    Hey there, awesome tutorial.. using it for some work of a personal project now.
    the only thing that bugs me to hell is that i cannot use the texturizer filter.

    If i make a new file, say.. 500×500 pixels., fill it with any color. Then go to filters > Texture
    It’s greyed out. I cannot select it. Can anyone help me out with an answer perhaps ?


  74. RajX March 22nd

    Very sexy tut! I love the overall concept!


  75. Kajua March 27th

    This tut helped me learn a lot. I searched deviantart.com to see who else had followed this tut or done a variation and found a lot of copies. So i made my own little variation using the same concepts but instead of using textures and metal I used gradianets and photos.

    This is a lil something I did from learning how to do this tut:

    http://kajuah.deviantart.com/art/Personalize-it-81080942


  76. Jspin77 March 28th

    For the person having problem applying the texturizer effect, I had the same problem. I FINALLY figured it out though. When you create your file, there is a field called Color Mode. I had mine set to like 32bit or something. When I down graded it to 8bit, all of a sudden many more filters were available to me.

    I am a complete newbie, so I can’t go into details, but that is what got it to work for me.


  77. CHARAN March 31st

    nice..


  78. HamBoneZ April 3rd

    This is a very nice tutorial! I tried to do it on Photoshop CS 1 and I did something very nice! It gives me some idea for a next web design so thx alot to share your knowledge!

    Here is my entry

    http://img219.imageshack.us/img219/29/grungepw6.jpg

    - BoneZ


  79. Suria April 4th

    This is good stuff. Thanks.
    I’ve made a banner for my cat..
    Check it out : http://simplysuria.multiply.com/journal/item/187/ABANG_banner


  80. aronil April 10th

    That is really cool i gotta try that out :)


  81. Dave April 24th

    Wow…a lot of naysayers here. I thought it was a great tut. Don’t we learn from others? And isn’t Fabio trying to spread the wealth? Great job Fabio/PSDTUTS…Keep em coming!


  82. PSDTUTS ROCKS! April 25th

    For step 7 im getting a red X instead of the image….
    other than that YOU GUYS ROCK!!!!!!!!!!!!! nice to see people willing to share their expert skills!!! THANX!


  83. Noooosh May 1st

    It is Superb and Coooooooooooooooooooool

    Thank yOOOOOOOOOOOOOOOOu fabio


  84. moslim designer May 5th

    good tutorial

    thank you


  85. Eddie May 26th

    How did you manage to get both the texturizer and the cloud effect on the white objects? And how did you preserve the shadow on the “S” without these effects overwriting it..?


  86. Jason Ip June 11th

    Nice tutorial, will try this when I get home tonight


  87. Naro July 3rd

    This is my result for your great tutorial!
    http://naro9.deviantart.com/art/Naro09-90396022


  88. Jinsey July 4th

    my photoshop result:
    :) haha..nice tutorial
    http://img364.imageshack.us/img364/383/colorcopyqo7.png


  89. Staf July 21st

    very nice. ty. http://cs1438.vkontakte.ru/g3864311/a_95b49e40.jpg


  90. Splintz July 23rd

    Guys be aware of this new site which plagiarised several tutorials

    example being this one:

    http://www.truecg.com/index.php?option=com_content&task=view&id=65&Itemid=1

    I guess they’re pretty desperate.


  91. Mansoor July 24th

    Thanks for Posting.
    Great Tut.


  92. Danny July 24th

    Really love the effects…. But I can’t seem to find a font which looks as good., Which font did you use??


  93. keitherboo August 21st

    I used this for my band’s newest CD cover. Check it out here:

    http://keitherboo.com/images/other/hattersmadconceptcoversmall.jpg


  94. Finan Akbar August 29th

    I like it so much!!!

    More please..


  95. ims September 8th

    thank u very much !!


  96. SilenT Thug September 23rd

    cheer for dat! nice idea..
    thanks a lot….


  97. Clean Cut Media September 25th

    I like the final design touches. It’s always the little things that makes something look professional. thanks


  98. JONxBLAZE October 1st

    PSDTUTS strikes again!!! Very nice.


  99. CrL October 9th

    Fucking awesome.


  100. Dennis November 2nd

    amazing


Add Your Comment

( GET A GRAVATAR )
  • Gravatar

    Your Name November 20th

Arrow