Step 2: Modify the ready-made Layout to incorporate your client's detail.

Professional Steps For Web Designing is focused on providing practical techniques of web designing in a very simplified method. The steps provided with relevant pictures will explain the concepts with great ease.

We have taken a case of modifying a readymade Homepage and Insidepage template as per the client's requirement. In continuation we have further explained the steps of Slicing, Optimization and Html conversion of the Homepage and Insidepage in the future articles.

Click here to download .PSD source files.

Softwares

Best Photo-Editing Software:

All Software's have their own advantages & disadvantages. A PSD file can also be opened in various other softwares like Corel Photopaint, Macromedia Fireworks, JASC's Paint shop Pro etc.

All our web layouts are designed keeping in mind web requirements.

Adobe Photoshop is the most widely used image editing software globally. We have used Adobe Photoshop to explain web page designing in this newsletter.

The .psd (Photoshop source file) of the reference layout is provided with this article.

An Appropriate Layout

The layout which we have selected has a very prominent design with a very peculiar look and beautiful effects. Such kind of designs always catch the viewer's attention.

Download the layout

Open the downloaded layout in Adobe Photoshop 7.0

Choose Windows > Layers

This particular layout is explained with ascending order of its layers structure in the layers window.

(Note: In (' ') displays the layer name for your reference)

Layout Design

1. This layout has highlights on the center and two horizontal lines are drawn passing through the layout, which are filled with gradient color combination of Black to Orange.

2. The 'Ray Effect', adds importance on the center part of the design.

3. The 'Center Effect' is given to pin point the center of the 'Ray Effect'.

4. The 'Bottom Panel' layer comprises a circle, which is placed on the horizontal lines.

5. Then comes the 'Right Panel Fill' Layer to hold the buttons.

6. Vertical as well as horizontal lines are drawn with Circular Strokes & Squares to define it a different look.

7. The 'Right Panel Fill' is given an outline in the 'Side Panel Outline' layer.

8. The buttons About us, Products, Clients, Feedback, Contact Us are placed in the 'Right Panel Fill' area.

9. The Logo is placed in the center of the 'Center Effect', thus giving it a prominent position.

10. This is the overall description of the Emphatic Features of this layout. The layout will be further modified according to the client's specification.

Client's Requirement

11. The Client is from an IT firm and wants a website, where lots of visitors will be visiting his site.

12. There is no mention about any specific colors to be used, In some cases, the client themselves have their own fixed colors known as Corporate Colors.

13. The client has provided the logo, some good business photographs & details of the company.

With these information the editing of the Homepage and Insidepage layout needs to be started.

Layout Editing

1. Download the layout.

2. Open the layout in Adobe Photoshop 7.0.

3. Choose File > Open

4. This layout consists of five important aspects i.e.

	A basic design/layout
	'Logo with Company Business line (Slogan)
	Images
	Navigation Links (About us, Products, Clients, Contact Us, Feedback )

These aspects will have to be changed according to the Clients Specifications.

5. Choose Windows > Layers (short key F7)

The Layers Palette consists of all the displayed items with their respective names as to avoid confusion for the user.

6. The Background Black Color looks good so the layer will be retained. In case of a color change, fill in the color of your choice.

7. Click the Set Foreground Color in tool box.

8. Color Picker pallete opens.

9. Select the color of your choice by putting values in the RGB or CMYK slot.

RGB represents Red, Green & Blue & CMYK represents Cyan, Magenta,Yellow & Black.

Colors can also be changed by the Hexadecimal (#) value for e.g. the hash value # FFFFFF displays white color & # 000000 gives displays black color.

The hash color value is done by giving a combination of alphabets (A to F) & numbers (0 to 9) in a way written with 6(six) digits. For e.g. # FF9900 gives orange color.

Steps to modify the Homepage layout

The layout can be modified at all level.

10. Hide the 'Line Filter' Layer, as its not required in the design.

11. To hide the layer, Click on eye icon in the Layers Palette.