How to make a website layout

Making a website layout entails an entire process and there are several design aspects that you will need to consider. In reality there are four main processes for making a website layout and they are:

Creating a unique website header
Designing your website layout in Photoshop
Slicing your layout in Photoshop
Creating your web site in Dreamweaver

So let us start the tutorial by understanding these very aspects of making a website layout

One of the most important things to remember while designing a website layout is that you need to first define space for the following elements:

1. Header - This could be static or flash banner
2. Logo
3. Buttons – Navigational links like home, about us, services, contact us etc.
4. Image
5. Content area
6. Copyright Information

Here’s a tutorial on creating a simple but effective website layout

Step #1: Open a new file (File>New) or CTRL+N. Choose the size 1024 x 768 pixels and keep a transparent background.

Making a website layout entails an entire process and there are several design aspects that you will need to consider. In reality there are four main processes for making a website layout and they are:

Creating a unique website header
Designing your website layout in Photoshop
Slicing your layout in Photoshop
Creating your web site in Dreamweaver

So let us start the tutorial by understanding these very aspects of making a website layout

Step #2: Now create a new group Layer>New>Group and name it as Background. Create a new layer within this group Layer>New>Layer. and name it as Background.

Step #3: Now go ahead and fill the background Layer with black #000000. Once this is done, go to blending options Layer>Layer Style>Blending Options and use the following settings:

The pattern that I have used is known as washed water color paper and you can find it in the artistic surfaces Section. Set the opacity to 5%

Step# 4: Select the Rounded rectangle tool and opt for a radius of 10pix. Now set the color to #3a3a3a. Go ahead and draw a large rounded rectangle in the center of the layout.

Step# 5: The first thing that is required on this layout is a header. So I will select a nice image. But before adding the image, create a new group and name it Header. Then create a new layer and name it header_ image.

Step# 6: Once you have selected you image and added it, it is time to add the company name or logo on the top left corner like this:

Step# 7: Now create another new group and name it Navigation. This is where all your link buttons are going to be. Now create a new layer called ‘Home’

Step# 8: Pick the rectangle tool and create a rectangle that will be placed right between your header image and the actual content area. Go to Blending options Layer>Layer Style>Blending Options and use the following settings:

Step# 9: Now you need to add a button with the title color as #ffffff (White) and the color subtitle #444444

Step# 10: Now go ahead and duplicate the Homepage text / layers for creating rest of the buttons.

Step# 11: The next most important part of your web page is the content area. Create a new group and name it content-left. You can create 2-4 content boxes. I have created space for 3 boxes. First select your content area using the rounded rectangle tool and then go to Layer>Layer Style>Blending options and use the following settings:

The content Box

Step 12: Now all you have to do is add another content box on the right side using the rectangle rounded tool. At the bottom of the page add the copyright. This will look like: