In this tutorial I am gonna show you a way to make a Clean Web Page and in Part 2 you will learn how to slice and code it, but let’s start with the design.

1. Begin with a new file, 750×400, with #999999 as your background color. Then create a new layer in the layers palette, now on the new layer take the Rectangular Marquee Tool and draw out a rectangle as the image below shows ( Click for larger view ) and fill the rectangle with white.

2. Then go to the layers palette and right click on layer 1 and choose Blending Options, then apply this settings.

Now should it look like this.

3. Create a new layer, now set your foreground color to #BCBEC1, then take the Rounded Rectangle Tool and draw out a rectangle as the image below shows.

4. Now right click on layer 2, choose Blending Options and apply this settings.

Now should it look like this.

5. Now hold down Ctrl and click on layer 2 in the layers palette to get a selection, then click on the Add layer mask icon under the layers palette, then go to Filter>Blur>Gaussian Blur and set the Radius to 4 pixels, now press Ctrl+F, then hold down Alt and click on Layer mask thumbnail, then press Ctrl+L and apply this settings.

6. Press OK, then right click on the Layer Mask Thumbnail and choose Apply Layer Mask.

7. Now time to make some shine for the header, hold down Ctrl and click on layer 2 to get a selection, then create a new layer, name that layer to shine, then set your foreground color to white, now take the Gradient Tool and choose the second gradient from left, draw the gradient from top to bottom.

Now should it look something like this.

8. Now when the header is done it’s time to make the menu, create a new layer, then repeat step 3 to 7.

Now should it look something like this.

9. So far we have a header and a menu so the only thing left is to create a content box, create a new layer and then set your foreground color to #BCBEC1, now take the Rounded Rectangle Tool and draw out a rectangle as the image below shows.

10. Then apply the settings shown in step 4, 5 and 6, then add some text to your header and to your menu, and you are done!

This is what I came up with.

In Part 2 you will learn how to slice it and also learn how to code this layout with only Notepad. Click here to go to Part 2