How to design a website layout in Photoshop

Part 2 on How to Make a Web site with Photoshop and Dreamweaver

You can get some great web site layout design ideas from our variety of ready-made website layout templates!

This tutorial will teach you how to design the web site layout seen below in Photoshop. Click here to view the finished layout. You will also learn how to convert this to an optimized html site in the next few tutorials.

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
Copyright Information

Follow the following steps to design your website layout in Photoshop:

Open a new file in Photoshop by clicking on File/New and enter a width of 750pixels and height of 450px.
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.
Add a new layer by clicking on the Add Layer icon in the Layers panel. If your Layers panel is not open then go to Window/Layers. Name the new layer copyright . 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.
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".
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.
Right click on the layer and select duplicate layer 3 times, because you have 4 lines. Put the lines in their corresponding place: in bottom, middle, top.
Now you can enter the button text on the second top banner in a new layer e.g. About us l services l products l clientele l contact us.
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.
Choose the Horizontal Type Tool and write your company name or website name.
Choose the Horizontal Type Tool and enter content in the middle.
Insert your header (See our tutorial on creating an eye-catching 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.
Draw the boxes seen on the right with the Polygonal Lasso Tool. Go to Edit>Stroke. Choose Stroke width 1 pixel. Color is #808080. Location Center.
Name your layer borderpics. Make two more Boxes. Adjust them equally in the right side of the layout. Insert the images by dragging them to your layout and naming the layers.
Drag the layer borderpics on top of the 3 pic layers. The edges of the pictures have to be cut according to the design of the box.
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 "whitebandpics". Choose the Horizontal Type Tool. A text layer is created automatically. Now enter the text for Gifts. Follow the same for the rest of the pictures. You can click here for the images - pic1, pic2, pic3. You can drag these images to your layout.

Now when your design is ready, you can go to the next step to creating your website which is to make slices.

This tutorial is part of a 4 page tutorial on how to create a simple website using Photoshop.

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

You can get some great web site layout design ideas from our variety of ready-made website layout templates!

This resource is part of the Entheos Free Resources section. These resources & tutorials cover Corel Draw Tutorials, CSS Tutorials, Flash Tutorials, Fireworks Tutorials and Effects, Dreamweaver Tutorials, Design Ideas & Inspiration, Photoshop Effects & Web Design Tutorials.

No portion of these materials may be reproduced in any manner whatsoever, without the express written consent of Entheos. Any unauthorized use, sharing, reproduction or distribution of these materials by any means, electronic, mechanical, or otherwise is strictly prohibited.