Learn To Create A Clean Style Portfolio Layout

In Blog, Interface


What We’ll Be Creating

Clean Portfolio Layout

Resources Used In This Tutorial

Creating Our Layout Background

Create a new document (Ctrl + N) with the dimensions 1200 x 1245 with a white #ffffff background. Right-click the background layer and select “Layer From Background” from the the menu, give the background layer a name then add a “Gradient Overlay” using the settings below.

Clean Portfolio Layout

Select the “Elliptical Marquee Tool” (M) then drag out a big ellipse onto the top of the canvas.

Clean Portfolio Layout

Create a new layer above the background layer then label it “Background Jazz”. Now select the “Gradient Tool” with the following options.

Clean Portfolio Layout

Drag the gradient over part of the top of the ellipse, we don’t want to fill the whole ellipse.

Clean Portfolio Layout

Deselect the ellipse (Ctrl + D) and you should have something like this.

Clean Portfolio Layout

Duplicate, rotate and adjust the opacity of each layer randomly placing them in the top half of the canvas. I’ve simply done this 3 times.

Clean Portfolio Layout

Creating The Header

On the left side of the canvas add the portfolio title and slogan using the “Type Tool” (T). The font is used is called “Vijaya” and can be downloaded from the resource list.

Clean Portfolio Layout

Select the main title layer then add the following layer styles.

Clean Portfolio Layout

Clean Portfolio Layout

You should have something like this.

Clean Portfolio Layout

On the right side of the title and slogan add a simple textual navigation using the same font. For the hover effect on one of the links simply turn the text black and add a underscore.

Clean Portfolio Layout

Clean Portfolio Layout

Creating The Featured Area

Select the “Rounded Rectangle Tool” (U) with a radius of 10px then drag out a decent sized rectangle underneath the header elements.

Clean Portfolio Layout

Clean Portfolio Layout

Now select the “Rounded Rectangle Layer” and label “Featured” then add the following layer styles.

Clean Portfolio Layout

Clean Portfolio Layout

Now set the layers opacity to 50%, you should have something like this.

Clean Portfolio Layout

We now need to add our featured image inside of the rectangle, the image should be around with 15px smaller all the way around the rectangle. To do this first load a selection around the featured rectangle.

Quick Tip:

To load a selection click the little thumbnail in the layers window on the desired layer whilst holding down the CTRL key on the keyboard.

Clean Portfolio Layout

Once the selection has been loaded go to “Select > Modify > Contract”. Contract the selection by 15px then press OK. With the selection still loaded download and open the featured image.

Copy the featured image to the clipboard then head back to your original canvas and go to “Edit > Paste Special > Paste into” (Alt + Shift + Ctrl + V”. Maneuver and resize the image so it looks how you want it to. Finally deselect the selection with “Ctrl + D”.

Clean Portfolio Layout

Select the “Pen Tool” (P) or the “Polygonal Lasso Tool” (L) and make a selection over the featured image like the image below.

Clean Portfolio Layout

Fill (G) the selection on a new layer with the color white #ffffff, then set the layer opacity to around 35%.

Clean Portfolio Layout

Next, we need to add the featured image caption. Simply select the “Rectangular Marquee Tool” (M) then drag out a rectangular selection across the bottom of the image.

Clean Portfolio Layout

Fill (G) the selection with any color then add the following layer styles.

Clean Portfolio Layout

Clean Portfolio Layout

Clean Portfolio Layout

Select the “Type Tool” (T) then add some caption text inside the rectangle, you should have something like this.

Clean Portfolio Layout

Creating The Featured Gallery Slider

Select the “Rounded Rectangle Tool” (U) then drag out a small square underneath the featured area.

Clean Portfolio Layout

Change the squares color to white #ffffff then contract the square by 5-10px just like we did to our featured image. Once contracted paste inside one of your portfolio images.

Clean Portfolio Layout

Repeat this step 3 more times so you have a total of 4 images.

Clean Portfolio Layout

On the left and right sides of the thumbnail images add two arrows from the custom shapes library.

Clean Portfolio Layout

Add the following layer styles to the two arrows.

Clean Portfolio Layout

Clean Portfolio Layout

You should now have something like this.

Clean Portfolio Layout

Creating The Content

Start off by adding a simple divider underneath the featured area.

Clean Portfolio Layout

The divider was created simply with the “Type Tool” (T) using the “Dash Key (——)”. Once you’ve created the divider add the following layer styles.

Clean Portfolio Layout

Clean Portfolio Layout

Finally set the dividers opacity to 50% and your done. Now, using the “Type Tool” (T) add the portfolio tag line, the font i used is “Vijaya” which you can download from the resource list.

Finish off the tag line by duplicating the divider you created earlier then dragging it underneath the tag line.

Clean Portfolio Layout

Download the “Woofunction Icon Set” from the resource list then add two icons into the content area. On the side of each icon add a main heading and and sub heading.

Clean Portfolio Layout

Underneath each heading and sub heading at a decent sized paragraph, separate each section with the divider we created earlier only this make it vertically.

Clean Portfolio Layout

In the space left on the right side of the content area add a little blog feed.

Clean Portfolio Layout

Finally duplicate the long horizontal divider and drag it underneath the content we just created.

Creating The Twitter Box

Select the “Rounded Rectangle Tool” (U) then drag out a rectangle underneath the last divider you just created.

Clean Portfolio Layout

Now add the following layer styles to the twitter rectangle.

Clean Portfolio Layout

Clean Portfolio Layout

Clean Portfolio Layout

You should have something like this.

Clean Portfolio Layout

Inside the rectangle add a little twitter bird of your choice then add the twitter text in which you normally see on a tweet.

Clean Portfolio Layout

Creating The Footer

Duplicate the 3 “Background Jazz Layers” then drag them to the bottom into the footer area.

Clean Portfolio Layout

Finally inside the footer add your copyright text and maybe some social icons from the “Woofunction Icon Set”.

Clean Portfolio Layout

Ready to become Pro?

Thanks for taking part in this tutorial,  if you managed to finish this tutorial I’d love to see some of your results. Feel free to post them up on our Facebook Fan Page.

Clean Portfolio Layout
Purchase Psd Now

Wilma Hamlin

Wilma Hamlin is a creative designer & writer. She writes for Crayonify. Being a designer as well she use to create amazing designs using many tools. In her lesuire time she love to read books and tries to learn new designs.

  1. June 1, 2011 at 6:17 AM

    Typical “Richard” style, back to work uh, great tutorial after a long time since hvdesigns :), thanks for sharing….

  2. June 1, 2011 at 12:04 PM

    Hi there Richard,

    Once again a clean and nice tutorial! going to try it as soon as im @home!



  3. Wilma Hamlin
    June 1, 2011 at 5:18 PM

    @Rajasegar: Don;t no know wether thats was a positive or negative comment. Can you describe “Typical Richard Style”?

    @Martijn: Thanks for your comment, much appreciated

  4. June 1, 2011 at 7:37 PM

    He returned!!! Thanks man!

  5. David
    June 2, 2011 at 6:17 PM

    Great tutorial Richard,

    Could you eventually do a converting a Photoshop layout into HTML and CSS.

    And also a tutorial on Typography. It would be muchly appreciated!


  6. Wilma Hamlin
    June 3, 2011 at 3:34 PM


    I am pondering the thought of doing a PSD Conversion.

  7. June 3, 2011 at 5:18 PM

    I used to read Chris Spooner blog, but it seems that there’s many others who creates these great tutorials, like you. I’m first time here, and your blog seems to be the great source for graphic designers.


  8. Wilma Hamlin
    June 3, 2011 at 5:46 PM

    Thanks so much “Haris Tahic” its comments like yours which keeps me going.
    Thank You

  9. June 4, 2011 at 3:22 AM

    @Richard, I was just mentioning the awesome style of your works man, no offence meant, i am a huge follower of HVDesigns, i have almost all the tutorials saved in my hard disk from the site, managed to practice a few, you are a big inspiration to me, thanks a lot for all the things you shared with us through the blog over the years and hope to see a lot in the future also, Cheers :)

  10. Wilma Hamlin
    June 4, 2011 at 7:49 AM

    @RAJASEGAR: many thanks for clearing that up. glad i inspire you. I’m sure i will be creating awsome tutorials for years to come.

    Just a note to all of you, the PSD to HTML tutorial looks like it will get written but a fellow designer of mine might be writing it. I will definetly post it up as soon as its done.

  11. Adel
    June 4, 2011 at 9:19 AM

    Another excellent web design tutorial from by Richard Carpenter, one of my best and favorit web design teachers

  12. June 5, 2011 at 4:25 AM

    Wonderful Layout ..! It’s hard for me i m just learning new things in photoshop thanks for this post ..!

  13. June 5, 2011 at 6:42 AM

    Wow, it’s really very clean………

  14. darphen wangchuk
    June 5, 2011 at 9:39 PM

    awesome work…it really inspired me….guess u got new follower n i got new awesome teacher…..

  15. June 7, 2011 at 10:11 AM

    Awesome work, it looks really nice. I got 1 question: I can’t reallty get out of the HTML and CSS code maybe you can help me :D


  16. Marlies
    June 9, 2011 at 5:32 PM

    Thank you very much for this great tutorial! Can’t wait to do the PSD to HTML tutorial! Hope it will go online soon :)

    Thanks again!

  17. June 16, 2011 at 12:25 PM

    Wow! Great tutorial, I like the layout. Great, just great.

  18. June 24, 2011 at 7:25 AM

    i will keep it to my hdrive and blog… thanks.. Richard

  19. June 28, 2011 at 7:37 PM

    Tutorials like this proves that you can get great information for free, still! Most of the Photoshop sites i visit charge for such tutorials. Thanks for explaining everything in details and providing all this info for free!

  20. June 29, 2011 at 4:17 AM

    great design. but i still have a hard time making it to htms or css for website.

  21. June 29, 2011 at 3:00 PM

    Great tutorial Richard.. Love it..

  22. July 8, 2011 at 3:40 PM

    thank for share. I like it

  23. July 15, 2011 at 6:50 PM

    Awesome tutorial. Following it now and hope to use my version for my portfolio site. Thanks a lot!

  24. Dharmesh
    August 2, 2011 at 6:58 PM

    really useful information,

  25. August 3, 2011 at 5:15 PM

    I’m a first-time viewer and loved the tutorial! Can’t wait to see the PSD to HTML tutorial; something I am looking forward to learning. You have another follower…

  26. tiphaine
    August 10, 2011 at 11:36 AM

    hello, what do you advise me as hoster to create my website? i want to create a website for show my work. thanks :)
    ps: great tutorial

  27. August 15, 2011 at 9:23 AM

    great work! really appreciate it!

  28. August 18, 2011 at 3:19 PM

    I was just saying to one of my friends, I want to create, a digital portfolio. Then I came accross your site on twitter. Wow, just the kind of layout I want. Have a look at my blog, I am new to website designing and having little time, I created a blog, just for now tho.

  29. October 7, 2011 at 11:40 PM

    Thanks you so much for this tutotial.

  30. October 24, 2011 at 1:41 PM

    Awesome tut


  31. November 3, 2011 at 5:53 AM

    great work! really appreciate it!

  32. December 13, 2011 at 9:51 AM

    some queries clear with this nice tut.


  33. January 26, 2012 at 7:53 AM

    great work!非常棒。

  34. February 23, 2012 at 11:44 PM

    Awesome tutorial! Also really great content on your site, your work is an inspiration. :)

  35. February 28, 2012 at 1:51 AM

    This tutorial was just amazing! Thank you so much for sharing. You are very talented.

  36. noopur
    March 22, 2012 at 3:39 PM


  37. Mitch
    March 29, 2012 at 5:23 PM

    Great work! Also looking forward to the PSD to HTML tutorial.

  38. March 30, 2012 at 8:14 AM

    great !Could you be my master? Im a programmer.I am now studying PS.I take some projects and need a designer.

  39. Armonius
    April 13, 2012 at 3:53 PM

    I appreciate the effort that went into this tutorial :) I’ve made my design a little bit different here and there but it only added to how much i’ve learnt.

    I did have some issues on the Mac with the ‘Paste into’ command. When i copied the file from Finder and tried to paste it, it gave me a default image of a jpg. To fix this i had to open the image in Photoshop and use the marquee tool to select the entire image and then copy it. If anyone knows what caused this problem, i’d be pleased to learn it. Thanks.

  40. April 28, 2012 at 7:45 AM

    Awesome tutorial thanks. I have just started designing, it helped a lot.

  41. May 3, 2012 at 8:33 PM

    Cool page. Thanks for the neat tutorial :)

  42. bryan strader
    May 6, 2012 at 6:40 PM

    I ran this whole tutorial through a trial version of PS on a mac. It was a great way to dive and learn how to use photoshop. there were some minor differences but nothing difficult to figure out. Thanks.

  43. Wai Phyoe
    May 18, 2012 at 10:24 AM

    I love that design.Thank you very much

  44. Nader.k
    May 21, 2012 at 1:08 PM

    So Nice Richard, but it’s toooo easy :D

  45. May 26, 2012 at 9:39 AM

    very nice tuto..!!!

  46. Tatok
    June 28, 2012 at 8:56 PM

    Thanx u very much for the tutorial..

  47. RONHON
    August 7, 2012 at 3:25 PM

    thankyou so much for the turorial it clears many concepts of webdesigning

  48. August 11, 2012 at 9:29 AM

    thank you … for the tutorial

  49. September 2, 2012 at 2:42 PM

    good tuto !!!
    simple design and clean

  50. daisopa
    September 6, 2012 at 12:17 PM

    great jop thx !!!

  51. Gemma
    September 6, 2012 at 10:21 PM

    Tutorial looks great, I’m completely new to Photoshop and I’m lost on one section, at the beginning..

    If anyone can help, it’s really appreciated. I’m having difficulty with the Gradient Tool. I’ve followed the steps until the ‘Background Jazz’ layer. I can’t get the gradient to fill only the top of the eclipse and not the entire thing. When I drag the gradient it automatically fills the entire selection. I don’t know where I’m going wrong?

  52. September 27, 2012 at 7:41 AM

    thx !!!

  53. October 5, 2012 at 6:47 PM

    Excellent tutorial, I did each step and the result is wonderful, thanks a lot!!! I’d like to know how to code it in HTML/CSS…

  54. November 16, 2012 at 6:51 AM

    Hi Richard,
    Great design. Need some tutorial for wordpress conversion for this web layout.

  55. Basant
    December 5, 2012 at 12:06 AM

    really very good benefit tutorial ,, I’m newer in the web design field ,, it helped me very much ,,, thanks again ,,, i have a question for you if you please to me..!

    how can i remember all these steps in Tut if i wanted to design mine? and how can i be creative to design like you?

    thank you again Richard :)

  56. January 2, 2013 at 11:07 AM

    oh,very good tutorial.Thanks.

  57. January 10, 2013 at 8:39 AM

    coool learn

  58. January 17, 2013 at 1:43 AM

    thanks for your tutorial, great, I followed this step by step

  59. mary
    January 24, 2013 at 12:12 PM

    thankyou so much… this is very useful for me…

  60. komal gotwal
    November 13, 2014 at 4:37 PM

    well well .. this web layout is easy to understand .. it’s good not like as typical .
    thanks for sharing
    keep going

  61. November 17, 2014 at 12:42 PM

    It is really a beautiful and creative portfolio having some vital information over the subject. Thank you for share.

  62. Shashank Gwari
    December 2, 2014 at 1:44 PM

    Hi Komal, Thanks for your feedback. We will continue to post interesting and unique tutorials in future also. Will look forward for hearing from you again.


  63. December 20, 2014 at 8:59 AM

    Thanks so much for sharing the info. This tutorial has been really helpful to me!

Give Us Your Feedback

Here on Crayonify we use something called Gravatar, its a little image which will appear next to your name when you comment on a blog. Using a gravatar will help us recognise genuine comments from the spam comments.

Don't forget to leave a comment on this post, we appreciated your feedback good or bad.

There's currently 63 Comments On Learn To Create A Clean Style Portfolio Layout, why not add yours!

Leave a Reply

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

Auto Scroll To The Top