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.

portfolio-website-in-photoshop2

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.

new-image

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.

setting-up-the-canvas

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.

background-of-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.

rectangle-over-the-header

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.

button-toolbar

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.

red-and-white

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.

blured-layer-in-photoshop

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

black-gradient-in-photoshop

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.

words-with-shadow

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

photoshop-logo

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

internet-tag-for-deliciousthemes

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

button-for-the-toolbar

Now add some blending options:

gradient-for-the-button

inner-shadow

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

home-button

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

more-buttons

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.

logo-with-light

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

finished-header

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.

nice-beautiful-gradient

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.

two-lines-black-and-white

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.

macbook-notebook-image

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.

text-with-bullet-icon

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.

rectangle-tool-settings

Then add the next blending options:

button-gradient

button-shadow

stroke-for-button

The button looks like this one:

simple-button

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.

intersect-with-selection

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.

button-download

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.

light_button

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

finished-buttons

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.

rectangle-height-40px

stroke-middle

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

white-line

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.

small-buttons

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

inner-shadow-and-color-overlay

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

bevel-and-emboss

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

lucida-sans

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.

gradient-for-the-shape

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.

dummy-text1

testimonial-area

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

what-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.

zoom-area

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:

footer-gradient

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

420px-height

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.

photo-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.

warp-image

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.

blured-image

nice-shadow

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.

selection

foreground-to-transparent

drag-and-drop

This is what you should obtain:

this-is-it

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

We`ve just obtained a beautiful stylized thumbnail.

layers-and-layers

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

more-thumbnails

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

rounded-shape

Then add those blending options:

inner-shadow-for-shape

twitter-glow

twitter-gradient

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

twitter-deep

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

twitter-image

Now add some text,imitating the tweets from Twitter.

tweets-from-twitter

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

connect-with-me

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

copyright-details

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

portfolio-website-in-photoshop

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.

[Total: 0    Average: 0/5]

Madalin Tudose

I`m a web developer. I build HTML Templates and WordPress Themes which are eventually released on ThemeForest under the DeliciousThemes brand.

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. tripwire magazine | tripwire magazine on December 13, 2009 at 3:53 pm Reply

    […] Design a Clean Portfolio Website Layout in Photoshop […]

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

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

  5. 14-12-09(2:36:47) | Concept Dezain on December 13, 2009 at 9:36 pm Reply

    […] Design a Clean Portfolio Website Layout in PhotoshopToday 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… Submit More News Monday, December 14th, 2009 | Written by: Franco Averta No Comments […]

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

    this is one perfect and clean tutorials, thanks for sharing

  7. […] Design a Clean Portfolio Website Layout in Photoshop […]

  8. […] Design a Clean Portfolio Website Layout in Photoshop […]

  9. […] Design a Clean Portfolio Website Layout in Photoshop […]

  10. […] Design a Clean Portfolio Website Layout in Photoshop […]

  11. 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.

  12. 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!

  13. Twitted by paradepro on December 14, 2009 at 12:28 pm Reply

    […] This post was Twitted by paradepro […]

  14. Twitted by purplehayz on December 14, 2009 at 5:04 pm Reply

    […] This post was Twitted by purplehayz […]

  15. 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!

  16. 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!

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

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

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

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

  19. […] Design a Clean Portfolio Website Layout in Photoshop […]

  20. […] Posted in Uncategorized via deliciousthemes.com […]

  21. 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.

  22. […] Design a Clean Portfolio Website Layout in Photoshop […]

  23. […] Site Layout in Photoshop 7. 35 Useful Adobe Illustrator Tutorials For 3D Artwork 8. Design a Clean Portfolio Website Layout in Photoshop 9. 35 Tutorials for Creating and Mastering Brushes in Photoshop 10. High Dynamic Range (HDR) […]

  24. […] Design a Clean Portfolio Website Layout in Photoshop […]

  25. […] Design a Clean Portfolio Website Layout in Photoshop […]

  26. 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.

  27. 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!

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

    nice layout, thanks for the tut..

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

    we always design a site with this in mind

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

    I think you should give news on the topic more often

  31. 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!!!

    Litmusonline

  32. مركز تحميل 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.

  33. 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.

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

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

  35. 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.

  36. 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 🙂

  37. 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.

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

    Very nice, these tutorials are absolutely great

  39. 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!

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

    You have an interesting point of view 😉

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

    Thanks for posting 🙂

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

    Very nice tut

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

    very interesting.

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

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

  45. 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…

  46. 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.

  47. […] 10. Layout Portfólio Clean […]

  48. 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

  49. 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!

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

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

  51. 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!

  52. 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.

  53. 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!

  54. 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!

  55. 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.

  56. 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

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

    Good site! Thank you!

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

    awesome post and some exciting views !! 😀

  59. 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

  60. […] 3. Design a Clean Portfolio Website Layout in Photoshop […]

  61. […] 4. Design a Clean Portfolio Website Layout in Photoshop […]

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

    Wonderful concept. I love it. Thanks for sharing

  63. 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.

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

    thank for sharing such wonderful information with very good graphic

  65. 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.

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

    love it. nice post.

  67. 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

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

    Thank you for your feedback ! Merci pour tous ces tableaux

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

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

  70. Well done, considering…

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

    yes that’s exactly what he wanted to say

  72. 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.

  73. 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.

  74. 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 ^^

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

    Wouldn’t indesign be a better tool for this?

  76. 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!

  77. 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 🙂

  78. 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?

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

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

  80. 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.

  81. 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.