How to make a web site layout in Photoshop

Righto, let me get straight to it, but before you start this tutorial, there is one thing you should know. This tutorial is for the more advanced Photoshop user, so you should only try this if you have been using Photoshop for a while and know the tools. I will be using simplified terms that someone who has just started using Photoshop would have trouble understanding. It might be a good idea to refer back to my Photoshop tools reference guide for a bit of help. You can follow what I do in this tutorial or you can try and apply your own effects and stuff but it doesn't really matter :P *Note: Click images for a larger view*

1. Open a new image and give it the width of 720px and the height of 500 pixels with the contents set to transparent. Fill the background layer with a grey colour like #CCCCCC.

2. Make a new layer by clicking on the new layer button and get the rectangular marquee tool (m) and make a selection at the top of the image where you want your header to be. I usually make mine 100px high and as wide as the image (you may need to set the marquee style to fixed and enter in the dimensions). Fill this in with black (press d then x to reset the colours then press crtl+backspace) and leave it for now. This is just so you know where the header will be so you can work around it. You can finish it later.


3. Next we are going to line up the boxes. These are where all your content and navigation etc. will go. You can have your boxes wherever you want, but I am going to put my content box to the right and navigation etc. on the left. Start with the shape that you want your boxes to be, I have done the boxes going down the left, and for this tutorial I will just leave them square. They are 140 px wide. The height doesn't really matter, just make them whatever size you want :) You should make a new layer for each box, as it will make it easier to edit them. Make your selection with the rectangular marquee tool and fill the selection in with black (press d then x to reset the colours then press ctrl+backspace).


4. Once the boxes are where you want them, we can put a bit where the content box will go. If you are going to make an iframe, make the box the size you want the iframe to be. If you are using php navigation, make the box around 100px high, as you dont need to make the full box. If you are not sure what you are going to use, just make the box take up the rest of the space in the image height-wise.


5. Now you can do the detailing...
I thought that if you are new to Photoshop, this might be a bit new to you, so I thought I would make up some layer styles for you to apply to get a decent effect.
I created this:

By doing this:
Create a square box of the colour white and give it these layer styles to give the box a metal effect:

(to acess layer styles, go to Layer--> Layer Style and choose the appropriate one)

Inner shadow
Satin
Stroke

Next, create a rounded rectangle in a new layer on top of the box with the rounded rectangle tool (U) and fill it in with the colour #999999. Then give it these layer styles:

Inner shadow
Outer Glow
Inner Glow

6. Apply those layer styles to all the boxes and main box and you will get something like this:


7. Add some little effects like some text...
This text was created using 2 of the same text layer, rasterising one of them and adding a Motion Blur (Filter--> Blur--> Motion Blur) with the angle of 0° and a distance of 50 pixels.


8. Add a nice looking banner...


And you are done! If you aren't quite sure on how to make your banner look, go and try out some more of my tutorials. You might want to make a logo and put it on the banner like i have done, it adds a nice effect.