In this tutorial I will be showing you how to design and create a clean portfolio layout in Adobe Photoshop. This layout uses the 960 Grid system in order to keep everything aligned and clean.

Preview

Here is a preview of what we will be creating today:

Download the 960 Grid System
1 Before you begin creating this layout you need to download the latest 960 grid templates to be used in Photoshop. You can do that here

1.1 You then need to open the following template in Photoshop, like so:

960_grid_16_col

Resizing the document and adjustments
2 Before we begin with the design of the layout, you first need to resize the document to the following dimensions:

Tip: You can toggle the guides on or off using a keyboard shortcut, Ctrl + ;

Downloading and applying the background texture
2 Below is the background texture you need to download and insert into the blank canvas of the document. Click the image, to get the full view, ready for download.

(Resource from Premium Pixels – Apple iOS Fabric Texture)

Creating the header section of the layout
3 These next steps will explain how to create the header section of the layout. We are going to start by creating the header background. To do this, set the foreground colour to white #ffffff, create a new layer in the document and then using the Rectangular Marquee Tool (M) create a selection the width of the canvas and a height of 100px at the very top, like so:

3.1 Now that you have made the selection, use the Paint Bucket Tool (G) to fill the selection with the foreground colour, like so:

3.2 Next, reduce the opacity of the layer to 30%, like so:

To finish the header background layer, apply the following layer style to the layer. To do this, right-click the layer and select ‘Blending Options’ from the menu list. A new window will appear, apply the following settings:

Drop Shadow

3.3 To create the text based logo, first create a new layer, set the foreground colour to #3e3e3e, and then create the text logo using the Type Tool (T) with these text settings:

Font: Agency FB, Style: Regular, Size: 48pt, Anti Aliasing: Crisp,

Position the logo centred vertically inside the header background and next the second guide from the left like so:

3.4 To complete the text based logo, you need to apply a layer style to the layer. To do this, right-click the logo layer, then select ‘Blending Options’ from the menu list. A new window will appear, apply these settings:

Drop Shadow

3.5 Now we are going to move onto the creation of the navigation for the layout. Start by creating a new layer, then keep the foreground colour #3e3e3e, then using the Type Tool (T) type out the navigation text using these text settings, a gap of 8 spaces is between each link:

Font: Verdana, Style: Regular, Size: 12pt, Anti Aliasing: Crisp,

Position the navigation text centred vertically in the header background and next to the following guide, like so:

3.6 To finish the navigation text, you need to apply the same layer style setting you applied to the text based logo, to the navigation text.

3.7 For the navigation button or hover state, you need to create a new layer and then move it below the navigation text layer in the layer property box, so that the text appears above the button. You can then create a white rectangle 70px wide by 100px in height. Position this rectangle centred over the word ‘Home’, then reduce the opacity of the layer to 30%. You should have something like this:

Creating the slideshow section of the layout
4 The next section we are going to work on is the slideshow section. You need to first create the slideshow background layer, similar to the header background layer. Start by creating a new layer, then create a selection 940px wide by 300px in height. Then fill the selection with a white foreground colour and reduce the opacity to 30%. Position the layer 60px from the header section and centred within the guides like so:

4.1 To complete the slideshow background layer, you need to apply the same Drop Shadow layer style as the one applied to the header background.

4.2 We are now going to move onto the creation of the slide navigation buttons. First create a new layer, then using the Ellipse Tool (U), create a white 40px by 40px circle. Then reduce the layer opacity to 30%. Once you have created the circle, position it centred vertically inside the slideshow background and 26px from the left, like so:

4.3 Now using the Custom Shape Tool (U), on a new layer create an arrow using the colour #3e3e3e, with a size of 14px by 16px. Then position the arrow centred inside the circle, like so:

Tip: You can rotate or flip layers by selecting the layer and then clicking ‘Free-Transform’ from the ‘Edit’ tab in the file menu of Photoshop.

4.4 Now duplicate both layers and repeat the process for the right arrow button for the slideshow section, like so:

4.5 Now on separate layers, add some text to the slide using the following text settings:

Font: Agency FB, Style: Regular, Size: 30pt, Anti Aliasing: Crisp, Colour: white

4.6 To finish the slideshow, you need to create a line break between the text. This is done by using the Line Tool (U) on separate layers. Create two vertical lines 248px in height, with the colours #70baff on the left and #d3d3d3 on the right. Finally position both layers centred vertically in the slide and between the text, like so:

Featured projects section
5 I am now going to show you how to create the featured projects section of the layout. Start by saving the following image and opening it in Photoshop:

5.1 Now create the image background layer by creating a selection 300px wide by 150px in height. The fill the selection with the colour white and then reduce the opacity of the layer to 30%. You need to apply the same layer style setting to this layer as the header and slideshow backgrounds. Now position the layer 32px from the slideshow and next to the following guide:

5.2 Now copy the mountain image you saved onto a new layer and insert inside the background layer you just created so that it is centred.

5.3 Now you need to add some text on separate layers in this section of the layout. The following settings for the text were used:

Title Text
Font: Verdana, Style: Regular, Size: 12pt, Anti Aliasing: Crisp, Colour: #3e3e3e

Info Text
Font: Verdana, Style: Regular, Size: 12pt, Anti Aliasing: Crisp, Colour: white #ffffff

5.4 Now to finish this featured project, you need to create a rectangle button. Create a selection 100px wide by 30px in height. Then follow the same steps you did for the header, slideshow backgrounds. Finish the button with some text and you should have something like this:

5.5 To finish the featured projects section, you need to replicate the layers you just created and position them so that you have three featured projects. Here is an image with the guides to help you:

Tip: You can quickly duplicate layers, by selecting them in the layer property window and then right-clicking a layer and select ‘Duplicate Layers’ from the menu list. This will create exact copies of the layers which you can then move.

Main content section
6 The next steps will explain how to create some content for the layout. We are going to start by creating the welcome section which is simply a title and some text. Use the following text settings on separate layers to create this section:

Title Text
Font: Verdana, Style: Regular, Size: 12pt, Anti Aliasing: Crisp, Colour: #3e3e3e

Info Text
Font: Verdana, Style: Regular, Size: 12pt, Anti Aliasing: Crisp, Colour: white #ffffff

6.1 To create the testimonial section of the content, use similar text settings to the welcome section. To create the box, follow the same steps as you have previously done to create the other background layers in the layout. The dimensions of the box are 540px wide by 136px in height. You can then create the line break and text layers using previous steps. Here is an image of what you should have:

6.2 The next section of the content is the network section or the Twitter updates. This is all simply text on separate layers. Here is an image with the colour codes and gap sizes for this section:

6.3 The final section of the main content is the Flikr photos of the mountain image. You can create these easily on separate layers by first creating the 60px by 60px background squares. Then insert the mountain images which need to be reduced to 50px by 50px in size. Create 8 of these photos and position everything like so:

Creating the footer
7 The final section of this layout is the footer. Start by creating a new layer, then create a background the same dimensions as the header background, the full width of the canvas and 100px in height. Then follow the same steps to get the layer the same and then position the layer at the very bottom likes so:

7.1 Now add the following text to the footer to give it some content:

That is the tutorial completed! Thanks for following along and feel free to comment.

You can download the PSD file here ->