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
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%).
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.
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%.
Create another layer, select Elliptical Marquee Tool and draw a big centered ellipse, invert selection (Ctrl+Shift+I) and fill it with #000000 color.
Add Gaussian Blur Filter (Ctrl+Alt+Shift+G) (radius 150px) set this layer blending mode to Multiply with the opacity at 30%.
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.
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%).
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.
Step 4 – Logo Shape
It’s time of drawing a symmetrical and large shape for the logo. Below you can see the final figure.
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.
Below there is an overview on the design process.
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).
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).
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%).
Step 8 – Add a slogan box
Using the same techniques you can add a box for a slogan. Below you can see the result.
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.