Jan 12th

Beautiful and Clean Portfolio Layout in Photoshop

Matthew Heidenreich in Tutorials with 18 comments

In this tutorial you will learn how to make a beautiful and clean 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.

Lets get started

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

2. Starting from the top, we will begin with our header. Using your Rectangle Marquee Tool make a selection similar to the following and fill it with #000000.

3. Next we need to add some blending options. Right click your layer in the layers pallet and choose Blending Options from the drop down menu and insert the following:

4. When we are done with our logo it will look something like this:

5. The icon is from Milky Icon Set. The font used is Myriad Pro, and be sure to put “Function” and “Studios” in their own layer. Here are the blending options for your “Function” layer:

6. These are the Blending Options for our “Studios” layer:

7. Next we want to create our navigation. Using your Type Tool with a font similar to Helvetica, lay your links out in a similar way as the following. The color used for the links is #181B1E, and the color for the description on each link is #3E7FA0.

8. We want to add some dividers between our links, so to do so use your Rectangle Marquee Tool to make a 1px wide selection similar to the following and fill it with #000000.

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

10. Repeat this process between all of your links and you’ll have something that looks like this:

11. That is it for our header! It’s time to move onto our featured area. Using your Rectangle Marquee, make a selection similar to the following and fill it with #000000.

12. On this new layer, insert the following blending options

13. Using your Rectangle Marquee Tool again, make a selection similar to the following and fill it with #FFFFFF. This will serve as the border to our featured thumbnails.

14. Insert the following blending options onto its layer

15. Then just add a thumbnail image inside your rectangle and place some text below it. It will look something like this

16. Repeat this process two more times and your featured area will look like this

17. We need to add some arrows to allow users to slide between our featured items. Using your Rectangle Marquee Tool, make a selection similar to the following and fill it with #FFFFFF

18. Insert the following blending options onto its layer

19. Then just use your Polygonal Lasso Tool to make a triangle and fill your selection with #000000.

20. Repeat the process again for the right side. The last thing we need to do for our Featured area is to add a heading for it. Using the font Georgia, add some white text in a similar way to the following. After doing so, use your Custom Shapes Tool and place some hearts around your text.

21. Here are the blending options for your hearts:

22. That’s it for your featured area! We are almost done. Time to move onto our content area.

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

24. Insert the following blending options onto its layer

25. For this next section, make sure these layers are above your Featured Areas. Using your Rectangle Marquee Tool, make a selection similar to the following and fill it with #FFFFFF

26. Insert the following blending options onto your newly created layer

27. Lower your layers Opacity to about 20%, and you’ll have something that looks like this

28. Use your Rectangle Marquee Tool yet again and make a selection similar to the following and fill it with #FFFFFF

29. For the blue background of your sidebar I used the color #D4EAF5. Place your text in a similar fashion as I have, and add some icons to spice up the design a bit. I used this free icon set for the recent news and testimonials icons.

30. For the left side I used the font Georgia again for the heading, and helvetica for the content. The twitter icon can be obtained at the following link . You will have something like the following once you add some content

31. The last thing we need to create is our footer. Make a selection of the rest of the document and fill it with #000000. Then insert the same blending options you used on the background of your featured box (step 12), and you’ll have something that looks like this

32. Lastly, I added some social media icons to our footer that I got from the psdtuts website . Then add your copyright notice and your finished. For the “Lets get social” text, and the “Copyright“, I used the font Myriad Pro. Once you are finished, your document will look something like the following

Learning of web designing is easy with 220-702 online training. Just download the 70-647 video demos and 70-290 study guide to practice and learn web designing in days.

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 Thoughts18 Comments

Kyle January 13th, 2010 at 9:10 am

Looks really nice. Great Job!

You have been cranking these tutorials out lately. Any chance of doing the html/css conversion on any of them?

Keep up the good work!

Reply
- Matthew Heidenreich January 13th, 2010 at 11:48 am
  
  At some point in the future I want to offer some conversion tutorials, but as of now they will just be for Photoshop. Once we get everything running smoothly on the site though, we will have them.
RIchie January 14th, 2010 at 11:25 am

Very detailed tutorial. I like the end result. I’ve been wanting to ask you. Did you design the theme for Devise Function as well.. I just love this theme….. simply brilliant

Reply
- Matthew Heidenreich January 14th, 2010 at 11:53 am
  
  Thanks Richie for comments. I generally like to make my tutorials pretty details just so anyone can follow it no matter what level they are at. And yes, I did design the DeviseFunction theme as well, and i’m glad you like it.
Adii January 15th, 2010 at 8:23 am

Good Job,thnx for this tutorial

Reply
Ryan January 16th, 2010 at 10:42 am

Nice tutorial, will be helpful to many.

Reply
shubhojit January 18th, 2010 at 2:39 am

Thanks for the tutorial. Did take time to complete it ‘coz was searching for the icon. Thanks very much

Reply
- Matthew Heidenreich January 18th, 2010 at 11:03 am
  
  I had links to the icons within the tutorial. Hopefully you didn’t overlook that.
Meriton January 18th, 2010 at 3:43 am

Great job there Matthew, helped me a lot

Reply
Imon February 25th, 2010 at 2:32 am

Looks Great, Love it!

Reply
David Antadze February 27th, 2010 at 1:23 pm

Hello Matthew I am Georgian and often viait your blog. Georgia often is uCoz and DLE system sites and many people used free hosting uCoz.You are great designer My name is David

Reply
Yasmin Lawsuit March 17th, 2010 at 2:28 pm

Nice design. Very clean and it looks like it would be easy to build it out.

Reply
ravi April 20th, 2010 at 1:42 pm

Great, just love it.
Thanks for tutorial.

Reply
Hawk Designs April 23rd, 2010 at 2:40 am

Nice tutorial there! Thanks

Reply
Hulusi July 13th, 2010 at 6:21 am

perfect !

Reply
Depakote Pregnancy August 22nd, 2011 at 6:08 pm

Great tutorial, and really nice clean looking portfolio you have here. Thanks for the help!

Reply
ansiklopedi September 29th, 2011 at 11:24 am

Wooow realy perfect!!

Reply
Melinda Helbock October 27th, 2011 at 4:55 pm

Thanks for the great tutorial, it was really easy to follow and helpful.

Reply