Part 2 on How to Create a Website with Photoshop and Dreamweaver

How to design a website layout in photoshop layout

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

Layout 1

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:

Step 1

Open a new file in Photoshop by clicking on File/New and enter a width of 750 pixels and height of 450px.

Step 2

Color the background with Black by choosing black in the foreground color 

Foreground color tool 1

and selecting the paint bucket tool 

Paint bucket tool 2

and click on the canvas. Your background will now be black.

Step 3

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 .

Rectangular marquee tool 1

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.

Step 4

Horizontal type tool 2

Choose Horizontal Type Tool. A text layer is created automatically. Now enter the text for Copyright, e.g. “Copyright © 2005 www.YourWebBusiness.com. All Rights Reserved.

Step 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”.

Step 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.

Layout 4

Step 7

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.

Step 8

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.

Step 9

Now define the logo area with the rectangular marquee tool.

Rectangular marquee tool 2

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.

Step 10

Horizontal type tool 3

Choose the Horizontal Type Tool and write your company name or website name.

Step 11

Horizontal type tool 4

Choose the Horizontal Type Tool and enter content in the middle.

Step 12

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.

Step 13

Draw the boxes seen on the right with the Polygonal Lasso Tool.

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.

Step 14

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.

Step 15

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 – pic1pic2pic3. You can drag these images to your layout.

Layout 16

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!


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.


Photoshop Tutorials & Resources


Pinterest