How to way design a website layout in Photoshop

This tutorial will teach you how to design the web site layout seen below in Photoshop.
This tutorial is part of a 4 page tutorial on how to create a simple web site using Photoshop and Dreamweaver.
Tutorial 1 : Creating a unique website header
Tutorial 2 : Designing your website layout in Photoshop
Tutorial 3 : Slicing your layout in Photoshop
Tutorial 4 : Creating your web site in Dreamweaver

We have designed a layout with a black background with an area for the logo, an eye-catching graphical header, navigation links, content and images.
Remember while designing your layout, you need to define spaces for the following :
• Header - This could be a graphic banner
• Logo
• Buttons - Links for home, about us, contact us etc.
• Pictures
• Content area
Follow the following steps to design your website layout in Photoshop:
1. Open a new file in Photoshop by clicking on File/New and enter a width of 750pixels and height of 450px.
2. Color the background with Black by choosing black in the foreground color and selecting the paint bucket tool and click on the canvas. Your background will now be black.
3. Add a new layer by clicking on the Add Layer icon in the Layers panel . Select Rectangle Marquee Tool and drag to make the bottom banner with a width of 750pixels by 21 pixels. Color this banner with color #303030.
4. Choose Horizontal Type Tool. A text layer is created automatically.
5. Choose Horizontal Type Tool. A text layer appears automatically. Enter the button text on the top banner too: "home l sitemap l news l downloads".
6. Add a new layer. Now make the gray horizontal line color #808080 with single Marquee tool.Go to Edit>Stroke. Choose Stroke width 1 pixel. Color #808080. Location Center. Click OK.



7. Now define the logo area with the rectangular marquee tool. Go to Edit>Stroke. Choose Stroke width 1 pixel. Color is #808080. Location Center. Fill inside with Black color with Paint tool. Name it Logo area.
8. Choose the Horizontal Type Tool and write your company name or website name.

9. Insert your header .This could also be any image you choose. The image needs to be a horizontal banner. Open your image file. Go to move tool. Drag from your image file to this layout in the middle of the layout.
10. Draw the boxes seen on the right with the Polygonal Lasso Tool. Go to Edit>Stroke. Choose Stroke width 1 pixel.

11. Now create the white bands with text at the bottom of each of the right graphics with the rectangle marquee tool. Fill the box with white color with Paint tool. Name it