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 Piervincenzo Madeo
  • Comments (114)»

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

If you need any cheap hosting plans be sure to check out Hosting Observer’s server hosting page.

Author: Piervincenzo Madeo

From a little city in the South of Italy, a web designer, a coder, a blogger. This is Piervincenzo, just a guy who has a great love for creativity and enjoys making high-quality stuff and sharing good information about web design and development.

website design and development

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

  17. Chris

    neat tutorial. i don’t see myself using it a lot but it is still simple and a neat effect.

  18. waro

    A couple of source files are not available, brush & pattern. Aside that, this is a very good tutorial.

  19. Cisco

    Candidates need to obtain CCNA and CCIE certifications for the cause that essential requirement for acquiring this certificate.

  20. 640-802

    Prerequisites for CCNA tone of voice certification consist of a trustworthy CCIE certification or CCNA Certification.

  21. Darmowy Katalog Stron

    I think this is among the most important information for me. And i am glad reading your article. But wanna remark on few general things, The web site style is great, the articles is really nice : D. Good job, cheers

  22. Owen Jerrel

    I smoked cigarettes for a long time and kicking the habit appeared to be almost impossible. I tried every one of the stop smoking tips but not a thing helped me. Then I heard about the cigarette electronic. The smokeless cigarette uses a nicotine fluid which is made up of simply nicotine. Absolutely no smelly smoke in the least. They’ve fortunetly improved my life.

  23. tipLeteOpebrA

    Overview of US restaurants. Stuff a Bagel

  24. build a retaining wall

    I together with my pals have been analyzing the best procedures located on the website and so at once developed a terrible suspicion I had not thanked the site owner for those strategies. Most of the women came consequently warmed to study all of them and now have actually been taking advantage of them. Many thanks for simply being well considerate and for selecting some incredible areas most people are really desirous to be aware of. My sincere regret for not expressing appreciation to sooner.

  25. mowing grass

    Thanks a lot for providing individuals with remarkably terrific chance to discover important secrets from this blog. It is always so sweet and as well , stuffed with a good time for me personally and my office peers to visit your blog particularly 3 times per week to find out the fresh guides you will have. And definitely, we are always pleased for the outstanding creative ideas served by you. Certain 3 areas in this article are rather the most effective I’ve ever had.

  26. girl peeing

    This was a actually terrific post. In theory I’d like to create like this also – getting time and true effort for making a good piece of writing… but what can I say… I procrastinate alot and never appear to get some thing accomplished.

  27. Vigrx Plus

    I’m speechless. This can be a very good weblog and very attractive too. Nice paintings! That’s not in point of fact much coming from an amateur writer like me, however it’s all I may just say after diving into your posts. Nice grammar and vocabulary. Not like other blogs. You truly recognize what you?re speaking approximately too. So much that you made me wish to discover more. Your blog has grow to be a stepping stone for me, my friend.

  28. Sara Ahmann

    I was doing silk’n sensepil treatments for at least a year now on my facial hair. Before this I had quite a thicker dark beard. I’m happy about the results. The hairs are extremely thin and I haven’t gone back for treatment for roughly six months. Let me say that it did hurt just a bit on my top lip and there ended up being instances when I had a bit of redness on my neck. I would recommend Intense pulsed light to those with thicker hairs or have large patches of hair they need to remove. For the guys who might like to do their rough beard be prepard for spots in the coming months’ time and many people saying man whats up with your beard.

  29. Lounge

    You can give useful information. A good article.

  30. zero friction marketing

    I can not thank you enough for the discussions on your site. I know you add a lot of time and energy into them and really hope you know how considerably I enjoy it. I hope I can do something identical for someone else one of these days.

  31. Ezine Articles

    Hey, very nice blog! Beautiful and Amazing. I will bookmark your blog and take the feeds also

  32. Free Articles

    Ver good site! I am loving it!! Will come back again – taking your feeds also. Thanks.

  33. how does ivf work

    no matter what you are saying, you got it

  34. Cure Infertility Fast

    hei, what’s going on here?

  35. dofollow list 2011

    Thank you taking the time to write this!

  36. Darla Oreilly

    Hello, i think that i saw you visited my web site thus i came to “return the favor”.I am trying to find things to enhance my web site!I suppose its ok to use some of your ideas!!

  37. dofollow article directories

    Thank you for taking the time to write this!

  38. foot fetishing

    now this is what a blog post should contain thanks for your time and energy to post it here

  39. Increase My Score

    Search engine optimization needs a very good search engine optimizer plan. Just certainly one of these strategies could make a big distinction in your sites place and company your web site brings you.

  40. impress a girl

    Hi! I know this is kinda off topic but I’d figured I’d ask. Would you be interested in trading links or maybe guest authoring a blog post or vice-versa? My site goes over a lot of the same subjects as yours and I think we could greatly benefit from each other. If you happen to be interested feel free to shoot me an e-mail. I look forward to hearing from you! Superb blog by the way!

  41. Seth Feurtado

    Here is the best process to be followed, I must say that basically being here and never through this will truly be silly. Would you like to please reply with a lot more information here? There’s no doubt that there is a good response but it will surely definitely help a lot. Since this forum has really been a good platform for us all, leading to this will likely sometimes be healthy for the plus your business too. Most of us are waiting for a fantastic informative response. Bless you to do this, waiting around for more.

  42. Fiona Dennis

    I think one of your adverts caused my internet browser to resize, you might need to put that in your blacklist. Quick PSD Tutorial, How To Create A Simple And Effective Retro Logo With a Soft Grunge Background | PVM Garage is really a cool name for a blog BTW ;)

  43. Darryl Franzini

    Substantially, the article is really the freshest on this valuable topic. I match in with your conclusions and can eagerly look forward to your next updates. Saying thanks will certainly not simply be acceptable, for the awesome clarity in your writing. I will immediately grab your rss feed to stay privy of any kind of updates. Authentic work and also much success in your business efforts!

  44. Heavy Duty Rotisserie

    Simply desire to say your article is as astonishing. The clarity in your post is just great and i could assume you’re an expert on this subject. Well with your permission allow me to grab your RSS feed to keep updated with forthcoming post. Thanks a million and please keep up the enjoyable work.

  45. Smart Phone App Trademark

    It’s appropriate time to make some plans for the future and it is time to be happy. I have read this post and if I could I desire to suggest you some interesting things or tips. Perhaps you can write next articles referring to this article. I desire to read even more things about it!

  46. Skylights For Homes

    It’s perfect time to make some plans for the future and it’s time to be happy. I’ve read this post and if I could I want to suggest you few interesting things or advice. Perhaps you can write next articles referring to this article. I desire to read more things about it!

  47. Tacori Engagement Ring

    It is the best time to make some plans for the future and it is time to be happy. I’ve read this post and if I could I desire to suggest you some interesting things or tips. Maybe you could write next articles referring to this article. I wish to read even more things about it!

  48. Calculate Calories For Weight Loss

    Wonderful beat ! I wish to apprentice while you amend your website, how could i subscribe for a blog website? The account aided me a acceptable deal. I had been tiny bit acquainted of this your broadcast offered bright clear idea

  49. web agencies london

    I’ve been browsing online more than 3 hours today, yet I never found any interesting article like yours. It’s pretty worth enough for me. Personally, if all web owners and bloggers made good content as you did, the net will be much more useful than ever before.

  50. Evangeline Kreck

    I was very pleased to find this site. Fine articles, good informations… Congrats! Looking forward to another great article!

  51. chanel bags

    Coach Retail outlet Retail store considers that person ought to get the precise to help look amazing, in addition to match that judgment by means of providing people web-sites while using the best fantastic Coach bags.coach outlet

  52. sexcams

    fotzen ficken

  53. no xplode caffeine free

    Keep functioning ,terrific job!

Trackbacks

Leave your comment

You must be logged in to post a comment.

-->

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

HOME | ABOUT US | ADVERTISE | CONTACT US