Simple Web Layout

1. The base

First of all, you need to create a new document, make it "1024" by "768" pixels.

After you have done that, fill it in will black.

2. Main frame

Create a new layer (Ctrl + Shift + N). Using the "rounded rectangular tool" (shortcut = u) make a rectangle just below half way using a 25px radius (in the toolbar section).

Once you have done that, right click on it "make selection" and then "OK". fill this with white (Ctrl + backspace).

3. The header

Create a new layer (Ctrl + Shift + N). Now, using the rounded rectangular tool again with the same settings, make a thinner rectangle for the header, this time filling in with blue.

Make sure that you leave a reasonable gap between them.

Then right click on the headers layer, press "blending options" and insert these settings:

4. The link buttons

Create a new layer (Ctrl + Shift + N)

Using the rounded rectangular tool again (this time setting the radius to between 5-10 px) draw a small box in between them, but so that it overlaps step2 and 3. then using the gradient tool (shortcut = G) have your first colour black (#000000) and your second colour purple (something close to #360783) and you should be left with something similar to this:

After that, right click on the layer and select "blending options", tick drop shadow,, leaving it default, and apply the following settings to "bevel and emboss"

Then duplicate the layer (Ctrl + J) four times, each time moving it to the right slightly using thee move tool "shortcut = V" (holding shift to keep it in line) thus resulting in something similar to this:

5. Making the main frame pretty

Select the white layer (step 2) and right click on the layer and press blending option, from their just tick "drop shadow" and "inner shadow" leaving the default settings.

Also (optional), select the rectangular marquee tool (shortcut = M)to highlight a thin line of it going down giving it a 1:3 ratio and press backspace to delete it:

6. Link button glass effect

Create a new layer (Ctrl + Shift + N).

Using the rounded rectangular tool again, with the same radius that you used for making the link buttons, draw it over half a button (from top downwards) and fill it with white and change the layer opacity to 10%, after that press "edit" --> "transform" --> "warp". and pull the left side down and the right side up, duplicate the layer and drag it over each button to get something similar to this:

7. Name plate

Now create a layer just above the background and under the "step 2". pull out the rounded rectangular tool again and draw a thin box that just sticks out below the main frame. fill it with a dark grey and (if you have any suitable, a pattern). you should get something similar to this:

8. The logo

Create a new layer (Ctrl + Shift + N) making shore its on top.

Place your logo on the header or make one, the best place is www.good-tutorials.com and as result you should have something like this:

8. Something of your own

From here, add your own text and content, fiddle around with the settings, here's my result:

Click to enlarge

Enjoy!