In this tutorial we will create an amazing and super stylish Retro style Portfolio layout in Photoshop.
Program: Photoshop CS 6
Approximate time: 25 – 45 Minutes
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.
Step 1: Create a new File
Open Photoshop and create a new file with 1200px width and 1800px height.
Step 2: Add background
Select “Bucket Tool” and fill the background with color # f5fff7.
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”.
Step 4: Add Text
Select the “Text Tool and add Logo and menu text using color # ffffff.
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.
Now add some “Inner Shadow”.
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.
Lastly, add the text using “Text Tool”.
Step 6: Adding Retro lines
Create a new layer (Layer> New) and select “Pen Tool” to create a path same as the image.
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”.
Now again right click on the path and select “Delete Path”. Then click on Layer>Layer Styles> Drop Shadow.
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”.
Step 7: Creating Services
Click on “Rectangular Marquee Tool” and select some area under the header, fill it with color # cf5339.
Select “Polygon Tool” and create a shape with 6 sides with color # 576894. Now click on Layer> Layer style>Stroke.
Now add some drop shadow.
Now paste the icon in the center and add some drop shadow to it.
Repeat the same process and create some more shapes with different colors and icons.
Now select “Text Tool and add some titles using color # ffffff.
Step 8: Adding Portfolio
Select “Text Tool” and add title with color # 08515a and rest of the text with # 547a7f.
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.
Now paste the image in the center and add some text using colors # cf5339 and # 08515a.
Repeat the same process and add some more frames. I’ve used stroke with color # 08515a for every alternative frame.
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.
Select “Text Tool” and add some text. Use color # ffffff for the titles and # 839c9f for the rest of the text.
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.
Repeat the same process to add some more rectangles/form fields. And add text (Name, Email, Message) with color # ffffff.
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.
Step 10: Creating Retro Lines
Create a new layer and select “Pen Tool” to create a path same as we did before.
Right click on the path and select stroke path. Now follow the same process as we did on the step 6 above.
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!