Quick PSD Tutorial, How To Create A Simple And Effective Retro Logo With a Soft Grunge Background

Quick PSD Tutorial, How To Create A Simple And Effective Retro Logo With a Soft Grunge Background
  • 17 July 2009
  • Tutorials
  • This post was written exclusively for PV.M Garage by piervix
  • Comments (56)»

I noted that retro is still very popular trend in web design, and my passion for this style is evident. Today I want explain a super-simple way to create a nice retro logo with an appropriate background. The final result, that you can see below, is adaptable for many uses in your web design works.
This tutorial aims to improve quality/time ratio, a decent design in few minutes (approximately 10-15 minutes).

I hope you find useful this.

Final Image and PSD Document

Below there is the final result (click image to see large preview). If it is interesting for you, read the tutorial!
Retro WallPaper Logo

Step 0 – Psd Document

Create a new document with a 1200px width by 600px height, with a 72 pixels/inch resolution (if you need you could increase, but remember: we want to save time). Set color mode to RGB 8bit.

Soft Grunge Background

Step 1 – The Background

Create a new layer (Ctrl+Shift+N) and name it Background. Set the foreground color to #584e0a and and the background to #d8d494.
Make a selection (using Rectangular Marquee Tool (M)) for the whole document and fill it with the background color (right click on mouse and then select Fill).

Use damask pattern to reproduce a wall-paper effect. Download Damask Patterns Styles For Photoshop, load the pattern (learn how here). Go to Layer Style and add a pattern using Overlay Pattern as shown (Multiply, Opacity 40%, Scale 100%).
Retro WallPaper Logo

Step 2 – Add Grunge Effect

Now through Burn Tool (O) with a round large soft brush (300px) create an “old effect” on the wallpaper a shown.
Retro WallPaper Logo

Create a new layer (Ctrl+Shift+N) and name it Grunge, download a grunge brushes set from here and add some stains. Then set the layer opacity at 40-50%.
Retro WallPaper Logo

Create another layer, select Elliptical Marquee Tool and draw a big centered ellipse, invert selection (Ctrl+Shift+I) and fill it with #000000 color.
Retro WallPaper Logo

Add Gaussian Blur Filter (Ctrl+Alt+Shift+G) (radius 150px) set this layer blending mode to Multiply with the opacity at 30%.
Retro WallPaper Logo

Step 3 – A Little Tear

Add a little tear at the wall-paper. Use Pen Tool (P) to draw a shape (during this step I’ve used a zoom of 500%, color #fff7cd). Apply the layer styles: Inner Shadow (Multiply, Opacity 45%, Distance 1px, Size 3px), Pattern Overlay (use this set Bricks, Luminosity, Opacity 40%, Scale 100%). You can also add, in a new layer, a soft shadow in the bottom of the shape. Below, in the image, you can see the situation step-by-step.
Retro WallPaper Logo
Retro WallPaper Logo

Duplicate twice the layer. Name the first layer “Shape Copy” and the second “Shape Copy Shadow”. Reflect the two layers (Edit->Transform) and then rasterize the layers (right-click on the name in the layers palette and select Rasterize Type). Use Burn Tool over the border of the first layer to give an “old effect”. Then add layer styles (“Shape Copy”): Inner Shadow (Multiply, Opacity 20%, Distance 9px, Size 13px), Gradient Overlay (Luminosity, Opacity 46%, Gradient from #ffffff to #737373, Reflected, Angle 81°, Scale 72%), Pattern Overlay (Luminosity, Opacity 20%, Scale 30%).
Retro WallPaper Logo

Now desaturate (Ctrl+Shift+U) “Shape Copy Shadow”. Go to Image->Adjustment->Brightness/Contrast set brightness to minimum and contrast to maximum as shown. Use Gaussian Blur with a radius of 3-4px and place the shadow in a correct position as shown in the figure. You can also set a specific opacity for this layer.
Retro WallPaper Logo
Retro WallPaper Logo

The Logo

Step 4 – Logo Shape

It’s time of drawing a symmetrical and large shape for the logo. Below you can see the final figure.
Retro WallPaper Logo

As you can see it’s possible to draw, using the Pen Tool (color #584e0a), the quadrant number 1 and so to duplicate it three times. If you want a valid assistance activate photoshop rulers (Ctrl+R) and use the guides.
Retro WallPaper Logo

Below there is an overview on the design process.
Retro WallPaper Logo

Step 5 – Add a Style to Logo Shape

Now set the blending mode to Linear Burn and the Fill to 75%. Apply the following layer styles to the shape: Drop Shadow (Multiply, Opacity 82%, Distance 8px, Size 16px); Inner Shadow (Multiply, Opacity 31%, Distance 5px, Size 6px); Inner Glow (Normal, Opacity 80%, Noise 5%, color #b9ae6f, Technique Precise, Choke 100%, Size 5px); Bevel and Emboss (Techinque Chisel Hard, Depth 163%, Size 2px, Soften 0px); Gradient Overlay (from black to white, Soft Light, Opacity 15%, Scale 100%); Stroke (Size 2px, Opacity 51%, Difference, Color #fff9ae).
Retro WallPaper Logo

Step 6 – Add Text and Decorations

Now use Horizontal Type Tool (T) to add text with Qlassik font.
Create a new layer and use Horizontal Dividers Brush Set by MouritsaDA-Stock to add two decorative element as shown, in this atep use Brush Tool (B).
Retro WallPaper Logo

Step 7 – Add Style

Add the following layer styles to each decorative element and to the text: Drop Shadow (Multiply, Opacity 100%, Color #524523, Distance 2px, Size 0px), Bevel and Emboss (Techinque Chisel Hard, Depth 154%, Size 3px, Soften 1px), Pattern Overlay (use Damask Pattern, Multiply, Opacity 58%, Scale 100%).
Retro WallPaper Logo

Slogan

Step 8 – Add a slogan box

Using the same techniques you can add a box for a slogan. Below you can see the result.
Retro WallPaper Logo

Final Result and Source File

Below you can appreciate the final result. As you know I always share the PSD Source File to check the tutorial.
The complete layered PSD file is released under a Creative Common License also for commercial/public use.
Retro WallPaper Logo

Download Source

Author: piervix

Hi, I'm graduating in Electronic Engineering and I am a passionate Web Designer and Blogger. PV.M Garage is the place where I try to share good stuff related to the magnificent world of the Web Design. Follow me on Twitter.

56 Comments

  1. Hannah

    The design layout is good but I don’t like the pointing arrow to be honest. And the text and the colour of the background matches really well, there’s no contrast which is good.

  2. piervix

    @Hannah: thanks for the comment and the suggestion. I need this kind of feedback to improve my skills… thanks!

  3. Mika Steve

    Simply a great design… and the arrow is nice in my opinion!

  4. web designer

    nice amazing post . i like its. thanks a lot.

  5. Stan

    Hey Pievincenzo,

    Great Work!! I have to honestly say you are gifted.

    I am defintely using your tutorial.

    Keep it Up & DL!!

  6. piervix

    @Mika Steve, @Stan, @web designer: Thanks so much guys!

  7. Joey

    Nice Tut. Thanks a bunch. For what it’s worth, I had to read in the tutorial that the mark to the upper right was a wallpaper tear. It didn’t register visually until I read what it was.

  8. piervix

    @Joey: in my view the wallpaper tear is clear in my view… maybe because I’ve make it. I understand, it’s not perfect, but in my idea it was only a little cue. It isn’t really necessary in its position.

    Thanks for positive comment!

  9. Tutorial City

    Very cool logo design! great tutorial

  10. Shabu | Geek Sucks

    Awesome tuts, keep it up Madeo :)

  11. ninique

    I think the problem with the “wallpaper tear” is that the shadow and highlight is too strong; paper usually doesn’t shine like that from the inside. To me it looks like someone poked a pencil through the wall on the other side XD.

    The rest of the tutorial is great though!

  12. ROMEO

    I’m really impressed with what i see, simply great, need to try it

  13. lyrae

    Thanks for this.
    what i really benefited from was on how to make that background. i like it alot.

  14. Daniel G

    Thanks for this tutorial … it’s actually the first photoshop tutorial I’ve done. I had no idea how powerful layer styles were! cheers.

  15. Sana Khan

    Great TUtorial i love the logo….

  16. strony internetowe

    nice amazing post . i like its. thanks a lot.

Trackbacks

Leave your comment

This website is proudly powered by WordPress, hosted by SitoNerd. Icons by WeFunction, KomodoMedia and DezinerFolio.
Contents and resources released under Creative Commons License.
Design and code by Piervincenzo Madeo - Copyright © 2010 PV.M Garage Theme - All Rights Reserved.

HOME | ABOUT US | ADVERTISE | CONTACT US