Feb 22nd

Clean and Minimalistic Portfolio Layout in Photoshop

Matthew Heidenreich in Tutorials with 21 comments

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:

Written by Matthew Heidenreich

Matthew Heidenreich is a freelance designer from St. Louis, Missouri. He enjoys teaching others how to create interface and web design tutorials. Find his work on his site, DeviseFunction. You can follow him on Twitter @Spicypepper.

Share Your Thoughts21 Comments

Imon February 22nd, 2010 at 12:47 am

Fantastic!
great work man

Reply
melek February 22nd, 2010 at 3:56 pm

yeaaaaaah, great tut, thx

Reply
Tirath February 24th, 2010 at 9:18 am

Awesome tutorial with nice weblayout with nice color combo
Thanks so much for posting & sharing it
Keep up good work man
God Bless you

Reply
Reglan Lawsuit February 24th, 2010 at 5:30 pm

Excellent work! I like this one a lot.

Reply
clippingimages June 8th, 2010 at 12:00 am

Fantastic great man:)

Reply
Rokaiya Yeasmin Munni July 30th, 2010 at 12:34 am

I like to create any design in photoshop. For that’s reason this tutorial is very interesting to me.

Reply
Syscl September 23rd, 2010 at 2:31 am

awesome work! thank$$$ for sharing to us

Reply
Free Business Cards December 14th, 2010 at 8:56 am

Seriously, you put in a lot of effort in creating this tutorial. You made it too easy for us and I’m stuck at the simplest step (creating that search box!)

Reply
Vitaly January 10th, 2011 at 7:17 pm

It’s perfect. Thanks!

Reply
free business cards May 12th, 2011 at 12:42 am

Thanks for the info guys – much appreciated

Reply
Maxine Plumb July 3rd, 2011 at 2:45 am

I use Tumblr as a middle-man separating the micro-blogging on Jaiku and Twitter and the weblogs (wherever I appreciate WP too). Tumblr is perfect as most sort of notebook but I wouldn’t use it as the solely way to communicate my personal brand.

Reply
mobil bekas September 15th, 2011 at 12:12 pm

Very nice result. Keep up the good work!

Reply
Daniz usman September 22nd, 2011 at 12:50 pm

Nice dude.i like your tutorial Matthew, thank you for sharing it.you explain things very well.thnxxxxxxxx

Reply
Packers Movers October 20th, 2011 at 9:09 am

Nice Tutorial… Thank you .. !!

Reply
Fairy Gnome Statue Sculpture October 22nd, 2011 at 2:30 am

Very good written information. It will be supportive to everyone who usess it, including yours truly . Keep up the good work – i will definitely read more posts.

Reply
tardive dyskinesia October 26th, 2011 at 3:40 pm

Great article thanks a ton for posting! You make the best tutorials.

Reply
Injury attorneys in Long Beach November 1st, 2011 at 11:37 am

I really can’t thank you enough! I got lately into photoshop and i was in need for some good tutorials. Thanks!

Reply
Aisle Containment January 6th, 2012 at 4:02 am

Thank you.. This made my day…. Sharing it…

Reply
Web Hosting February 13th, 2012 at 6:49 am

clean and neat design! brilliant

Reply
Taupo Accommodation February 28th, 2012 at 1:11 am

Thanks for the share dude!

Reply
Building Inspections Auckland March 7th, 2012 at 9:10 pm

Good job, i really like it a lot!

Reply