Photographer portfolio layout

In this tutorial I will show you how to create a nice looking Photographer portfolio layout.

Final Image Preview

Create a nice looking photographer portfolio layout in Adobe Photoshop CS3
Start working by creating a new file (File>New) of 1200x768px/72 dpi. Select after that the Paint Bucket Tool (G) and give the new backgroung layer black color.
Create a nice looking photographer portfolio layout in Adobe Photoshop CS3
Then we’ll insert the web site name:
Create a nice looking photographer portfolio layout in Adobe Photoshop CS3
Create a nice looking photographer portfolio layout in Adobe Photoshop CS3
Select these parameters for the layer containing the site’s name by making a click on the layer we work with on the layers’ panel: Blending Options>Outer Glow
Create a nice looking photographer portfolio layout in Adobe Photoshop CS3
Blending Options>Gradient Overlay

Create a nice looking photographer portfolio layout in Adobe Photoshop CS3
Gradient’s parameters:
Create a nice looking photographer portfolio layout in Adobe Photoshop CS3
Create a nice looking photographer portfolio layout in Adobe Photoshop CS3
Create a nice looking photographer portfolio layout in Adobe Photoshop CS3
Next we’ll represent the panel reserved for the menu’s buttons situated on the site header. In this case we’ll apply the Rounded Rectangle Tool (U) with a radius of 5 px.
Create a nice looking photographer portfolio layout in Adobe Photoshop CS3
Create a nice looking photographer portfolio layout in Adobe Photoshop CS3
The layer’s parameters: Blending Options>Gradient Overlay
Create a nice looking photographer portfolio layout in Adobe Photoshop CS3
Gradient’s parameters:
Create a nice looking photographer portfolio layout in Adobe Photoshop CS3
Blending Options>Stroke
Create a nice looking photographer portfolio layout in Adobe Photoshop CS3
Gradient’s parameters:
Create a nice looking photographer portfolio layout in Adobe Photoshop CS3
Create a nice looking photographer portfolio layout in Adobe Photoshop CS3
We’ll create a new layer under the layer containing the menu’s buttons and select here the Brush Tool (B) to represent a spot colored with #666666
Create a nice looking photographer portfolio layout in Adobe Photoshop CS3
Create a nice looking photographer portfolio layout in Adobe Photoshop CS3Then we’ll apply the Free Transform option and compress the spot on its vertical position and then stretch it out by horizontal line. Place it the same way demonstrated below:
Create a nice looking photographer portfolio layout in Adobe Photoshop CS3
Continue representing the menu’s panel, applying the Rounded Rectangle Tool (U) with a radius of 5 px and white color. The layer’s parameters: Fill 10%

Create a nice looking photographer portfolio layout in Adobe Photoshop CS3
Using the Line Tool (U) (weight 1 px), try drawing a line of white color on the bottom part of the panel:
Create a nice looking photographer portfolio layout in Adobe Photoshop CS3
The layer’s parameters: Blending Options>Gradient Overlay

Create a nice looking photographer portfolio layout in Adobe Photoshop CS3
Gradient’s parameters:
Create a nice looking photographer portfolio layout in Adobe Photoshop CS3
Create a nice looking photographer portfolio layout in Adobe Photoshop CS3
Choose the same Line Tool (U) (weight 1 px) to draw a line on the top part of the menu’s panel:
Create a nice looking photographer portfolio layout in Adobe Photoshop CS3
The layer’s panel: Blending Options>Gradient Overlay

Create a nice looking photographer portfolio layout in Adobe Photoshop CS3
Gradient’s parameters:

Create a nice looking photographer portfolio layout in Adobe Photoshop CS3
Create a nice looking photographer portfolio layout in Adobe Photoshop CS3
Let’s divide the buttons, using a vertical line made with the Line Tool (U) (weight of 1 px)

Create a nice looking photographer portfolio layout in Adobe Photoshop CS3
The layer’s parameters: Blending Options>Gradient Overlay

Create a nice looking photographer portfolio layout in Adobe Photoshop CS3
Gradient’s parameters:

Create a nice looking photographer portfolio layout in Adobe Photoshop CS3
Create a nice looking photographer portfolio layout in Adobe Photoshop CS3
Make a copy of the layer containing the vertical line and choose Free Transform option to place the copy on the left side of the previous line. The copy layer’s parameters should be changed with those from below: Blending Options>Gradient Overlay

Create a nice looking photographer portfolio layout in Adobe Photoshop CS3
Gradient’s parameters:
Create a nice looking photographer portfolio layout in Adobe Photoshop CS3
Create a nice looking photographer portfolio layout in Adobe Photoshop CS3
Combine in a group the layers composing both vertical lines (press Ctrl button and mark out the corresponding layers and then hold on the left mouse’s button to take the marked layers on Create a new group selection). Make two copies of the group that we’ve got and choose then Free Transform option to situate the copies the same way demonstrated below:
Create a nice looking photographer portfolio layout in Adobe Photoshop CS3
Insert now the titles for the menu’s buttons, each word being represented on a separate layer:
Create a nice looking photographer portfolio layout in Adobe Photoshop CS3
Create a nice looking photographer portfolio layout in Adobe Photoshop CS3
Make a copy of the layer’s effects by clicking on the layer containing the site’s name (Copy Layer Style) and then have a right click button on each layer containing the button’s title (Paste Layer Style).
Create a nice looking photographer portfolio layout in Adobe Photoshop CS3
Next we’ll situate the picture under the menu:
Create a nice looking photographer portfolio layout in Adobe Photoshop CS3
Using the Rectangle Tool (U) we can hide the bottom part of the picture under a stripe of black color.
Create a nice looking photographer portfolio layout in Adobe Photoshop CS3
The layer’s parameters: Fill 60%

Create a nice looking photographer portfolio layout in Adobe Photoshop CS3
Press Alt button while clicking between the black stripe’s layer and the picture’s layer on the layers’ panel:
Create a nice looking photographer portfolio layout in Adobe Photoshop CS3
Using the Ellipse Tool (U), we can represent a button on the lowest part of the picture:
Create a nice looking photographer portfolio layout in Adobe Photoshop CS3
The layer’s parameters: Blending Options>Gradient Overlay

Create a nice looking photographer portfolio layout in Adobe Photoshop CS3
Gradient’s parameters:

Create a nice looking photographer portfolio layout in Adobe Photoshop CS3
Blending Options>Stroke

Create a nice looking photographer portfolio layout in Adobe Photoshop CS3
Gradient’s parameters:
Create a nice looking photographer portfolio layout in Adobe Photoshop CS3
Create a nice looking photographer portfolio layout in Adobe Photoshop CS3
Select next the Pen Tool (P) and represent a small pointer on the button that must be of white color.
Create a nice looking photographer portfolio layout in Adobe Photoshop CS3The layer’s parameters: Blending Options>Gradient Overlay
Create a nice looking photographer portfolio layout in Adobe Photoshop CS3
Gradient’s parameters:
Create a nice looking photographer portfolio layout in Adobe Photoshop CS3
Create a nice looking photographer portfolio layout in Adobe Photoshop CS3
Next we’ll combine in a group all the layers composing the button on the lowest part of the picture (press Ctrl button when marking the necessary layers and then hold on the left mouse’s button while moving the marked layers on Create a new group option). Make a copy of the new group and change the parameters for the first button’s layer: Blending Options>Gradient Overlay

Create a nice looking photographer portfolio layout in Adobe Photoshop CS3
The gradient’s parameters are the same with the original one.
Blending Options>Stroke

Create a nice looking photographer portfolio layout in Adobe Photoshop CS3
The gradient’s parameters are the same with the original one.
Choose now Free Transform option and turn around the group’s copy, situating it the same way from below:
Create a nice looking photographer portfolio layout in Adobe Photoshop CS3
Insert the section’s name on the menu’s zone:
Create a nice looking photographer portfolio layout in Adobe Photoshop CS3
Create a nice looking photographer portfolio layout in Adobe Photoshop CS3
Make a copy of the layer’s effects by right clicking on the layer containing the site’s name (Copy Layer Style) and then have a right click on the name of the section (Paste Layer Style).
Create a nice looking photographer portfolio layout in Adobe Photoshop CS3
Now we’ll represent a vertical dividing line on the picture’s right side, applying the Line Tool (U) (weight 1 px).
Create a nice looking photographer portfolio layout in Adobe Photoshop CS3
The layer’s parameters: Blending Options>Gradient Overlay
Create a nice looking photographer portfolio layout in Adobe Photoshop CS3
Gradient’s parameters:
Create a nice looking photographer portfolio layout in Adobe Photoshop CS3
Create a nice looking photographer portfolio layout in Adobe Photoshop CS3
Insert the section’s name on the picture’s right side, keeping the same demands from the next shown table:
Create a nice looking photographer portfolio layout in Adobe Photoshop CS3
Create a nice looking photographer portfolio layout in Adobe Photoshop CS3
Make a copy of the layer’s effects by right clicking on the layer containing the site’s name under the picture (Copy Layer Style) and then click on the right mouse’s button on the recently written section (Paste Layer Style).
Create a nice looking photographer portfolio layout in Adobe Photoshop CS3
… and finally the last stage includes introducing the basic text reserved for the appropriate section:
Create a nice looking photographer portfolio layout in Adobe Photoshop CS3
Create a nice looking photographer portfolio layout in Adobe Photoshop CS3
The final result!


Partner site : online news