PSDVault.com VIP Membership 486px * 60px
clean_minimal_port_layout1

Clean and Minimalistic Portfolio Layout in Photoshop

In this tutorial you will learn how to create a clean and minimalistic portfolio layout in Photoshop. If you have any questions about this tutorial be sure to ask in the comments. Also, remember with all the tutorials, the psd is available for download.

Final Result

Click on the image to view the full-scale final result.

Resource List

Lets get started…

1. The first thing we want to do is create a new document with the dimensions of 1020×1180.

2. Using your Rectangle Marquee Tool, make a selection similar to the following and fill it with #000000.

3. Next we want to add some Blending options to our newly created layer. To do so, right click your layer in the layers palette and choose blending options from the drop down menu. Insert the following:

4. Our header will be fairly simple and basic to go along with the rest of the theme. I chose to use the font Chuck from our resource list at the top for our logo, and set my foreground to #4A4A4A.

5. The search field will be located on the right side of our header. Using your Rectangle Marquee Tool, make a rectangle similar to the following and fill it with #FFFFFF. Then add some light grey text and an icon from the Nixus Icon Pack in a similar fashion.

6. On your White Rectangle layer, add the following blending options to make your search field stand out from the header:

7. Time to move onto our horizontal navigational menu. Using your Rectangle Marquee Tool, make a selection similar to the following and fill it with #000000.

8. Next add the following blending options to your layer:

9. We then want to add a layer mask of an arrow to symbolize an active link. Using your Polygonal Lasso Tool, create a triangle similar to the following. Then go to EDIT>SELECT>INVERSE. Then choose the layer mask icon at the bottom of your layers palette.

10. The final step for our navigation is to add some links. Using the color white for your font, add some links in the following manner. Then open up the Nixus Icon Pack and add some appropriate icons next to each link, and that is it for our header.

11. Lets go ahead and get started on our featured area. This will hold our slider box displaying our products. Using your Rectangle Marquee Tool, make a selection similar to the following and fill it with #000000.

12. Add the following blending options to your layer:

13. With this layer selected, hit Command+J to duplicate your layer. Then create a blank layer under your duplicated layer and then select your duplicated layer again. Right click your layer and choose “Merge Down”. This will flatten our copied layer.

14. While your duplicated background layer is still selected, go to Filter>Noise>Add Noise and insert the following options in the dialogue box:

15. Lower this layers opacity to about 8%, and then you’ll have something that looks like the following:

16. We then want to move onto our Slider Box. Using your Rectangle Marquee Tool, create a Rectangle that looks similar to the following and fill it with #FFFFFF.

17. Add the following blending options to your layer.

18. Using your Rectangle Marquee Tool, make a rectangle similar to the following and then fill it with black. Then use your polygonal lasso tool to add a little triangular selection to the top of your box and then fill it with black on the same layer:

19. Now insert the following blending options onto its layer:

20. The music Icon used is from the Mono Icon Pack (find it in the resource list), and I set its blending mode to Overlay, and then lowered the opacity to around 40%. Then just add some text and a thumbnail in a similar way to the following.

21. We want to show what our non-active sliders will look like. Using your Rectangle Marquee tool, make a Rectangle similar to the following and fill it with #000000.

22. Insert the following blending options onto its layer:

23. Add some text to describe what your slider represents, and you’ll have something like this after you do this a few times.

24. Next we want to create the little ‘wave’ that is at the bottom of our featured box. Using your Pen Tool with it set to Shape (not path), create a shape similar to the following.

25. Insert the following blending options onto your shapes layer:

26. Your completed featured area will look like this:

27. Our content area is going to be split into two different background colors. The top color is #16273E, and the lower color is #D0E0F3. Use your Rectangle Marquee Tool to make these rectangles, and then fill them with the appropriate color on their own layers.

28. We want to add some noise to each section to give it a little texture like we did for the background of our featured area. Duplicate each color layer for your content areas background, and then repeat step 14 with them selected. On your dark blue layer, lower it’s opacity to about 8%. For the light blue layer, lower it to around 6%. You will have something that looks like this:

29. The client login box is what we will work on next. Using your Rounded Rectangle Tool with a radius of 10px, and a foreground of #D0E0F3, make a rectangle like the following:

30. Insert the following blending options onto your rounded rectangles layer:

31. Using your text tool add a title for your login box with the color #16273E, and then an icon from the Nixus Icon Pack. Using your Rectangle Marquee Tool, make a rectangle similar to the following and fill it with #FFFFFF.

32. Lower your white rectangles layer opacity to 30%, and then insert the following blending options:

33. Using your Rounded Rectangle Tool again, we want to make the input fields for the login box. Make a rectangle that looks similar to the following:

34. Insert the following blending options onto your Rounded Rectangle Layer:

35. Add some text and an icon from the Mono Icon pack and you’ll have something that looks like the following:

36. The final step to our Client Login box is to add a login button. Using your Rounded Rectangle Tool again, make a rectangle similar to the following:

37. Now insert the following blending options onto its layer:

38. All that is left is to add some text and an icon from your Nixus Icon pack and you’ll have something like this. I also copied the divider we created under the “Client Login” text and placed it under our login button.

39. The rest of the content area is all about text and icon placement. I arranged it in the following way:

40. The last thing we need to create is our footer. Using your Rectangle Marquee Tool, make a rectangle similar to the following and fill it with #000000.

41. Using your Polygonal Lasso Tool, your going to want to make a ridged selection similar to the following

and then choose Edit>Clear. When your finished clearing it, it will look something like this:

42. Insert the following blending options onto your footer layer:

43. Add some text to your footer, and then your final result will look something like the following:

Sign up for exam using expert resources.

 

 

This was written by Matthew Heidenreich

Leave a Reply

Your email address will not be published. Required fields are marked *