Design a Sleek Portfolio Layout in Photoshop

Learn how to design a sleek portfolio website layout in Photoshop!

Final Result

1. Create a new document that's 900×1050 pixels. Make the background colour below:

2. Next write out your Portfolio name. I'm using the fonts Bebas Neue & Feira da Fruta.

3. Next put some social icons on the banner, I'm using this Freehand Icon Set. Write out 'Follow me' in the font Jellyka Cupcakes. Rotate the text by clicking on the layer and press ctrl+t to bring up transform, then rotate. Get a Hand Drawn Arrows and copy/paste it onto the banner, have it pointing to the social icons like below.

4. Using the rounded rectangle tool draw the menu bar. Double click into Blending Options and put in the settings below:

5. While holding down the ctrl key click on the layer thumbnail (circled below). Choose the rectangular marquee tool, and while holding down the ALT key remove the top part of the highlight shape like below.

While half of the shape is still highlighted go to Select > Modify > Contract & contract the shape by 2 pixels.

Create a new layer and fill the highlighted shape white & set the opacity to 14%.

6, Next select the line tool and 2 short lines like below while holding down the shift key (to keep the line straight). This will give it a nive 3D effect.

7. Next using the font Bebas Neue write out the menu names. Double click into Blending Options and put in the following settings:

8. Using the rectangle tool draw a shape like below:

9. Using the rectangle tool again, draw a white shape like below for the slider. Create a new layer and draw a thin shape like below using the ellipse marquee tool and fill it with dark grey. Once you've fill the shape to to Filter > Blur > Gaussian Blur and put in 7.2 to make a shadow effect under the slider.

10. Next double click on the previous white rectangle to go into Blending Options. Put in the following settings:

11. Next choose an example image to go onto the slider. Place the image just above the white rectangle, right click your image's layer and Create Clipping Mask. This will fit the image inside the slider shape.

12. Elsewhere on the canvas press ctrl +' to bring up the grid. Using the pen tool draw the shape below using the grid as a guide. Duplicate the layer by dragging it to the new layer icon. Press ctrl+t and flip the duplicated layer over to make a full shape.

Hold down the ctrl key and select the 2 layers, right click and Convert to Smart Object. This will make them into 1 shape.

13. Press ctrl+' to remove the grid. Then drag the shape to the bottom of the slider like below. Double click into Blending Options and put in the following settings:

Using the pen tool draw the ends of the shape you created (see below). Make sure the pen layer is underneath the slider and the shape layer you created.

14. Next draw a small circle using the Ellipse Tool (while holding down the shift key) in the colour white. Set the Blending Mode to Multiply on the layer to make it invisible. Double click into Blending Options and put in the following setting.

15. Using the rectangular tool draw a white shape like below, double click into Blending Options and put in the following:

16. Like the slider shadow, draw a shape like below with the Ellipse tool and fill it with a dark grey. Go into Filter > Blur > Gaussian Blur and put in 7.6.

17. Next write some information using the font below.

18. Next get a portfolio image & place it over the box. Right click your image and Create Clipping Mask so it fits the box.

19. Duplicate the box until you have your  portfolio page.

20. For the footer draw a shape like below using the rectangle tool across the bottom using the colour #1b7cd8. Next go into Custom Shapes and select the triangle shape. While holding down the shift key draw a small shape then duplicate it so it goes across the footer.

Lastly write out some Copyright details.

Final Result