Note technology rapidly evolves and this tutorial is over 3 years old, as a result some of the practices used in this tutorial may be out of date.

Blue Retro Grunge Text Effect and Icons

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.



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.


Create a new transparent document 670px * 400px at 72dpi as seen below.



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.



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.



Open the layer styles dialog box by going to LAYER >> LAYER STYLE >> BLENDING OPTIONS in the menu and enter the settings you see below.

gradient-layerstyle-1 gradient-layerstyle-2 gradient-layerstyle-3


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.



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.

retro-blue-text-layer1-6 retro-blue-text-layer1-5 retro-blue-text-layer1-4 retro-blue-text-layer1-3 retro-blue-text-layer1-2 retro-blue-text-layer1-1


Open the layer styles dialog box on the botom text layer and enter the settings you see below.

retro-blue-layer retro-blue-layer-2 retro-blue-layer-3 retro-blue-layer-4 retro-blue-layer-5 retro-blue-layer-6 retro-blue-layer-7


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.

frame-layer-styles frame-layer-styles-2 frame-layer-styles-3 frame-layer-styles-4 frame-layer-styles-5

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.
You might also like
Modular Wordpress Theme Persuasion Wordpress Theme Image Masking and Sliding Transition Effect 3D Transparent Glass Text Effect Watercolor Social Networking Icons Construct Wordpress Theme Matte White Square Check Mark Icon Glossy Silver Web 2.0 Icon Tutorial Grunge Yellow Warning Striped Icon & Text Effect Glossy Black Button Icons Create a Professional Coming Soon Landing Page PSD Template Dejavu Wordpress Theme Brushed Silver Reflective Text Effect Coffee Stain Social Networking Icons Tutorial Adding Versatile Button Shortcodes to your WordPress Theme How to use Google Analytics Content Experiments Crystal Clear Bubble Icons Echelon Wordpress Theme Myriad Wordpress Theme Grungy Rusted Carbon Fiber Text Effect Adding Column Layout Shortcodes to Your WordPress Theme Starfield Tileable Twitter Background Tutorial Red and White Pearl Download Icon Elegance Wordpress Theme

19 comments on “Blue Retro Grunge Text Effect and Icons

  1. kinali says:

    Hi! great tuto…but you forget to said where we can get the pattern in “STEP #7″ text layer… : /

    August 27, 2009 11:04 am
    1. Pamela says:

      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”.

      August 27, 2009 12:43 pm
  2. ashley. says:

    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.

    September 3, 2009 6:15 am
    1. Pamela says:

      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.

      September 3, 2009 8:56 am
  3. lea says:

    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.

    June 12, 2011 6:27 pm
  4. juries says:

    Superb mind twister you have posted that helped me have a keen idea on developing my site. More posts please.

    June 17, 2011 6:21 pm
  5. Nora says:

    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!

    June 27, 2011 2:02 pm

    蓝色花纹复古风格文字效果(PSD) | 鸭脖客

    52 Great Looking Photoshop Text Effects Tutorials - Part 1 | Photoshop Tutorials | WPDITE

    | Border7 Studios

    New and Fabulous Retro Style Photoshop Tutorials «

    21 Yeni ve Harika Retro Photoshop Dersi | gNcWebmaster - Tasarım Odası l Webmaster Tools

    wordpress dev » Blog Archive » 52 Great Looking Photoshop Text Effects Tutorials – Part 1

    TOPGFX » Blog Archive » 25 Helpful Photoshop Tutorials For Creating Retro & Vintage Typography

Leave a Reply to Nora Cancel reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>