Design a Portfolio Site with PS

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

Final Image Preview

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.

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


Gradient Editor:


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

The layer’s styles: Blending Options>Gradient Overlay


Gradient Editor:


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



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

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


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:


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


The layer’s styles: Blending Options>Drop Shadow


Blending Options>Outer Glow

Blending Options>Gradient Overlay

Gradient Editor:


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

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


Blending Options>Stroke


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

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


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


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


The layer’s styles: Blending Options>Drop Shadow



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

Insert the pictures on the made layers, I used this photo from deviantart. I would like to thank the author of this artwork:
Select the same styles for the pictures’ layers: Blending Options>Stroke



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

The layer’s styles: Blending Options>Drop Shadow



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

Insert the titles for the made buttons:


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


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


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


The layer’s styles: Blending Options>Drop Shadow


Blending Options>Outer Glow


Blending Options>Gradient Overlay

Gradient Editor:



Finished!