NEW! Download Free .PSD file of this template Offered free in our forum.

Click on the thumbnails to full view the images.

This photoshop tutorial will show you how to make this polished, classy and very stylish portfolio layout.



1. Start off by creating a new canvas, 800*800 pixels.




2. Fill it with a dark grey color, doesn't mater with which.

3. Duplicate the layer. Select the duplicated layer and go to Layer >> Layer Styles >> Pettern Overlay.
4. Add this pattern overlay.



if you do not have a wide scanline pattern, feel free to use our image and define it as a pattern.



5. Add a new layer. Go to Custom Shapes Tool, and draw a rounded square as shown on the picture below (use a dark grey colour for it, we used #3a3434)

6. Go to Layer >> Layer Styles >> Blending options and apply this border effect, using almost a black colour - #002211.



7. Switch to the "Pattern Overlay" tab and apply same scanlines as we did before, only this time you will use 200% scale, to make the lines twice as wider.



So far, this is what you got (small insight into teh corner of the template)


8. Go to Shapes again, select the Rounded rectangle tool and draw a header, as shown on the shot below.


9. Select a photo of your choice, which will be on your header. You don't have to crop it to the size of the header, it's easier to first paste it unto the header (be sure it's the most upper layer) and remove the remains.


10. Duplicate the layer with the photo.

11. To add a dreamy effect to your header, go to Filter >> Blur >> Gaussian Blur and apply these settings:


12. Set the Opacity of the upper (blurred) layer to 50%.


13. Select the layer with the rounded rectangle (he header) and go to Layer >> Layer Styles >> Drop Shadow, and apply this shadow to give it even more smooth and dreamy effect.


This is what we have achieved so far...


14. If you used a bright photo for the header, you might want to stick with the initial colours scheme, however, we used a dark picture of an ocean, therefore we need to have some more contrast. So... Select the background layer (the one with the small scanlines) and go to Image >> Adjustments >> Brightness / Contrast, and apply some more contrast and reduce brightness, as we did...


If you follow all the steps until now, you are supposed to have, more or less, something like this:


15. Time to add navigation menu. Select the Rounded rectangle tool and draw a small button and shown on the picture below. You don't need to set the border as we will have it already "stored" in the settings. If you didn't save this style, do the same steps as you did with the body of the template.


16. Go to Layer >> Layer Styles >> Gradient Overlay and apply this gradient to your buttons.


For the gradient itself, use these settings:


Colours from left to right: #303030 ... #676362 ... #010101
17. Place your button layer below teh layer with the header and the photos.
18. Duplicate the layer 4 or 5 times, depending on the need of your template and spread the duplicated buttons across the line below the header, as shown on the picture below. (Click to enlarge)

19. Add text to each of your buttons. We used Dark yellow colour and the "MagistralBlack" Font. After having added text to each button, go over each one of them again, and add a little shadow to each button, by going to Layer >> Layer Styles >> Drop Shadow, and adding a shadow of the following structure (back, #000000)


This is what we got...


Your navigation menu is ready, so we are slowing getting there... click on the thumbnail to preview what we got so far.

20. Add logo or a title to your header... This is very optional and depending on your taste, IR, if you have a ready - to - use logo - you are going to have even less work.


21. If you want to add some more "dreamy effect" to this very polished and very stylish template, set the "Fill" of the text to about 50%.


22. Create a new layer. Using the Marquee Tool, draw a box in the middle of the body, like this:


23. Fill the box with very dark green colour of your choice.

24. Reduse the fill opacity of this box to 33%. The idea is just to make this box a little darker.


25. Go to Layer >> Layer Styles >> Stroke and add a small black border to the main template's body.


26. Add text to the lower part of the template, below the main body box we created earlier. Click to enlarge.



That is it! You are done! If anything is unclear, feel free to ask questions or show off your results in the Forum thread where this photoshop tutorial is discussed.

More Photoshop tutorials in LoreleiWeb Forum

DOWNLOAD THE .PSD FILE OF THIS TEMPLATE FREE - For our forum members only, click to register and download.