We Go Retro! Create Stylish Retro Website Template Using Photoshop!


We are glad to present you our fresh Photoshop tutorial from which you’ll learn how to create the stylish retro website layout that would suit any web company. Remember that retro style will always be in fashion!
Follow the steps of this tutorial and you’ll learn the designing tips and tricks of this elegant template. This is the advanced level tutorial, so you need to review some techniques from our previous tutorials and especially from How To Create Interior Website Template. Anyways, we’ve tried to make this tutorial comprehensive for all of our readers. No more words to say! It’s high time to act!

 

You Need List:
Program: Photoshop 7 or later.
Difficulty: Advanced Level.
Set Time: 90 minutes.
Materials: 2 Grunge Paper Photoshop textures, vector illustration of a retro car, black beams, photo camera and radio.

 

This tutorial is based on the design of Free Stylish Retro Website Template that was launched by Templates.com not long ago.

 

Here is the Stylish Retro Layout that we are going to create:

 

Photoshop Tutorial

 


***

 

Creating the Background.
1. Let’s start with creating the background for our layout. Open Photoshop 7.0 or later. Now open the grunge paper texture and press Ctrl+Alt+I and set the image size to 1024×768 p.

 

Photoshop Tutorial

 

***

 

2. Now we will make the sides of our layout look a bit burnt out. Set Foreground color to Black. Pick Gradient tool choose Foreground to Transparent preset and add up gradients from each side of the layout background as shown on picture. Note! For each gradient create separate layer. Set the Layers blend mode to Softlight with Opacity: 100%.

 

Photoshop Tutorial

 

***

 

3. Now add up 2 more gradients as shown in the picture bellow. This time set Blending mode to Softlight with Opacity: 30%.

 

Photoshop Tutorial

 

***

 

4. Let’s make the upper corners darker. Add 2 more gradients as shown in the picture. Set Layers Blending mode to Soft Light with Opacity 100%. And viola the Background is done!

 

Photoshop Tutorial

 

***

 

Creating the Content Area.
1. Let’s separate the area for the textboxes, polls and other website info. To do this open another grunge paper image.

 

Photoshop Tutorial

 

***

 

2. Paste it into our layout as shown in picture bellow. Name the layer Content Area.

 

Photoshop Tutorial

 

***

 

Creating Header.
1. Paste black beams image and place it under Content Area Layer.

 

Photoshop Tutorial

 

***

Photoshop Tutorial

 

***

 

2. Set Black Beams Layer Blending Mode to Overlay with Opacity: 30%

 

Photoshop Tutorial

 

***

 

3. Using the Rectangular Marquee tool copy the upper part of the Content Area then flip it horizontally and place it on the top of our layout.

 

Photoshop Tutorial

 

***

 

4. Now add the Retro Car image and place it in the right top corner as shown in the picture.

 

Photoshop Tutorial

 

***

 

5. Now we need to blend the car’s colors to match the background. So, create a Layer above and create Clipping Mask by pressing Ctrl+Alt+G. Take the Brush tool and paint the car over with Pale Worm Brown color (#c69c6d). Set The Layer Blending Mode to Color with Opacity: 30%
6. As you can see, our car has no windshield. Let’s create the front window! Create a new layer and place it under the Retro Car Layer. Use Polygonal Lasso Tool to make the selection similar to one shown in picture. Set the foreground color to white; take the Gradient tool choose Foreground to Transparent preset and fill selected area with the gradient from horizontally from left to right.
Pick the Brush tool and select soft brush preset with Master Diameter 27 px. Draw a shadow. Make it a bit blurry using Gassian Blur Filter.

 

Photoshop Tutorial

 

***

 

Creating Navigation Bar and “Stylish Retro” Sign.
1. The Navigation Bar for this Layout consists of text links only. So, all you need is to grab the Horizontal type tool and type in Home, About Us, Articles, etc. Set the characters values according to the image bellow. The font we’ve used is called Jikharev.

 

Photoshop Tutorial

 

***

 

2. Now let’s create the “Stylish Retro” sign. Type in Stylish Retro using Horizontal type tool and adjust the characters values according to the image.

 

Photoshop Tutorial

 

***

 

Pick the Rectangular Marquee Tool and select the Half of the text horizontally. Create another layer above the sign. Press Ctrl+Alt+G to transform the layer into clipping mask. Press “D” on the keyboard to set the foreground and background colors to default (black & white). Take the Gradient tool and choose Foreground to Background Preset. Pick the new layer and feel the selection with gradient from top to bottom. Now Press Ctrl+I to invert selection. Feel the upper part of the text with the same gradient.

3. Let’s add a shadow effect to make the sign stand out of the background. Go to Layers Panel and press Add Layer effect button. Choose Drop Shadow… Now set the following values:
Blend Mode: Multiply
Opacity: 75%
Distance: 0
Angle: 90
Spread: 7
Size: 49

4. You can also add a smaller sign “Classic Retro Design” under “Stylish Retro”.

 

Photoshop Tutorial

 

***

 

5. It would also be good to pop up the “Stylish Retro” sign using not only shadow effect but also by adding some background light. Create a new Layer under the Retro Sign Layer. Pick the Elliptical Marquee tool and make a small oval selection over the sign. Press Ctrl+Backspace to fill the selected area with the white background color.
Set Blending mode to Overlay with Opacity: 80%. Do the same for our Navigation Bar. The final result of this step should look like in the picture bellow:

 

Photoshop Tutorial

 

***

 

Adding Content.
1. Now let’s add up some Copyright signs on the bottom of the layout. Pick Horizontal type tool and type in “Copyright – Type in your name…” Set the characters value as shown in the picture bellow:

 

Photoshop Tutorial

 

***

 

2. You can also add your corporate identity in the right bottom corner (e.g. Designed by Templates.com…).
3. It’s time to add the “Latest News” textbox. Using Horizontal type tool create Latest News header. Set the characters value as shown:

 

Photoshop Tutorial

 

***

 

4. Now add up some news in Latin ? (e.g. Sed ut perspiciatis unde omins iste natus dolorque laudantim aperiam.)

 

Photoshop Tutorial

 

***

 

5. Let’s create Poll textbox. Create the Poll header.
6. Add some text that would look like a question and few variants of answers. Using Elliptical Marquee tool create white markers for each answer. Note that each marker should be created on a separate layer. Set the characters value as shown in the picture:

 

Photoshop Tutorial

 

***

 

7. Using Rectangular Marquee tool and Horizontal Type tool create a black “VOTE” button.

 

Photoshop Tutorial

 

***

 

8. Now create “Welcome to our Website” Header. Set the characters value as shown in the picture:

 

Photoshop Tutorial

 

***

 

9. Add some content and adjust paragraph values as shown:

 

Photoshop Tutorial

 

Photoshop Tutorial

 

***

 

10. Now insert the image of a retro photo camera.

 

Photoshop Tutorial

 

***

 

11. Follow previous steps to create Resent Articles textbox.
12. Adjust paragraph value and add 3 illustrations of a retro radio.

 

Photoshop Tutorial

 

***

 

13. Get proud of what you’ve just done!

 

Photoshop Tutorial

 

The Stylish Retro layout is done! We hope, from this tutorial you’ve learned lots of new web design tips and tricks. All the resources for creating this layout are available for download. You can also download the layout itself, so it would be easier for you to sort out every little step in details. As you know this was an advanced level tutorial. Please let us know if it was difficult for you to complete and we will try to explain all the steps more thoroughly in our next tutorials (yes, Templates.com will always gladden you with fresh web design tutorials!)
***

Share this post:

  • http://photoshop.imagik.org/2010/03/15/we-go-retro-create-stylish-retro-website-template-using-photoshop/ We Go Retro! Create Stylish Retro Website Template Using Photoshop … | Photoshop Blog

    [...] Read more from the original source: We Go Retro! Create Stylish Retro Website Template Using Photoshop … [...]

  • http://www.ppt-templates.net PowerPoint Templates

    The car looks web 2.0 while the background looks antiqued. I like it.

  • http://numberonepictures.com/blog/2010/03/17/photoshop-trick-10-steps-make-your-photo-to-hand-sketch-effect/ Art and Photography Articles » Blog Archive » Photoshop Trick : 10 Steps Make Your Photo To Hand Sketch Effect

    [...] We Go Retro! Create Stylish Retro Website Template Using Photoshop! | Templates.com [...]

  • http://www.net-kit.com/photoshop-layout-tutorials-mar-2010/ March’s Fresh Photoshop Web Layout Tutorials

    [...] 9. We Go Retro! Create Stylish Retro Website Template Using Photoshop! [...]

  • http://www.neurosoftware.ro/programming-blog/blogposter/web-resources/60-web-design-photoshop-layout-tutorials-from-2010/ 60 Web Design Photoshop Layout Tutorials From 2010 – Programming Blog

    [...] 50. Create Stylish Retro Website Template Using Photoshop [...]

  • http://www.p2gdesigns.com/blog/designs-trends-themes-inspiration/60-web-design-photoshop-layout-tutorials-from-2010/ 60 Web Design Photoshop Layout Tutorials From 2010 | pro2go Designs Blog

    [...] 50. Create Stylish Retro Website Template Using Photoshop [...]

  • http://creativenerds.co.uk/tutorials/80-fresh-photoshop-tutorials-for-creating-awesome-websites/ 80 Fresh Photoshop Tutorials For Creating Awesome Websites | Creative Nerds

    [...] 58. Create Stylish Retro Website Template Using Photoshop! [...]

  • http://www.neurosoftware.ro/programming-blog/facebook-web-design/tutorial/80-fresh-photoshop-tutorials-for-creating-awesome-websites/ 80 Fresh Photoshop Tutorials For Creating Awesome Websites – Programming Blog

    [...] 58. Create Stylish Retro Website Template Using Photoshop! [...]

  • Anonymous

    Nice articles…..thanks for sharing it……..

  • Szp402341606

    不错!谢谢。

  • http://www.freetemplatesonline.com/ Stacy

    awesome tutorial! thank you

  • http://doublemesh.com/web-layout-design-photoshop-tutorials/ 28 Web Layout Design Photoshop Tutorials

    [...] View Tutorial [...]

  • http://www.1stwebdesigner.com/tutorials/web-design-layout-tutorials-2010/ 60 Web Design Photoshop Layout Tutorials From 2010

    [...] 50. Create Stylish Retro Website Template Using Photoshop [...]