Quick Grungy Poster

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.

Keep reading with more great tutorials and articles!

Enjoy this Post?

We'd love your vote!

Plus Members

Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.

Join Now

User Comments

( ADD YOURS )

Arik February 28th

That’s actually quite a nifty concept you got there…I like what you do to the text and the colors.
( Reply )
Evan Rogers February 28th

Nice tutorial. Check out iso50 for better examples of this type of style.
( Reply )
1. Maddie December 16th
  
  Scott Hansen is amazing.
  ( Reply )
khaled February 28th

Nice and clear!
( Reply )
Jim February 28th

Reminds me of Scott Hansen’s work
( Reply )
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.
( Reply )
Aloke Pillai February 28th

Cool stuff!
Keep Rocking!
Aloke Pillai
( Reply )
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!
( Reply )
giackop February 28th

wow!! fabio you are such an inspiration!! thanks..
( Reply )
Natty P February 28th

ISO50 Eat yur heart out!!!!!! Nice one Fabio, Scott Hansen won’t be happy though!
( Reply )
craZed February 28th

thanx a lot !
( Reply )
Zach February 28th

cool, i like the textured look. im going to try to incorporate this effect into my next website header.
( Reply )
Craig S February 28th

Awesome tut!
The random, light-brown grunge brushes look a little out of place, but overall it’s great.
( Reply )
Colin February 28th

my co worker has a wallpaper just like that! instead it says ‘helvetica’. boy it’s a hoot!
( Reply )
firewalker February 28th

Beautiful and dirty! Like it!
( Reply )
Brian February 28th

I never ceases to amaze me how great the cloud filter can be when used in the right situations.
( Reply )
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.
( Reply )
Jonathan February 28th

Looks the best at step 6.
( Reply )
Andrew D February 28th

Wow that is awesome!
( Reply )
Adioz February 28th

wow now we really start copying artist’s styles.
( Reply )
Andrei Constantin February 28th

always liked blend modes
( Reply )
Rosano February 28th

I saw something like this on ILT
http://ilovetypography.com/img/wallpapers/366-helvetica_1680.png
( Reply )
Daniel February 28th

Very nice and clear Fabio, i definitely love it. Great tutorial !
( Reply )
honso February 28th

omg, thats amazing! really really nice! thank you fabio.
btw, fabio sei italiano?
( Reply )
Salva February 28th

Fabio 4 president
( Reply )
GeminiArt February 28th

nice colour and style good job
( Reply )
Lamin Barrow February 28th

Well done.
( Reply )
Shane February 28th

A very interesting tutorial, as always. Thanks – I’ll be trying this one out tonight.
( Reply )
kuldeep February 28th

Simply awesome!!
( Reply )
Constantin Potorac February 28th

Hey… pretty cool job :p I love it
( Reply )
Frippe February 28th

Very cool tutorial.
But is it only me that is missing 2 pictures? At step 8 and step 9.
( Reply )
bweb February 28th

Wow, soo cool. Really thanks for this tut.
( Reply )
Markus February 28th

OMG, it looks soo real!! *Applause*
( Reply )
BogDinamita February 28th

yours looks way better than what I got
( Reply )
Mark Abucayon February 29th

I love the texture very neat and clean- great job right there.
( Reply )
Paulo Sales February 29th

Another very good concept tutorial…
final result is awsome.
Very well explained, congratulations to the creator.
psdtuts rules…
( Reply )
Markus February 29th

I cant see the pictures in step: 7 8 9? Can someone tell me why?
( Reply )
Chris February 29th

Good effect in theory, the shadows are a bit off.
( Reply )
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…
( Reply )
sean steezy February 29th

seriously psdtuts is pumping out tutorials faster than I can keep up. this is crazy. crazy awesome.
( Reply )
foo February 29th

Another ripoff from an existing artist. C’mon guys, this used to be a great site. Do something new.
( Reply )
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
( Reply )
Terry February 29th

I agree. Plenty of techniques are learned just by trying to do what you’ve seen before.
( Reply )
Joefrey Mahusay February 29th

I like it! great job fabio
( Reply )
therapix February 29th

Awesomeness…..
( Reply )
Ricardo February 29th

Very nice effect!
( Reply )
Neil February 29th

Some of the pics are not loading :/
( Reply )
Katalog Stron March 1st

For me: great!
( Reply )
b00m March 1st

like it
( Reply )
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
( Reply )
Coconut Pete March 1st

yea steps 8 and 9 are missing pics but other than that excellent tut.
( Reply )
Cheloju March 1st

Muy interesante, veamos como sale jajaja
( Reply )
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!
( Reply )
Lazi March 2nd

Thanks! F* Great Tutorial!
( Reply )
xcarpatti March 2nd

xcellent tutorial, tnxs
( Reply )
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
( Reply )
skut March 2nd

nice and simple, another great tutorial
*pic 8 & 9 missing
( Reply )
Elke March 3rd

Thanks so much for this great tutorial! I used it to make my site’s header… Looks fab!
( Reply )
Digital Fake March 3rd

Thats kick ass man, really like it
( Reply )
Boska March 4th

Nice tutorial!
@Nate: Select the text layer, go to Layer in the menu -> Layer Style -> Create Layer.
( Reply )
Mehdi March 4th

Nice Tutorial but pics of step 7 to 9 is missing.
tnx
( Reply )
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!
( Reply )
Rohith.Sun March 5th

simply awesome
( Reply )
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
( Reply )
Collis March 6th

Those two images are fixed now!!
( Reply )
Sister Curare March 7th

It looks to me you have got inspired:
http://ilovetypography.com/img/wallpapers/365-helvetica_1920.png
Good Tutorial though.
( Reply )
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
( Reply )
DudeZilla March 14th

AWESOME MAN >>> USED IT IMMEDIATELY!!!!
( Reply )
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!
( Reply )
[C]antwo March 15th

Nice Tut !!!
I can do it!
( Reply )
IDEAL March 18th

ITS COOL
( Reply )
petnos March 18th

Thanks a lot. This is really great tutorial for me.
( Reply )
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?
( Reply )
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 ?
( Reply )
RajX March 22nd

Very sexy tut! I love the overall concept!
( Reply )
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
( Reply )
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.
( Reply )
CHARAN March 31st

nice..
( Reply )
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
( Reply )
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
( Reply )
aronil April 10th

That is really cool i gotta try that out
( Reply )
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!
( Reply )
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!
( Reply )
Noooosh May 1st

It is Superb and Coooooooooooooooooooool
Thank yOOOOOOOOOOOOOOOOu fabio
( Reply )
moslim designer May 5th

good tutorial
thank you
( Reply )
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..?
( Reply )
Jason Ip June 11th

Nice tutorial, will try this when I get home tonight
( Reply )
Naro July 3rd

This is my result for your great tutorial!
http://naro9.deviantart.com/art/Naro09-90396022
( Reply )
Jinsey July 4th

my photoshop result:
haha..nice tutorial
http://img364.imageshack.us/img364/383/colorcopyqo7.png
( Reply )
Staf July 21st

very nice. ty. http://cs1438.vkontakte.ru/g3864311/a_95b49e40.jpg
( Reply )
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.
( Reply )
Mansoor July 24th

Thanks for Posting.
Great Tut.
( Reply )
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??
( Reply )
keitherboo August 21st

I used this for my band’s newest CD cover. Check it out here:
http://keitherboo.com/images/other/hattersmadconceptcoversmall.jpg
( Reply )
Finan Akbar August 29th

I like it so much!!!
More please..
( Reply )
ims September 8th

thank u very much !!
( Reply )
SilenT Thug September 23rd

cheer for dat! nice idea..
thanks a lot….
( Reply )
Clean Cut Media September 25th

I like the final design touches. It’s always the little things that makes something look professional. thanks
( Reply )
JONxBLAZE October 1st

PSDTUTS strikes again!!! Very nice.
( Reply )
CrL October 9th

Fucking awesome.
( Reply )
Dennis November 2nd

amazing
( Reply )
curious November 25th

don’t u think the S is little weird? why is the bottom of the S connecting with the solid line but the top isn’t?
( Reply )
narmet December 20th

Its cool
( Reply )
elearning January 4th

Thanks alot for sharing this great tutorial.
( Reply )
Jose Peiro January 9th

Nice tutorial!
This is my wallpaper 2009:
http://jpeiro.deviantart.com/art/Wallpaper-2009-108815620
( Reply )
Michael January 21st

Hello.. Very nice tutorial.
I have one problem though.
I cant seem to select all the white layers at once like you are suppose in step 9. I can only select one at a time, and that is making it dificult to make a new layer with all the white objects in it.
Help?
( Reply )
rob January 28th

the letters look like you took a piss on them. this tutorial suucks
( Reply )
1. Not Rob March 6th
  
  ^^ Obviously a comment made by somebody with
  the maturity and intellect of a 10 year old. Go Rob!
  ( Reply )
va February 7th

its cool
( Reply )
va February 7th

its cool keep trying for new ideas i want to make a similar one.
this is what i was looking for thanks a lot
( Reply )
pAnDoRa February 15th

really cool tutorial! thanks fabio!!!
( Reply )
Raj February 19th

Awesome tutorial, how do you find the time to work and share your knowledge like this. Amazing. Thanks
( Reply )
danielle March 4th

great tutorial, love it…
( Reply )
photo and photoshop April 6th

WOW i like this tutorial very much
awesome and very easy to follow! Good job
( Reply )
Shad April 6th

This is awesome!. Does anyone know how to create this in either Photoshop or Illustrator? I’ve been looking for a TUT on this for ever and cant find anything. Can anyone help?
http://behance.vo.llnwd.net/profiles/72589/projects/89817/725891209949179.jpg
( Reply )
CgBaran Tuts April 21st

Great tutorial
( Reply )
Ditiset April 24th

hee! your tutorial is really great, only I’ve this one problem, every time I draw an rectangle, it has an thin black line as his contour. How can i shut this off? in illustrator it’s quiet easy but I’m having problems with it in photoshop, help!!!
( Reply )
option May 7th

That’s Great. Simpl anf fastly.
Good Job.
( Reply )
alael May 14th

nice
( Reply )
DrGonzo June 23rd

Thanks man, my end result looks perfect. Great tut.
( Reply )
MiraNL August 14th

Thank you for this amazing tutorial. Always love to recreate a tutorial and then give it my own twist and I did. Unfortunately I couldn’t find the tutorial anymore to show you my results, but finally I’ve found it again.
I have created a set with a Criminal Minds twist.
http://www.flickr.com/photos/miranl/sets/72157621840438773/
( Reply )
kate November 5th

i got stuck at the pen tool. i’m a tool who doesn’t know how to use it. :-/
( Reply )
Steve November 21st

hello. i am a art student and so I am looking for inspiration. I like many posters in these tutorials as well as posters real posters I see on the street. My question to the “Professionals” how do I use what I see including the techniques and make them my own design.
( Reply )
Md. gulzar December 5th

It’s really has a great techniques…………..nice concept
( Reply )
MUFFIN18 December 9th

WAS GOING SO WELL. STOPPED IN STEP 5. I DO THE SHAPE AND WHEN I COME TO FILL IT WITH A COLOR THE WHOLE THING CHANGES. PLEAS HELP.
( Reply )
the heart of the ledar ~ January 2nd

wow .. wow .. wow
it’s nice lesson
I swear that I liked the lesson
thank thank u ~
<3
( Reply )
the heart of the ledar ~ January 2nd

Hi I forgot something ^ ^ ”
http://www.flickr.com/photos/41444652@N08/
ENJOY
( Reply )
Mike January 4th

Step 1 should actually be: “Find another designer to blatantly rip off”
( Reply )
TheShadow January 13th

Great Tutorial
( Reply )