Freelancer portfolio design

Step by step tutorial on how to create a portfolio web layout in Adobe Photoshop CS3.

Let’s create a new file (File>New) of 1000×700px/72 dpi. Select the Rectangle Tool (U) to represent the background of the layout to be.

Freelancer portfolio design

Choose the next demonstrated styles by making a click on the layer we work with on the layers’ palette: Blending Options>Gradient Overlay

Freelancer portfolio design

Gradient Editor:

Freelancer portfolio design
Freelancer portfolio design

Next we’ll represent the web-site’s header, applying the earlier chosen Rectangle Tool (U).

Freelancer portfolio design

The layer’s styles: Blending Options>Gradient Overlay

Freelancer portfolio design

Gradient Editor:

Freelancer portfolio design
Freelancer portfolio design

Now we’ll have to create a background pattern with useful tool located on BGPatterns, setting the parameters by turn.

Freelancer portfolio design

Freelancer portfolio design
Freelancer portfolio design

Download the new pattern and go to Edit>Define Pattern
On the new layer we’ll select Edit>Fill and apply the saved pattern.

Freelancer portfolio design

The layer’s styles: Fill 0%, Blending mode-Color Dodge

Freelancer portfolio design

Make a click on the same layer on the bottom part of the layers’ panel on Add a Mask selection and choose the Brush Tool (B) and black color to erase the texture’s parts coming out of the header’s edges:

Freelancer portfolio design
Freelancer portfolio design

Insert now the site’s name, keeping the demands from the next table (used font):

Freelancer portfolio design
Freelancer portfolio design
Freelancer portfolio design

The layer’s styles: Blending Options>Drop Shadow

Freelancer portfolio design

Blending Options>Outer Glow

Freelancer portfolio design

Blending Options>Gradient Overlay

Freelancer portfolio design

Gradient Editor:

Freelancer portfolio design
Freelancer portfolio design

Using the Rounded Rectangle Tool (U) (radius of 20 px), try to make the menu’s button:

Freelancer portfolio design

The layer’s styles: Fill 0%, Blending Options>Outer Glow

Freelancer portfolio design

Blending Options>Stroke

Freelancer portfolio design
Freelancer portfolio design

Make three copies of the button’s layer and select the Free Transform option to place the copies the same way indicated below:

Freelancer portfolio design

Insert the titles for the menu’s buttons, putting each word on a separate layer:

Freelancer portfolio design
Freelancer portfolio design

Select for the layers containing the buttons’ titles the same styles demonstrated below: Blending Options>Outer Glow

Freelancer portfolio design
Freelancer portfolio design

Next we’ll select the Rectangle Tool (U) to represent the site’s panel, giving it the color #F5F5F5

Freelancer portfolio design

The layer’s styles: Blending Options>Drop Shadow

Freelancer portfolio design
Freelancer portfolio design

Make three copies of the layer and choose Free Transform option to place the copies the same way as below:

Freelancer portfolio design

Insert the pictures on the made layers, I used this photo from deviantart. I would like to thank the author of this artwork:

Freelancer portfolio design

Select the same styles for the pictures’ layers: Blending Options>Stroke

Freelancer portfolio design
Freelancer portfolio design

Try to represent a button under the picture, choosing the Rectangle Tool (U) and white color.

Freelancer portfolio design

The layer’s styles: Blending Options>Drop Shadow

Freelancer portfolio design
Freelancer portfolio design

Make three copies of the layer containing the button and use Free Transform option to place the copies the same way demonstrated below:

Freelancer portfolio design

Insert the titles for the made buttons:

Freelancer portfolio design
Freelancer portfolio design

Next we’ll introduce the basic text on the site:

Freelancer portfolio design


Freelancer portfolio design

Using the Line Tool (U), we’ll represent a line under the text, giving it the color #6E6969


Freelancer portfolio design

On the last stage we’ll insert the copyright, keeping the next demonstrated demands:

Freelancer portfolio design


Freelancer portfolio design

The layer’s styles: Blending Options>Drop Shadow

Freelancer portfolio design

Blending Options>Outer Glow

Freelancer portfolio design

Blending Options>Gradient Overlay

Freelancer portfolio design

Gradient Editor:

Freelancer portfolio design
Freelancer portfolio design

Finished!

View full size here.