In this tutorial I will be showing you how to create a sophisticated website design in Adobe Photoshop CS3.

Step 1.

Open Adobe Photoshop and create a new file (File>New) and set it to 1000 x 1100px with a transparent background.

Step 2.

We are going to make sections to put all the layers in, by creating new groups (Layer>New>Group) create the following template.

Step 3.

In the Background folder create a new layer (Layer>New>Layer) and name it main_background. Now using the bucket tool fill the entire layer with the colour #5F5F5F.

Step 4.

Still in the Background group create a new layer named white_background and then using the rounded rectangle tool with the radius set to 25px make a large white (#ffffff) rectangle, this will be used for the entire outline as well so make it almost the same size as the canvas.

Step 5.

Move to the Header group and create a new layer named orange_header_bg and by using the rounded rectangle tool with the radius still set to 25px but the colour changed to #FF7200 create a rectangle for the header.

Step 6.

Using the rectangle marquee tool select a section of the bottom of the rectangle like shown in the image below.

now with the eraser tool erase the selection.

Step 5.

Select the magic wand tool and then select the entire orange_header_bg and create a new layer named white_gradient_1 Now select the gradient tool and set it up so that it goes from white to transparent

Then add a gradient so that it looks similar to this.

Now change the opacity of the layer to 25%

Step 6.

The next few steps are a little complicated and are not necessary though they add a great effect to the header. Create a new layer named white_gradient_2. Select the magic wand tool and navigate back to orange_header_bg and select the header. Now right click and select inverse, navigate back to white_gradient_2 and with the elliptical marquee tool make a shape so that it comes out like in the image below, make sure that you hold down Shift while making the second shape so that you keep the first selection too.

Right click on the canvas and select inverse.

Step 7.

Make sure that you are on the white_gradient_2 layer and make a white to transparent gradient with the opacity set to 20%.

Step 8.

Create a new layer named white_gradient_3 and using the elliptical marquee tool make a shape like the one shown in the following image.

Right click anywhere on the canvas and select inverse.

With the elliptical marquee too selected make an other shape whilst holding shift so that you don’t loose your other select, it should now look like the following image, kind of like a wave.

Right click anywhere on the canvas and select inverse.

Select the gradient tool and make a white to transperant gradient with the opacity set to 30%

You will notice that the gradient we just created goes over the backgroud and the content area. You can remove this by selecting the overlapped area and using the eraser tool to erase the unwanted gradient.

It should now look something like this.

Step 9.

Create a new layer named dark_gradient_1, navigate back to orange_header_bg and select the area with the magic wand tool. Navigate back to the new layer we created and using the gradient tool set the black > transparent (opacity set to 66%) make a gradient from the bottom so that it looks like this.

Now our header group is finished.

Step 10.

Navigate to the Footer group and create a new layer named orange_footer_bg. Select the rounded rectangle tool with the radius set to 25px and colour set to #FF7200 create a small footer like the one shown below.

Select the top of the rectangle with the rectangular marquee and erase it so that we get a square edge instead of the rounded one.

Step 11.

We will be adding the white gradients here again, again these following steps are not compulsory.

Create a new layer named white_gradient_3 and by selecting the elliptical marquee tool make an oval like shown below.

Right click anywhere on the canvas and select inverse. Now still using the elliptical marquee tool make an other oval inside the previous one so that it looks like the image below.

Right click anywhere on the canvas and select inverse. Now create a white>transparent gradient with the opacity set to 66%. The same thing will happen as did the last time we made these gradients, you will get the gradient overlapping over colours and making it look weird, you can fix this up by using the eraser tool and rectangular marquee.

Step 12.

Now in the main_content group make a new layer named side_content_1 and by using the rectangle tool with the colour set to #b1b1b1 make a rectangle like shown below.

Now duplicate the layer and rename it side_content_2 and move to to the other side.

Step 13.

Now select the Rectangle tool with the colour set to ##FF7200 make a wide rectangle across the top of the side_content layers. Name this layer orange_above_sides

Step 14.

Using the magic want tool select the whole orange_adove_sides layer, now right click anywhere on the canvas and select inverse. Create a new layer named white_gradient_4 and by using the elliptical marquee tool make two ovals like shown in the image below. If you are having trouble make two ovals create one then hold shift and create the other.

Now right click anywhere on the canvas and select inverse and with the gradient tool make a white>transparent gradient with the opacity set to 45%.

Step  15.

Create a new layer named dark_header then using the rectangle with the colour set to #2e2e2e tool make a rectangle in the middle of orange_above_sides layer.

Then go to blending options (Layer>Layer Style>Blending options) and use the following settings.

Step 16.

Now just duplicate that layer and place it where ever you want to add a heading.

Step 17.

Using the rectangle tool make a rectangle the same width and height as orange_above_sides but using the same colour as you did for the sides (#B1B1B1)

Step 18.

Now we are going to add two gradients, black > transparent one above the orange_above_sides layer shown below

I

and one on the footer shown below. They are both black>transparent with the opacity set to 45%.

Step 19.

Now it is time to add a search bar to fill in the space at the top of the layout. Select the Rounded rectangle tool with the colour set to #2E2E2E, now where we have yo place this in the layers palette is weird, to get it in a good position were you don’t have to cut anything we place in in the background folder between the two layers which are already there. If you want to place it elsewhere you will have to slice it using the rectangular marquee tool and the eraser.

Now go to blending options (Layer>Layer Style>Blending options) and use the following settings.

Step 20.

Now just add a small black rectangle and a magnifying glass for the search bar in the top right.

The large white area underneath the header was left there so that you could put an advertisement banner there. Alternatively you could add an image rotator rotating images for a portfolio or your company.

Step 21.

I originally planned just to have text based buttons just underneath the advertisement space but I will show you how to create some good looking small buttons.

Select the Rectangle tool and make a white rectangle in the small area underneath the advertisement area, then go to blending options (Layer>Layer Style>Blending options) and use the following settings.

Then duplicate the layers and align them so that they look like they are meant to be buttons.

Step 22.

Now we are just going to add some final touches to the layout. Navigate to the background group and select the white_bg layer duplicate the layer (Layer>Duplicate Layer) and then move it so that the top of the layer is at the bottom of the original and then lower the opacity of the layer to 60%.

Step 23.

Select the gradient tool with the foreground colour set to #5F5F5F and make a grey to transparent gradient from top to bottom like shown in the image below.

Step 24.

Now it’s time for you to add your logo, content and advertisements. This is what the site can look like with and without content.