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:
***
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.
***
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%.
***
3. Now add up 2 more gradients as shown in the picture bellow. This time set Blending mode to Softlight with Opacity: 30%.
***
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!
***
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.
***
2. Paste it into our layout as shown in picture bellow. Name the layer Content Area.
***
Creating Header.
1. Paste black beams image and place it under Content Area Layer.
***
***
2. Set Black Beams Layer Blending Mode to Overlay with Opacity: 30%
***
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.
***
4. Now add the Retro Car image and place it in the right top corner as shown in the picture.
***
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.
***
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.
***
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.
***
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”.
***
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:
***
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:
***
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:
***
4. Now add up some news in Latin ? (e.g. Sed ut perspiciatis unde omins iste natus dolorque laudantim aperiam.)
***
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:
***
7. Using Rectangular Marquee tool and Horizontal Type tool create a black “VOTE” button.
***
8. Now create “Welcome to our Website” Header. Set the characters value as shown in the picture:
***
9. Add some content and adjust paragraph values as shown:
***
10. Now insert the image of a retro photo camera.
***
11. Follow previous steps to create Resent Articles textbox.
12. Adjust paragraph value and add 3 illustrations of a retro radio.
***
13. Get proud of what you’ve just done!
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!)
***
