Quick Grungy Poster
In Designing by FabioStep 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 3 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 lets 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, that 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 website headers for example. The most important thing again is play with the tool and change some values to see what happens, like the Render Clouds. This time we use that filter to create stains in our design a totally different approach like when we used it creating light effects.

Comments
Leave a CommentAdd a Comment

























Arik
February 28th, 2008
That’s actually quite a nifty concept you got there…I like what you do to the text and the colors.
Evan Rogers
February 28th, 2008
Nice tutorial. Check out iso50 for better examples of this type of style.
khaled
February 28th, 2008
Nice and clear!
Jim
February 28th, 2008
Reminds me of Scott Hansen’s work
knife geek
February 28th, 2008
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.
Aloke Pillai
February 28th, 2008
Cool stuff!
Keep Rocking!
Aloke Pillai
Millz
February 28th, 2008
Very good concept and i can see myself recreating that in somewhat a different approach with the same output but very nicely done!
giackop
February 28th, 2008
wow!! fabio you are such an inspiration!! thanks..
Natty P
February 28th, 2008
ISO50 Eat yur heart out!!!!!! Nice one Fabio, Scott Hansen won’t be happy though!
craZed
February 28th, 2008
thanx a lot !
Zach
February 28th, 2008
cool, i like the textured look. im going to try to incorporate this effect into my next website header.
Craig S
February 28th, 2008
Awesome tut!
The random, light-brown grunge brushes look a little out of place, but overall it’s great.
Colin
February 28th, 2008
my co worker has a wallpaper just like that! instead it says ‘helvetica’. boy it’s a hoot!
firewalker
February 28th, 2008
Beautiful and dirty! Like it!
Brian
February 28th, 2008
I never ceases to amaze me how great the cloud filter can be when used in the right situations.
Sergio
February 28th, 2008
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.
Jonathan
February 28th, 2008
Looks the best at step 6.
Andrew D
February 28th, 2008
Wow that is awesome!
Adioz
February 28th, 2008
wow now we really start copying artist’s styles.
Andrei Constantin
February 28th, 2008
always liked blend modes
Rosano
February 28th, 2008
I saw something like this on ILT
http://ilovetypography.com/img/wallpapers/366-helvetica_1680.png
Daniel
February 28th, 2008
Very nice and clear Fabio, i definitely love it. Great tutorial !
honso
February 28th, 2008
omg, thats amazing! really really nice! thank you fabio.
btw, fabio sei italiano?
Salva
February 28th, 2008
Fabio 4 president
GeminiArt
February 28th, 2008
nice colour and style
good job
Lamin Barrow
February 28th, 2008
Well done.
Shane
February 28th, 2008
A very interesting tutorial, as always. Thanks - I’ll be trying this one out tonight.
kuldeep
February 28th, 2008
Simply awesome!!
Constantin Potorac
February 28th, 2008
Hey… pretty cool job :p I love it
Frippe
February 28th, 2008
Very cool tutorial.
But is it only me that is missing 2 pictures? At step 8 and step 9.
bweb
February 28th, 2008
Wow, soo cool. Really thanks for this tut.
Markus
February 28th, 2008
OMG, it looks soo real!!
*Applause*
BogDinamita
February 28th, 2008
yours looks way better than what I got
Mark Abucayon
February 29th, 2008
I love the texture very neat and clean- great job right there.
Paulo Sales
February 29th, 2008
Another very good concept tutorial…
final result is awsome.
Very well explained, congratulations to the creator.
psdtuts rules…
Markus
February 29th, 2008
I cant see the pictures in step: 7 8 9? Can someone tell me why?
Chris
February 29th, 2008
Good effect in theory, the shadows are a bit off.
Fabio Sasso
February 29th, 2008
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…
sean steezy
February 29th, 2008
seriously psdtuts is pumping out tutorials faster than I can keep up. this is crazy. crazy awesome.
foo
February 29th, 2008
Another ripoff from an existing artist. C’mon guys, this used to be a great site. Do something new.
god056
February 29th, 2008
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
Terry
February 29th, 2008
I agree. Plenty of techniques are learned just by trying to do what you’ve seen before.
Joefrey Mahusay
February 29th, 2008
I like it! great job fabio
therapix
February 29th, 2008
Awesomeness…..
Ricardo
February 29th, 2008
Very nice effect!
Neil
February 29th, 2008
Some of the pics are not loading :/
Katalog Stron
March 1st, 2008
For me: great!
b00m
March 1st, 2008
like it
Isaac
March 1st, 2008
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
Coconut Pete
March 1st, 2008
yea steps 8 and 9 are missing pics but other than that excellent tut.
Cheloju
March 1st, 2008
Muy interesante, veamos como sale jajaja
Jaakko
March 1st, 2008
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!
Lazi
March 2nd, 2008
Thanks! F* Great Tutorial!
xcarpatti
March 2nd, 2008
xcellent tutorial, tnxs
Nate
March 2nd, 2008
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
skut
March 2nd, 2008
nice and simple, another great tutorial
*pic 8 & 9 missing
Elke
March 3rd, 2008
Thanks so much for this great tutorial! I used it to make my site’s header… Looks fab!
Digital Fake
March 3rd, 2008
Thats kick ass man, really like it
Boska
March 4th, 2008
Nice tutorial!
@Nate: Select the text layer, go to Layer in the menu -> Layer Style -> Create Layer.
Mehdi
March 4th, 2008
Nice Tutorial but pics of step 7 to 9 is missing.
tnx
Collis
March 5th, 2008
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!
Rohith.Sun
March 5th, 2008
simply awesome
web design cheltenham
March 6th, 2008
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
Collis
March 6th, 2008
Those two images are fixed now!!
Sister Curare
March 7th, 2008
It looks to me you have got inspired:
http://ilovetypography.com/img/wallpapers/365-helvetica_1920.png
Good Tutorial though.
john man
March 13th, 2008
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
DudeZilla
March 14th, 2008
AWESOME MAN >>> USED IT IMMEDIATELY!!!!
Protestboarder
March 14th, 2008
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!
[C]antwo
March 15th, 2008
Nice Tut !!!
I can do it!
IDEAL
March 18th, 2008
ITS COOL
petnos
March 18th, 2008
Thanks a lot. This is really great tutorial for me.
David
March 19th, 2008
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?
Andy
March 19th, 2008
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 ?
RajX
March 22nd, 2008
Very sexy tut! I love the overall concept!
Kajua
March 27th, 2008
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
Jspin77
March 28th, 2008
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.
CHARAN
March 31st, 2008
nice..
HamBoneZ
April 3rd, 2008
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
Suria
April 4th, 2008
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
aronil
April 10th, 2008
That is really cool i gotta try that out
Dave
April 24th, 2008
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!
PSDTUTS ROCKS!
April 25th, 2008
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!
Noooosh
May 1st, 2008
It is Superb and Coooooooooooooooooooool
Thank yOOOOOOOOOOOOOOOOu fabio
moslim designer
May 5th, 2008
good tutorial
thank you