Full Website Layout - Creating the basic layout

Posted on Sun, 2006-01-01 22:30

Full Website Layout

Photoshop - Creating the basic layout

This tutorial is the first part of a 3 parter. This will guide you through how to make your template in Photoshop ready for slicing and exportation.

1.

Create a new document any size you want your site to be. I am using 800x550 and will be using an iframe area for the content so the site will always be 800x550, more on iframes later on in part 3.

2.

Set the background to what ever colour you want. For this site I am using a small grey gradient from the top to the bottom but only having the gradient at the top. So select #CCC as your foreground colour and #FFF as your background colour. Then using the gradient tool with these settings:
3.

Now from the top of the canvas while holding down Shift drag the gradient from the top to around 1/4 of the way down.

Click here for Example
4.

Select the crop tool and crop some of the background, we will use this as the main page background. So select a small bar of your background like this then right click it and press Crop. You should now have a thin bar like this.
5.

Now press Ctrl + Alt + Z, you should now be back to your 800x550 image.

6.

For this site layout I am doing it on Firefox, so I searched Google Images and found a large Firefox icon. Now paste your image in. The image I got was quite big so I had to transform it so it fit in better. The image I used can be found here. Once your image is where you want it, set the Blending Mode to Luminosity and the Opacity to 30%. You should now have something like this
7.

Create a header and footer bar using the marquee tool and fill it with #AAA. You can do seperate layers for the header and footer or do them on 1 layer. Set the blending mode to Darken.

8.

Now using the marquee tool again create a rectangle for your navigation bar. I have used the gradient we used for the background but reversed it.

9.

Now using the marquee tool again create a rectangle for your navigation bar. I have used a gradient of #CECECE to #B0B0B0

10.

Create another rectangle and fill it with #E7E7E7 make this rectangle the size of the content area you wanted.

11.

You should now have something like this

12.

You can either leave it as this and put your text in, in Dreamweaver or you can add your text now.

13.

Once you have finished your layout you can move on to slicing your layout. Please proceed to Part 2.

(Click for larger version)

Download the PSD here (1.2MB)

Go To Part 2