portfolio-website-thumbnail

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 photoshop Design a Clean Portfolio Website Layout in Photoshop

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 Design a Clean Portfolio Website Layout in Photoshop

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 Design a Clean Portfolio Website Layout in Photoshop

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 Design a Clean Portfolio Website Layout in Photoshop

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 Design a Clean Portfolio Website Layout in Photoshop

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 Design a Clean Portfolio Website Layout in Photoshop

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 Design a Clean Portfolio Website Layout in Photoshop

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 Design a Clean Portfolio Website Layout 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 Design a Clean Portfolio Website Layout 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 Design a Clean Portfolio Website Layout in Photoshop

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

photoshop logo Design a Clean Portfolio Website Layout in Photoshop

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 ourtuts Design a Clean Portfolio Website Layout in Photoshop

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

button for the toolbar Design a Clean Portfolio Website Layout in Photoshop

Now add some blending options:

gradient for the button Design a Clean Portfolio Website Layout in Photoshop

inner shadow Design a Clean Portfolio Website Layout in Photoshop

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

home button Design a Clean Portfolio Website Layout in Photoshop

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 Design a Clean Portfolio Website Layout in Photoshop

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 Design a Clean Portfolio Website Layout in Photoshop

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

finished header Design a Clean Portfolio Website Layout in Photoshop

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 Design a Clean Portfolio Website Layout in Photoshop

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 Design a Clean Portfolio Website Layout in Photoshop

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 Design a Clean Portfolio Website Layout in Photoshop

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 Design a Clean Portfolio Website Layout in Photoshop

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 Design a Clean Portfolio Website Layout in Photoshop

Then add the next blending options:

button gradient Design a Clean Portfolio Website Layout in Photoshop

button shadow Design a Clean Portfolio Website Layout in Photoshop

stroke for button Design a Clean Portfolio Website Layout in Photoshop

The button looks like this one:

simple button Design a Clean Portfolio Website Layout in Photoshop

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 Design a Clean Portfolio Website Layout in Photoshop

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 Design a Clean Portfolio Website Layout in Photoshop

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 Design a Clean Portfolio Website Layout in Photoshop

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

finished buttons Design a Clean Portfolio Website Layout in Photoshop

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 Design a Clean Portfolio Website Layout in Photoshop

stroke middle Design a Clean Portfolio Website Layout in Photoshop

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

white line Design a Clean Portfolio Website Layout in Photoshop

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 Design a Clean Portfolio Website Layout in Photoshop

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

inner shadow and color overlay Design a Clean Portfolio Website Layout in Photoshop

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

bevel and emboss Design a Clean Portfolio Website Layout in Photoshop

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

lucida sans Design a Clean Portfolio Website Layout in Photoshop

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 Design a Clean Portfolio Website Layout in Photoshop

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 Design a Clean Portfolio Website Layout in Photoshop

testimonial area Design a Clean Portfolio Website Layout in Photoshop

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

what till now Design a Clean Portfolio Website Layout in Photoshop

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 Design a Clean Portfolio Website Layout in Photoshop

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 Design a Clean Portfolio Website Layout in Photoshop

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

420px height Design a Clean Portfolio Website Layout in Photoshop

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 Design a Clean Portfolio Website Layout in Photoshop

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 Design a Clean Portfolio Website Layout in Photoshop

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 Design a Clean Portfolio Website Layout in Photoshop

nice shadow Design a Clean Portfolio Website Layout in Photoshop

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 Design a Clean Portfolio Website Layout in Photoshop

foreground to transparent Design a Clean Portfolio Website Layout in Photoshop

drag and drop Design a Clean Portfolio Website Layout in Photoshop

This is what you should obtain:

this is it Design a Clean Portfolio Website Layout in Photoshop

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 Design a Clean Portfolio Website Layout in Photoshop

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

more thumbnails Design a Clean Portfolio Website Layout in Photoshop

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

rounded shape Design a Clean Portfolio Website Layout in Photoshop

Then add those blending options:

inner shadow for shape Design a Clean Portfolio Website Layout in Photoshop

twitter glow Design a Clean Portfolio Website Layout in Photoshop

twitter gradient Design a Clean Portfolio Website Layout in Photoshop

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

twitter deep Design a Clean Portfolio Website Layout in Photoshop

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

twitter image Design a Clean Portfolio Website Layout in Photoshop

Now add some text,imitating the tweets from Twitter.

tweets from twitter Design a Clean Portfolio Website Layout in Photoshop

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

connect with me Design a Clean Portfolio Website Layout in Photoshop

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 Design a Clean Portfolio Website Layout in Photoshop

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

portfolio website in photoshop Design a Clean Portfolio Website Layout 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 OurTuts,just become a part of our community.

Written by Madalin Tudose

Madalin Tudose is a web designer and developer who loves to inspect websites for new designing techniques and trends. He`s the founder of Ourtuts, where he blogs about anything related to web development.