How to create a clean and design portfolio layout using Photoshop

In this Photoshop tutorial I will show you how to build a layout to create a website for a webdesigner or a little webagency. I don’t think this tutorial will be easy for beginners, so If you have some knowledge in webdesign… there you go!

So now, go ahead to start this tutorial, open Photoshop and follow my explanations step by step, I see you by the final step ;)

But after look at the final result of this Photoshop tutorial (or click here to download the psd file):

Tutorial Photoshop - Layout Template and webdesign

Step 1 – Create a new document

To start the creation you need of course to create a new document, go to File> New (Ctrl/Cmd + N) and edit the name (Template in my example), change the canvas width (980px) and height (1000px).

Tutorial Photoshop - Layout Template and webdesign

Step 2 – Create the background

Change the foreground colour to dark brown (#38332f) and go to Edit> Fill or hit Shift + F5. The layer “Background” is insistently filled in brown.

Tutorial Photoshop - Layout Template and webdesign

Step 3 – Create the guides

Go to View> Show> Guides (or use the shortcut Ctrl/Cmd + ;) , and create a new horizontal guide on 80th pixels, to do it go to View> New guide> select horizontal, enter 80px and hit Ok. Do it again to create a horizontal guide on each pixel: 30, 40, 80, 310, 320, 330, 350, 570, 770 and 780. And now do it again with the vertical guides: 50, 330, 350, 630, 650, 660, 920, and to finish 930.

Tutorial Photoshop - Layout Template and webdesign

Step 4 – Create the header

Create a new group and name it “header”. Select with the Rectangular marquee tool (M) the top of the canvas (height 80px). Create a new layer (go to Layer> New> Layer or hit Ctrl/Cmd + N) and name it “header bg”, now use the white colour to fill in the selection.

Step 5 – Fill in the header

Now you’re going to add a gradient into the header, go to Layer> Layer style> Gradient overlay and configure the colour: grey to light grey.

Tutorial Photoshop - Layout Template and webdesign

Tutorial Photoshop - Layout Template and webdesign

Tutorial Photoshop - Layout Template and webdesign

Step 6 – Add the logotype

To create the logotype you have to start with the creation of a new group (name it “logotype”) then create a new layer (go to Layer> New> Layer or hit Ctrl/Cmd + N) and name it “cube” On this layer create a cube (use the Rectangular marquee tool (M) to do it, don’t forget to hit the Shift to keep a good proportion) fill it with a gradient (use the layer styles).

Tutorial Photoshop - Layout Template and webdesign

Tutorial Photoshop - Layout Template and webdesign

Use the Type tool to add a big 2 above the cube, drop it on the bottom right corner. Then, right-click on layer “2” and select Rasterize type. To finish, go to Layer> Layer style> Inner shadow and use the settings from the following image for Inner Shadow.

Tutorial Photoshop - Layout Template and webdesign

And to finish the logotype, use once again the Type tool to add the title (for your information I used the Kabel font in this example).

Tutorial Photoshop - Layout Template and webdesign

Step 7 – Create the menu

Begin the menu to create a new group (go to Layer> New> Group) and name it “Menu” then select the Rounded Rectangle Tool (U), set the radius to 50px and create a rounded rectangle on the top side on the right of the lofotype. Use the guides to help.

Tutorial Photoshop - Layout Template and webdesign

Rename the layer “menu bg” and design it with a gradient and a stroke (use the layer styles to add them). Go to Layer> Layer style> Gradient overlay and use the settings from the following images.

Tutorial Photoshop - Layout Template and webdesign

Use the Type tool to add the links.

Tutorial Photoshop - Layout Template and webdesign

Right-click on the layer “menu bg” and select duplicate the layer. To create the hover effect on the menu you’re going to change the colour of the first link to red (just change the layer styles on the menu bg copy layer)!

Tutorial Photoshop - Layout Template and webdesign

Now right-click on the layer “menu bg copy” and select Rasterize layer and cut the right side. Then change the colour of the first link to the white.

Tutorial Photoshop - Layout Template and webdesign

And to finish add a drop shadow on the layer “menu bg”, use the settings from the following image.

Tutorial Photoshop - Layout Template and webdesign

And to finish the menu you must create a separation between the links. To do it create a new layer (go to Layer> New> Layer or hit Ctrl/Cmd + N) and name it “separation”, use the Rectangular marquee tool (M) to create a selection from the top to the bottom. This separation is made with a first grey line (#c2c2c2) and a second white line (#fff). Take a look at the following image for reference.

Tutorial Photoshop - Layout Template and webdesign

And duplicate the layer separation time to time.

Tutorial Photoshop - Layout Template and webdesign

Step 8 – Create the carousel

Create a new group (go to Layer> New> Group) and name it “Carousel”. In this group create a new layer (go to Layer> New> Layer or hit Ctrl/Cmd + N) and name it “Carousel bg”. Then use the Rectangular marquee tool (M) to create a rectangular selection of 280x300px on the right side of your document. Change the foreground colour to the white and go to Edit> Fill.

Create a new layer (go to Layer> New> Layer or hit Ctrl/Cmd + N) and name it “shadow”, now change the foreground colour by the black and hit Ctrl/Cmd + D. Go now to Filter> Blur> Gaussian blur (5px). To finish reduce the opacity to 20%.

Tutorial Photoshop - Layout Template and webdesign

Tutorial Photoshop - Layout Template and webdesign

Create a new layer (go to Layer> New> Layer or hit Ctrl/Cmd + N) and name it “picture”, go to Select> Modify> contract and enter 10 px and hit Ok. Then fill in the selection with a dark grey.

Step 9 – New header

Create a new group and name it “header 2”. Select the Rectangle Tool (U) and create a brown rectangle beneath the top header. Use the Type tool (T) to add a little description.

Tutorial Photoshop - Layout Template and webdesign

Add the button*

Tutorial Photoshop - Layout Template and webdesign

Select the Rectangle Tool (U) and create a lighted brown rectangle beneath the header 2. Add an inner shadow (go to Layer> Layer Style> Inner shadow) into this rectangle, using the settings from the following image.

Tutorial Photoshop - Layout Template and webdesign

Add a little text with the type tool (T).

Step 10 – The content

Create a new main group and name it “Content”, create directly three new groups inside and name them “bloc1”, “bloc2” and “bloc3”.

Select the Rectangle Tool (U) and create a white rectangle.

Use the Type tool (T) to add the first title and a description. Drop it in “bloc1”.

Tutorial Photoshop - Layout Template and webdesign

Download this icons pack from here: http://www.tutorial9.net/resources/nixus-icon-pack-60-beautiful-premium-icons-free/ and import an icon in your bloc1.

Tutorial Photoshop - Layout Template and webdesign

And do these last steps two more times to fill in the bloc 2 and 3.

Tutorial Photoshop - Layout Template and webdesign

Step 11 – Testimonial

Create a new group and name it “Testimonial”, in this group create a new layer and name it “testimonial bg”.

Using the Rectangular marquee tool (M) select the bottom side of the white rectangle. Then fill it in with light grey #e5e5e5.

Tutorial Photoshop - Layout Template and webdesign

Create a new layer and name it “stroke”, move to the top the selection of 2px and fill in the selection with the same grey, now move it down to 1px and hit Delete.

Tutorial Photoshop - Layout Template and webdesign

Using the Type tool (T) add a title and a description.

Tutorial Photoshop - Layout Template and webdesign

And duplicate the button* (already created in the header) and drop it to the right of the title.

Tutorial Photoshop - Layout Template and webdesign

And to finish, add the picture** of the customer on the left of the message.

Tutorial Photoshop - Layout Template and webdesign

Step 12 – The footer

The tutorial is soon finished : ) you have to create the footer and it will be done!

So, create a new main group (go to Layer> New> Group) and name it “Footer”, in this group create a new layer (go to Layer> New> Layer or hit Ctrl/Cmd + N) and name it “dark stroke”. Using the Rectangular marquee tool (M) create a selection of 5px beneath the testimonial area. Change the foreground colour to the dark brown (#171513) and fill in the selection.

Tutorial Photoshop - Layout Template and webdesign

Select the three layers of the titles on the content area and right click and select duplicate the layers. Drag and drop them on the footer group and move these titles in the footer. Switch the colour to light grey (#e5e5e5).

Tutorial Photoshop - Layout Template and webdesign

Use the Type tool (T) to add a list beneath the first title on the footer.

Tutorial Photoshop - Layout Template and webdesign

Using the Custom shape tool (U) create a little arrow before the link in the list. Add a drop shadow, go to Layer> Layer style> Drop shadow, using the settings from the following image.

Tutorial Photoshop - Layout Template and webdesign

Duplicate the arrow and put one of them before each link.

Bring together all layers of the first bloc in the footer in a new group (bloc1). Create two news groups and name them “bloc2” and “bloc3”. Duplicate the list (text and arrow) and put one of them on the bloc2 and the other in the bloc3.

Facultative step, in the bloc1 you can delete the list to add a little form. To create the form use the Rounded rectangle tool (U) with a radius of 10px. I used the colour: light grey # e5e5e5 and red #e83116. Use the Type tool (T) to add the label and Send in the red button.

Tutorial Photoshop - Layout Template and webdesign

Step 13 – Copyright

And to finish this tutorial create the last group on the group “footer” and name it “copyright”. Use the Rectangular marquee tool (M) to select the bottom of your document, create a new layer (Layer> New> Layer) and fill in this selection with this colour: # 47413c, move down the selection to 1px and fill in it again with this other colour: #171513.

Create a new layer and use the foreground > transparent gradient (Gradient tool) to create a gradient on the top of the copyright area (use the black #000000).

Use the type tool to add a little copyright (on the left) and duplicate the logo and drop the copy to the bottom right side.

Tutorial Photoshop - Layout Template and webdesign

Further information

Watch the following images to know how to create the button:

Tutorial Photoshop - Layout Template and webdesign

Watch the following images to know how to create the picture in the testimonial area:

Tutorial Photoshop - Layout Template and webdesign

If you need some information regarding the process to create the button or the picture, please, let me know it in the comments.

Final result

click here to download the psd file

Tutorial Photoshop - Layout Template and webdesign

Tutorial Photoshop - Layout Template and webdesign

So, thank you very much to you for reading my Photoshop tutorial and if you enjoy this post, this template and this blog, please, follow us up on RSS or Twitter I see you later by another 2expertsdesign.com tutorial!