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 1300×1400px.

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 960×90px 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 76×28px.

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 400×335px 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 160×35px.

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 1300×340px 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 1300×420px 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 260×150px,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 520×75px 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 from ProductiveDreams.com and add it next to the rounded shape.

Now add some text,imitating the tweets from Twitter.

Now,download those Social Icons from WebToolKit4.me 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 OurTuts,just become a part of our community by just entering your name and E-mail in the for below.I promise that you won`t regret!