Create a Super Trendy Retro Layout in Photoshop

In this tutorial we will create an amazing and super stylish Retro style Portfolio layout in Photoshop.

Details

Program:  Photoshop CS 6

Approximate time:  25 – 45 Minutes

Resources

Images: Jon Reinfurt,Lorena Alvarez Gómez

Icons: Web icons

Now before we start, let’s have a look at our final result. Click on the image to view in full size.

Retro Layout Tutorial

 

Step 1: Create a new File

Open Photoshop and create a new file with 1200px width and 1800px height.

Retro Layout Tutorial

 

Step 2: Add background

Select “Bucket Tool” and fill the background with color # f5fff7.

Retro Layout Tutorial

 

Step 3: Adding Top Navigation

Create a new layer (Layer> New>Layer) and Select the top area using “Rectangular Marquee Tool”. Fill it with color # 08515a using “Paint bucket tool”.

Retro Layout Tutorial

 

Step 4: Add Text

Select the “Text Tool and add Logo and menu text using color # ffffff.

Retro Layout Tutorial

 

Step 5: Creating Search bar

Select “Rounded Rectangle Tool” and create a small rectangle on the right with color # ffffff. Then click on Layer> Layer Styles> Stroke.

Retro Layout Tutorial

Now add some “Inner Shadow”.

Retro Layout Tutorial

Now select “Pen Tool” and select some area of our search bar and fill it with # ce523a. Then click on Layer> Layer styles> Gradient Overlay with color stops # ce523a and # d67965.

Retro Layout Tutorial

Lastly, add the text using “Text Tool”.

Retro Layout Tutorial

 

Step 6: Adding Retro lines

Create a new layer (Layer> New) and select “Pen Tool” to create a path same as the image.

Retro Layout Tutorial

Now click on “brush tool” select “Hard Round brush” with 5px size and foreground color # ce523a. Now click on Pen tool again and then right click on the path and select “Stoke Path”.

Retro Layout Tutorial

Now again right click on the path and select “Delete Path”. Then click on Layer>Layer Styles> Drop Shadow.

Retro Layout Tutorial

Repeat the same process and create another line and this time with color # ffffff. Or you can simply duplicate the layer (CMD/Ctrl+J) and change the color using Layer styles> Color overlay, and then simply move the line using “Move Tool”.

Retro Layout Tutorial

 

Step 7: Creating Services

Click on “Rectangular Marquee Tool” and select some area under the header, fill it with color # cf5339.

Retro Layout Tutorial

Select “Polygon Tool” and create a shape with 6 sides with color # 576894. Now click on Layer> Layer style>Stroke.

Retro Layout Tutorial

Now add some drop shadow.

Retro Layout Tutorial

Now paste the icon in the center and add some drop shadow to it.

Retro Layout Tutorial

Repeat the same process and create some more shapes with different colors and icons.

Retro Layout Tutorial

Now select “Text Tool and add some titles using color # ffffff.

Retro Layout Tutorial

 

Step 8: Adding Portfolio

Select “Text Tool” and add title with color # 08515a and rest of the text with # 547a7f.

Retro Layout Tutorial

Use “Rounded Rectangle Tool” and create a rectangle with color # ffffff. Then click on Layer>Layer styles> Stroke and add some stroke with color # cf5339.

Retro Layout Tutorial

Now paste the image in the center and add some text using colors # cf5339 and # 08515a.

Retro Layout Tutorial

Repeat the same process and add some more frames. I’ve used stroke with color # 08515a for every alternative frame.

Retro Layout Tutorial

 

Step 9: Creating Footer

Create a new layer and select “Rectangular marquee Tool”. Now select a small strip and fill it with # cf5339, then select the rest of the remaining space and fill it with color # 08515a.

Retro Layout Tutorial

Select “Text Tool” and add some text. Use color # ffffff for the titles and # 839c9f for the rest of the text.

Retro Layout Tutorial

Now we will create a small contact form, so click on “Rectangle tool” and create a rectangle with color # 013c42. And add some stroke with color # 013035.

Retro Layout Tutorial

Repeat the same process to add some more rectangles/form fields. And add text (Name, Email, Message) with color # ffffff.

Retro Layout Tutorial

Select “pen tool” and create a small triangle on the lower right corner the message field and fill it with color # 0d4449. Lastly add the submit button.

Retro Layout Tutorial

 

Step 10: Creating Retro Lines

Create a new layer and select “Pen Tool” to create a path same as we did before.

Retro Layout Tutorial

Right click on the path and select stroke path. Now follow the same process as we did on the step 6 above.

Retro Layout Tutorial

That;s all for today, Hope you guys enjoyed it. We will create some inner pages of this layout to give you complete design overview. So don’t forget to check back, till then take care!

 

Wordpress Themes - Wordpress Video Themes - Wordpress Travel Themes - WordPress Restaurant Themes