Here we’re going to show you how to create the Blue Retro Grunge text effect on Webtreats ETC.
This style works great on icons as well and you can download roughly 2000 icons in this style below:
Blue Retro Rusted Grunge Icons.
STEP #1
First you will need to download the two patterns below and convert them into photoshop patterns for later. To do this simply open each image then go to “EDIT >> DEFINE PATTERN” in the menu.
Click the images above to get each pattern.
* Note: Thanks to Citrus Moon for the cool blue pattern.
STEP #2
Create a new transparent document 670px * 400px at 72dpi as seen below.
STEP #3
Create a new pattern fill layer by going to LAYER >> NEW FILL LAYER >> PATTERN in the menu and choose the wood pattern you created in step #1 as seen below.
STEP #4
Above the wood layer create a new gradient fill layer by going to LAYER >> NEW FILL LAYER >> GRADIENT in the menu with the settings seen below.
STEP #5
Open the layer styles dialog box by going to LAYER >> LAYER STYLE >> BLENDING OPTIONS in the menu and enter the settings you see below.
STEP #6
Now activate the text tool by typeing T. Then open the character pallet and choose Arial Black at 310pt with a vertical stretch of 110% as seen below and enter some text.
STEP #7
Duplicate the text layer you just created by going to LAYER >> DUPLICATE LAYER . Then activate the layer styles pallet on the top text layer by going to LAYER >> LAYER STYLE >> BLENDING OPTIONS in the menu and enter the settings you see below.
STEP #8
Open the layer styles dialog box on the botom text layer and enter the settings you see below.
STEP #9
To create the frame activate the shape tool by typeing U, make sure you have the rectangular tool selected, then draw out a rectangle at the bottom of the image as seen below.
STEP #10
Activate the layer styles pallet on the rectangle shape layer you just created and enter the settings below.
STEP #11
Duplicate the rectangular layer you just created by going to LAYER >> DUPLICATE LAYER then activate the move tool by typeing V and move the duplicated rectangle up to the top as seen below.
STEP #12
Now to add a title first create a new layer above the rectangular frame layer and activate the text tool by typeing T. Then open the character pallet, choose Cochin at 24pt then type in your title as seen below. When you’re done set the layer opacity to 90% so the title doesn’t stand out too much.
STEP #13
This next step is optional. If you would like to create a shadow beneath the text create a new layer beneath the two text layers, activate the brush tool by typeing B choose a basic round brush with the settings highlighted below. Then paint in a shadow at the base of each layer as seen below.
STEP #14
To clean up the shadow use the motion blur filter by going to FILTER >> BLUR >> MOTION BLUR in the menu and enter the settings below.
STEP #15
Finally take the fill opacity of the shadow layer down to 80% and set the blend mode to multiply as seen below.
Thats it!
You should now have something that looks like what you see below.
What’s Included in the Download
- Fully layered source PSD
- .ASL file containing the layer styles for both text effect layers
- .PAT file of the wood pattern used in the background – ready to install!
- .JPG file of the wood pattern used in the background
- BONUS: 36 fully layered popular icons in this style.
Hi! great tuto…but you forget to said where we can get the pattern in “STEP #7″ text layer… : /
Thanks for bringing it to our attention. The patterns are default photoshop patterns. If you don’t see them try loading the pattern set “Artist Surfaces”.
its good, but the color when were making that steelish looking outline thats like a.. green/brown, you never told us exactly what color it was.
Thank you – we will keep that in mind in the future. In this case the exact color is not so important – any murky color will do. You can also download the free source psd above if you would like to use the exact same colors.
thank you.
Thank you for this great tutorial. I was looking for a different and unique way to spruce up a logo I was working on. The pattern was just what I needed.
So it’s really easy to see but a bit hard to customize. But it’s the matter of getting used to. It’s beautiful.
That is very helpful tutorial. Been meaning to do something similar for my site. Helped me a lot.
Thank you for useful information. Waiting for new posts.
Superb mind twister you have posted that helped me have a keen idea on developing my site. More posts please.
This is a neat text effect tutorial – it’s clear and concise, and (imo) easy to follow without needing a practical application to understand the process. Honestly I can’t see myself actually applying it the way you have set up here, but I like the technique and will keep it in mind for future projects that might require a good grungy look.
Thanks for putting it together, I’ll definitely be checking out your other tutorials for inspiration!
This is such a treat! I am always looking for photoshop tutorials.
Thank you,
Patricia