Download Source Files
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.
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.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Fabio
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Psdtuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Muy interesante, veamos como sale jajaja
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!
Thanks! F* Great Tutorial! :)
xcellent tutorial, tnxs
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
nice and simple, another great tutorial :)
*pic 8 & 9 missing
Thanks so much for this great tutorial! I used it to make my site’s header… Looks fab! :-)
Thats kick ass man, really like it
Nice tutorial!
@Nate: Select the text layer, go to Layer in the menu -> Layer Style -> Create Layer.
Nice Tutorial but pics of step 7 to 9 is missing.
tnx
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!
simply awesome
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
Those two images are fixed now!!
It looks to me you have got inspired:
http://ilovetypography.com/img/wallpapers/365-helvetica_1920.png
Good Tutorial though.
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
AWESOME MAN >>> USED IT IMMEDIATELY!!!!
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!
Nice Tut !!!
I can do it!
ITS COOL
Thanks a lot. This is really great tutorial for me.
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?
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 ?
Very sexy tut! I love the overall concept!
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
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.
nice..
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
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
That is really cool i gotta try that out :)
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!
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!
It is Superb and Coooooooooooooooooooool
Thank yOOOOOOOOOOOOOOOOu fabio
good tutorial
thank you
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..?
Nice tutorial, will try this when I get home tonight
This is my result for your great tutorial!
http://naro9.deviantart.com/art/Naro09-90396022
my photoshop result:
:) haha..nice tutorial
http://img364.imageshack.us/img364/383/colorcopyqo7.png
very nice. ty. http://cs1438.vkontakte.ru/g3864311/a_95b49e40.jpg
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.
Thanks for Posting.
Great Tut.
Really love the effects…. But I can’t seem to find a font which looks as good., Which font did you use??
I used this for my band’s newest CD cover. Check it out here:
http://keitherboo.com/images/other/hattersmadconceptcoversmall.jpg
I like it so much!!!
More please..
thank u very much !!
cheer for dat! nice idea..
thanks a lot….
I like the final design touches. It’s always the little things that makes something look professional. thanks
PSDTUTS strikes again!!! Very nice.
Fucking awesome.
amazing