Blue Portfolio layout

27.3.2009, 15:8
Submited in: Photoshop | Total Views: 15036

Using this thoroughly explained, detailed Photoshop lesson, you will see how to create trendy Blue Portfolio layout.

Some picture in this tutorial are so huge to be placed on the site area, so we have used a small version of picture, and when you click on the small picture, you can see it in real dimension.

(Click on the picture to see the final result.)

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.


Step 2

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

Drop Shadow


Size 1px, color #939393 and opacity 44%.

Step 3

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

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.

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 gradinet which opacitiy 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.

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.

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 Trebucht 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.

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.

We're done!

Have a nice day!

Are you a website owner?
Click here to register and submit your tutorials!

Browse by category

Most popular tutorials