Blue Portfolio Layout

Step 1

Start off with the dimension which are depends of your layout resolution. I'll start off with 750x500px. For background color set white.

Create a new layer, take the Rectangle marquee tool, and create the selection like it is shown on the picture below.

Click to enlarge

Step 2

Fill the selection with white color and after that apply the following styles on layout:

Drop Shadow

Stroke

Size 1px, color #939393 and opacity 44%

Step 3

Create a new layer for header, Take the Rectangular marquee tool again and create the selection on the top, within our layout, and from sideward leave a 2px blank area.. Look at the picture below and everything will be clear.

Click to enlarge

Step 4

Fill the selection with #2061A8.

Step 5

On the header, we'll add this styles:

Drop Shadow

Gradient Overlay

Pattern Overlay

Step 6

Now, we'll add the site name and slogan which will represent our "logotip". See the picture below.

Click to enlarge

I have used the Arial Black font for header, and for slogan Trebuchet MS font.

On the header I have adds a mild shadow, and black and white gradient which opacity was set on 20%

Step 7

Create a new layer.

Step 8

On the same methods, like we have create the selection for header, we will create the selection for footer, except it will be on the bottom of layout and a little lesser.

Step 9

Fill the selection with #2061A8, and add a mild shadow to upward. See the picture below.

Click to enlarge

Drop shadow

Add your copyright text in footer :)

Step 10

It's time for navigation. We'll add it on the bottom of header.Take the Rounded rectangle tool with 3px radius, and create the shape like it is shown on the picture below.

Click to enlarge

Step 11

After that, We'll add the following styles on our shape in navigation.

Drop shadow

Gradient Overlay

Step 12

No, We'll add a text link. My font is Trebuchet MS bold ,12 px smooth, color #1E5998. See the picture below.

Step 13

Create the all other links in navigation in an equivalent way, like we have done the first link.

Step 14

Now, we'll create a two content box for our contents.

Take the Rounded rectangle tool, and create the shape like it is shown on the picture below.

Click to enlarge

Set the Fill layers on 0%

and add a gradient with the settings like it is shown on the picture below.

Step 15

Repeat the previous method for another content box on the other side.

Click to enlarge

We're done!

Click to enlarge