Design a Clean Portfolio Website Layout in Photoshop

Today I’ll take you through the creative process of designing a beautiful and clean portfolio website layout in Photoshop.

The layout will have incorporated a beautiful slider to show your work,an original Twitter integration,displaying your latest tweet and a social area where will be displayed your links to your social network pages.

Take a look at the image we’ll be creating. You can view the final image preview below.Click it for a larger preview.


Setting up the workspace

Ok…First thing you should do is to set up the workspace.This is available for all your next layout designs.Open Photoshop and create a new file of 1300x1400px.


After,drag some guides at 150px and at 1100px,to have a centered layout.The layout will have 960 main pixels where we`ll be creating it.


Creating the Header

Now let`s design something here.Grab the rectangle tool and draw a rectangle with the height of 150px,with the #EDEDED color.Here will be the header.


After,using the same Rectangle Tool,draw another rectangle over the gray one,but give it a height of 80px and leave above it 70px.Colorize it in a dark color.I used #303030.


Now draw a rectangle of 960x90px and align it so that you`ll have 50px between it and the top.Give it the same black color used above.


I`m gonna show you now how to create for this button toolbar a nice and beautiful shadow.Duplicate this last layer and change its height from 90px to 70px then align it top with the original layer.In the image I changed the colors of the layers,to show you what you should obtain.


Ok!Now put the red layer under the white layer,change the white layer`s color to #303030 and for the red layer,give it the black color.

Now select the red layer,then go to Filter->Blur->Gaussian Blur , set a Radius of 6px and hit Ok.We`ve just obtained a nice shadow for our header.


For the layer named “white layer”,apply a smooth black gradient from top to bottom,like in the image.


Add some text in the top-left area of the project(Some buttons like Home,About or anything else).I gave them a white shadow of 90 degrees.


The logo I created myself using the Calibri font(font-size : 60px) and adding some blending options.


I added my tag near the logo:“Just enjoy it!” , using the same Calibri Font,but written Italic and with the size of 18px.


Now let`s create the buttons.Select the Rounded Rectangle Tool and draw a rectangle of 76x28px.


Now add some blending options:



Choosing Lucida Sans font and with a 16px font size and a white color type in the word “Home”.


Now create more buttons to finish the buttons toolbar.You may add a Contact button,or a Portfolio button or whatever you want.


Let`s add a little detail but with a strong effect:Let`s illuminate a little bit the logo.For this,choose the “White layer”,as we named it above and hit Ctrl+Click or Command+Click for Mac,to have the selection of the layer.Create another layer above it and with a big Soft Round Brush paint inside the selection with white just over the logo.You`ll obtain a beautiful light effect for the logo.


We`ve just finished the header.Now we`re gonna create the main content of the layout.


Designing the Main Content of the Layout

For the main content,we`re gonna design an area presenting your latest designs,or some features of your possible products.So,grab the Rectangle Tool and draw a big rectangle with the height of 400px,then add a sleek gray to white gradient overlay from top to bottom.


To make a better integration between the header and the main content,draw two lines,a black and a white one and put them one after another.This way,you`ll obtain a nice depth effect between those areas.


Download this Computer Icon and add it to our project.Put it in the right side of the project.Here will be your work`s images or product`s images.Resize the monitor a little bit to fits and integrates into the project.I made it smaller until reached 400x335px and then I had placed my own image inside.


Select the Type Tool(T) and write some content in the left side of the notebook.I used only Lucida Sans font,changing the font size depending on content.Also i used this Small Ok Icon for the “Features” list.


Now let`s create two buttons.Those buttons will be the main buttons of the layout.Grab the Rounded Rectangle Tool(U) ,set a Radius of 7px and draw a rectangle of 160x35px.


Then add the next blending options:




The button looks like this one:


Choose the button layer and hit Ctrl+Click (or Command+Click) for Mac on it to have the button selected in the canvas.(to reveal its selection).Now grab the Rectangular Marquee Tool(M),choose from the options “Intersect with selection” and select only the top-half of the button.You should have one half of the button selected now.


Grab the Paint Bucket Tool(G) and fill the selected area with white.Be sure to have another layer created above the button to paint in.Low the opacity to 8%.Write inside the button “Download” or any word you want.


Select again the button,by hitting Ctrl+Click on the layer.Create a new layer above the button,choose the Soft Round 200px Brush and paint inside the button`s selection with white.We do this to create a middle light effect inside the button.Is the same process used at the logo.


Duplicate the button and place the new button on the right side.


Now we want to create a small area under,for “more informations”.Grab the Rectangle tool and draw a gray rectangle(#EFEDEE) of 40 px.After,give it a stroke of 1px of #BBBBBB color.



Under the top stroke,draw a white line to create a beautiful effect.


Let`s add now under the PC monitor five small buttons for every slide of the slider,because this area is a big slider which rotates your products.So,grab the Elipse Tool(U) and drag 5 circles under computer.Hold Shift Key while you drag to make them perfectly round.


For the first one,set the next blending options:Inner Shadow and Color Overlay:


…and for the next four buttons,add those blending options:


Add some content in the left side of this rectangle,maybe some tags or more details about the product.


We want to design now another area for some general content,like “Who we are” or testimonials.For this,grab the rectangle tool and draw a rectangle of 1300x340px and give it a sleek gray to white gradient from top to bottom.Above the shape,add a 1px white line to integrate better with the entire design.


Now divide the shape in 3 pieces and inside the first two pieces add some text about you or what you do,and inside the last piece add a testimonials area.



That was all for the middle area.What have we done till now:


Designing the Footer:

Ok,we`re almost done here.We have to design the footer and the layout is finished.We`re gonna add some colored areas here,a portfolio area with your latest works and a social networks area displaying your latest tweet and more other buttons to your social networks.

What we want to create now is a small strip at the top of the footer,just to integrate a little bit more the footer with the rest of the layout.So,draw some stripes like in the image.


Now draw a big rectangle of 1300x420px under this stripe and add a gradient from black to dark gray,applying the settings from the next image:


If you followed the instructions correctly,you should obtained a footer like this one:


Now,choose a picture related to your work or product and add it to the layout but resize it until reaches 260x150px,then add it a 3px white inside stroke.


Now,duplicate the photo layer and make it black by adding Color Overlay Blending option.Then go to Edit->Transform->Warp and warp it until looks like this picture.


Now go to Filter-Blur->Gaussian Blur and give it a blur with a radius of 3px.Then reduce the layer`s opacity to 60px and put the layer under the original image layer.



We`ve just obtained a beautiful shadow effect for the image.I want to add another detail for this thumbnail.I want to add a frame.For this,make a selection around the thumbnail using the Rectangular Marquee Tool.Then grab the Gradient Tool(G),set a gray to white Foreground to transparent Gradient and paint with the gradient from top to bottom inside the selection.




This is what you should obtain:


Reduce a little bit the opacity of the layer and put it under the image layer.

We`ve just obtained a beautiful stylized thumbnail.


Add two more thumbnails to the layer and apply the same steps for them.


Under the thumbnails,create a shape with rounded corners of 520x75px using the Rounded Rectangle Tool(U) with a Radius of 20px.


Then add those blending options:




We`ve just obtained a depth effect for this shape.


Download this Twitter Icon and add it next to the rounded shape.


Now add some text,imitating the tweets from Twitter.


Now,download those Social Icons from and put them in the right side of the footer.


To finish the layout,add some copyright details regarding the layout,because a website is not a website if it hasn`t copyright details.


You can view the final image preview below.Click on it for a larger preview.


We have just finished our Portfolio Layout.I hope you learn something from this Photoshop Tutorial,and if you like it,don`t hesitate to spread the word!See you next time for another photoshop tutorial.

You may follow me on twitter or subscribe to my RSS Feed,or if you wanna receive more Freebies and news from DeliciousThemes,just become a part of our community.

Click to rate this post!
[Total: 0 Average: 0]

Madalin Tudose

A web developer with a crush on SEO. Having my skin in the game of website development and digital marketing for more than 10 years already, you might consider me an expert. At least this is what people call me. Honestly, I HATE that term. I prefer to describe myself as a person who takes action and risks. I test every hypothesis, document every step of the process, and implement what works.

Join the discussion

  1. Orca on December 13, 2009 at 1:36 pm Reply

    Very Good Tut !

    Only minus point is that the Logo kinda fades into the background, it needs a bit of a kick to contrast against it 🙂

  2. Zugvogel on December 13, 2009 at 3:03 pm Reply

    The layout is great. Maybe i would have chosen another menu style!
    Thanks for sharing this great work with us!

  3. Brian on December 13, 2009 at 6:20 pm Reply

    Great tut, thanks for submitting it to – I’ve added it to our stream! Check it out at and follow on to see more tutorial updates!

  4. Mars on December 13, 2009 at 9:56 pm Reply

    this is one perfect and clean tutorials, thanks for sharing

  5. Murlu on December 14, 2009 at 8:29 am Reply

    Awesome job on this tutorial.

    Other than the logo being a bit off and the “so who are we” being a bit too close to the other text, I think it’s a great addition to the design community.

  6. semmy @ minisite design on December 14, 2009 at 8:54 am Reply

    Hello this blog remind me to psdtut.. thanks for your tutorial! rally nice!

  7. nadia on December 14, 2009 at 9:30 pm Reply

    creative and interesting..also easy to learn coz it is provided with clear instruction..thnx alot!

  8. Madalin Tudose on December 15, 2009 at 9:05 am Reply

    Thank you all for your feedback! I`ll keep in mind what you`ve said!

  9. pheonixtwin on December 15, 2009 at 2:02 pm Reply

    Thank you for this it really helped me to brush up on my skills

  10. h1brd on December 16, 2009 at 5:26 am Reply

    It’s a great tutorial! Good work, thanks 🙂

  11. Tutorial Lounge on December 17, 2009 at 10:13 am Reply

    you did really professional website layout and giving informative tips as well about Photoshop.

  12. Blogger Den on December 28, 2009 at 1:04 pm Reply

    Really nice blog design you have here! I’ll have to submit your article to Blogger Den and see how far it can get, I’m sure it’ll hit the front page.

  13. Ryan Grassi on December 28, 2009 at 10:33 pm Reply

    Intimately, the article is actually the best on this noteworthy topic. I fit in with your conclusions and will eagerly look forward to your approaching updates. Saying thanks will not just be enough, for the extraordinary clarity in your writing. I will right away grab your rss feed to stay informed of any updates. Good work and much success in your business enterprize!

  14. joyoge bookmark on December 30, 2009 at 6:21 pm Reply

    nice layout, thanks for the tut..

  15. Ocala Web Design on December 31, 2009 at 11:15 am Reply

    we always design a site with this in mind

  16. baise niquer on January 1, 2010 at 9:38 am Reply

    I think you should give news on the topic more often

  17. Logo Design Portfolio on January 2, 2010 at 5:19 am Reply

    Well Explained in right manner. Thank you very much for great tutorial for everybody. Great Job!!!


  18. مركز تحميل on January 2, 2010 at 8:12 pm Reply

    Fantastic very terrible

    Awesome tutorial and beautiful

    Thank you very much

    1. David Deardorff on January 5, 2010 at 11:38 pm Reply

      I love the Latin just as much as I love the template.

      For no one the same pleasure mi amici!

      Ego labore tua utor et plus laboris tibi faciendum est.

  19. natural spectrum lamp on January 5, 2010 at 1:42 pm Reply

    I could not have said it better myself. Your site is one of my new favorite bookmarks. Keep up the great writing.

  20. Ollie Power on January 8, 2010 at 4:31 am Reply

    Well I never. I’m a fond designer myself.

  21. Cristal Compean on January 10, 2010 at 7:24 am Reply

    Hi from sweden, good blog. I will come back more often to see what’s new.

  22. Site Reviver on January 13, 2010 at 3:27 pm Reply

    Very detailed and well-explained tutorial. I agree with Orca (above commentator) that logo is not as clear as it should be, but that can be done just by playing blending options.

    Good job. Retweeted it for your 🙂

  23. Hipolito M. Wiseman on January 13, 2010 at 4:43 pm Reply

    I was searching for photography when I found your site. Good post. Thank You.

  24. Deepak Kumar on January 23, 2010 at 3:09 am Reply

    Very nice, these tutorials are absolutely great

  25. ehliyet sınav sonuçları on January 23, 2010 at 2:06 pm Reply

    The layout is great. Maybe i would have chosen another menu style!
    Thanks for sharing this great work with us!

  26. matt nathanson fan on January 24, 2010 at 12:40 am Reply

    You have an interesting point of view 😉

  27. Jd Webb on January 24, 2010 at 9:16 pm Reply

    Thanks for posting 🙂

  28. Maxi on January 30, 2010 at 1:51 pm Reply

    Very nice tut

  29. Manhattan Real Estate on February 4, 2010 at 5:03 pm Reply

    very interesting.

  30. Emadz on February 10, 2010 at 11:39 pm Reply

    Great tutorial from start to end, get useful ideas….thanks

  31. Karl on February 17, 2010 at 4:24 pm Reply

    wow, how did you do that hover-shadov effect?? i loooove it, i got to know how it works…

  32. Hadith on February 22, 2010 at 1:17 pm Reply

    Thank you! Ive got to say im so useless at photoshop but now this has kinda made it simple.

  33. tweetadder review on March 8, 2010 at 4:57 am Reply

    Twitter does not provide link juice. Simply because of their amazingly high pagerank, your tweets and also your Twitter profile page can get on the first page of Google just with a good linking strategy

  34. weight loss menus on March 8, 2010 at 11:43 pm Reply

    Great tips! It’s very clear step by step instructions. Nice. I can use it for my excercise on website designing.

    weight loss menus

    Thank You!

  35. Lacey Snooks on March 14, 2010 at 11:55 pm Reply

    Very good blog post I love your site keep up the great posts

  36. herbalecstacy on March 17, 2010 at 7:47 am Reply

    hey guys, just found this here after a fast google search. Neat website you have here! Keep it up!

  37. Edyth Llorca on March 25, 2010 at 7:39 am Reply

    would it be possible to translate your website into spanish because i have difficulties of speaking to english, and as there are not many pictures on your website i would like to read more of what you are writting.

  38. Jerry Svartel on March 28, 2010 at 7:34 pm Reply

    I’ve been searching for this precise info on this topic for a long time.  Bookmarked and recommended!

  39. avoiding foreclosure on April 3, 2010 at 11:44 pm Reply

    If we could educate buyers to be more accountable of their money, our economy may not be as bad as it is today. Great information. Happy Easter. Have a great Easter!

  40. Gabriele Beil on April 14, 2010 at 7:47 pm Reply

    This is by far one of the neatest written articles on this field. I was searching on the exact corresponding subject field and your post completely took me off with the way you understand this subject field. I congratulate your insight but do provide me to come back to input further as I’m currently extending my research on this field further. I will be back to join in this discussion as I’ve bookmarked and tag this very page.

  41. Cesar Tanaka on April 22, 2010 at 1:04 pm Reply

    I always enjoy reading intelligent articles by an individual who is definately knowledgeable on their chosen subject. I’ll be watching this thread with much interest. Keep up the good work, I will be back

  42. Rob Wilshusen on April 25, 2010 at 3:46 am Reply

    Good site! Thank you!

  43. Scottie Som on April 25, 2010 at 8:28 am Reply

    awesome post and some exciting views !! 😀

  44. mutuelle on May 3, 2010 at 7:06 am Reply

    Merci pour ce post intéressant. si vous continuer ainsi je vais devenir un lecteur fidéle

  45. Marlyn Iburg on May 26, 2010 at 4:15 pm Reply

    Wonderful concept. I love it. Thanks for sharing

  46. Smith on June 10, 2010 at 4:26 am Reply

    Hey, have been searching for answers to my questions of people who have tried this out first hand, and after looking aol, I came to this blog, it is lovely blog. Sad I took long to get to your blog. Bookmarked you already. Will come back pretty soon. Keep on writing people like me will follow you.

  47. mutuelle on June 22, 2010 at 1:14 am Reply

    thank for sharing such wonderful information with very good graphic

  48. ipad cases on June 25, 2010 at 6:39 pm Reply

    Looking through these comments and the thoughts you have provided I can clearly see that I still have a lot of things to learn. I will keep reading and keep re-visiting.

  49. small business on July 2, 2010 at 10:43 pm Reply

    love it. nice post.

  50. motoneige canada on July 13, 2010 at 7:22 am Reply

    I love this kind of tutorial explained in a simple, accurate and especially well illustrated

    thank you very much

  51. tableaux on July 16, 2010 at 1:14 am Reply

    Thank you for your feedback ! Merci pour tous ces tableaux

  52. Missie on July 22, 2010 at 3:26 pm Reply

    With so many weight loss options, how is one to know the best choice?

  53. Well done, considering…

  54. film streaming on August 10, 2010 at 2:15 pm Reply

    yes that’s exactly what he wanted to say

  55. Dabert on September 10, 2010 at 6:00 pm Reply

    You had some good points right here. I done a research on the subject and bought most peoples will agree together with your webpage.

  56. Anastasia Kinkella on September 22, 2010 at 1:12 am Reply

    Thanks a lot for breaking this down for the other percentage of individuals. We’d like much more of this! With thanks.

  57. Assurance santé on October 4, 2010 at 8:41 am Reply

    I like this topic so much
    It will help me to create a layout of my own website ^^

  58. Eric Jang on October 6, 2010 at 12:00 am Reply

    Wouldn’t indesign be a better tool for this?

  59. Christian Biever on October 12, 2010 at 8:26 am Reply

    It will depend on how you look at it and where that you’re coming from on the theme really. Ultimately beauty is in the eye of the beholder, but I’m with you on this one.

    1. Madalin Tudose on October 13, 2010 at 11:09 am Reply

      Thanks man!

  60. Enk0 on December 15, 2010 at 5:08 pm Reply

    Thanks for this tutorial! Can you please write about cutting slices in preparation for the web? I mean, for instance – I can write HTML and CSS, but I want to know how much can PS help me in minimizing that part of the job.. Thank you once again for the tutorial 🙂

  61. Greywebmon on January 4, 2011 at 6:38 am Reply

    Class lesson, but if the time to develop your own design is not, then it is not much help. Can someone tell where to find templates for sites?

  62. Gislailsonh on February 19, 2011 at 3:59 pm Reply

    Cara, adorei, quando eu olhei esse tutorial no site achei que nem ia conseguir fazer mas estár muito bem explicado e consegui sem problemas.

  63. Aman Arora on June 24, 2011 at 7:49 am Reply

    Really awesome tutorial, I will have to say you are just awesome with photoshop and graphics, keep it up.

  64. internet marketing breda on August 17, 2011 at 2:26 pm Reply

    yeah i like this one.
    you got a nice vision on this.

Leave a Comment

Your email address will not be published. Marked fields are required.