Step 3: Make Layout Web Compatible.

The Homepage and Insidepage has been modified to its best as per the clients requirement. Now the templates has to be Optimized, Sliced and Converted to HTML file format, so that the web browsers like Internet Explorer and Netscape Navigator can read the file and display it on the Internet.

This article of Professional Steps of Web Designing explains the practical steps involved in slicing, optimization and conversion of the graphic file to HTML file format. Adobe ImageReady* is used to explain this process as it is one of the best software used for this purpose.

Click here to download .PSD & HTML source files.

Layout Slicing & Optimization

Steps to place guides before slicing the layout.

1. Open Adobe Photoshop

Place the guidelines with the help of rulers which will result in optimizing & slicing for the easy download of the html page.

2. Select View > Rulers

Rulers: Rulers appear along the top and left side of the active window. They play an important part in placing guidelines. A guideline comes to the scene only when dragged from the rulers with the Move Tool.

3. Guidelines: Guides appear as lines that float over the entire layout and do not print. They can be moved, removed or locked to avoid accidental movement of guides.

4. To place a guide, keep the Rulers option on.

To create a guide, Click and drag from the rulers by using Move Tool (V) from the horizontal ruler to create a horizontal guide.

5. The same is done for the vertical guide. Drag a guide from the vertical ruler to create a vertical guide. The pointer changes to a double-headed arrow when you drag a guide.

Guidelines are layout dependent, it varies as per the colors, navigation links placement, pictures etc. Placement of guidelines vary from layout to layout.

Each layout have their individual style, color combination, placement of links & logos. Guidelines have to be placed according to their respective styles by giving emphasis on the important aspects, such as logo, links & colors.

Place the guides by taking care of the following points:

6. This particular layout has navigation links of different width for e.g. Profile, Products, Clients, Contact Us, Advice Online & Feedback.

These links are placed one below the other, place the guides taking care of the respective bullets within the area to be sliced.

7. The Navigational links are right aligned to the guideline on the right. Place a vertical guide on the left side in proportion to the text area.

For e.g. the advice online button will have a vertical guideline near the "A" & the client's button will have a vertical guideline near "C".

Similarly guides are placed to the other links. Place the horizontal guidelines exactly in between the two words (i.e. Profile & Products) the same has to be done for the other navigational links.

8. Place vertical as well as horizontal guidelines, placing like a border to the logo, which is situated at the bottom right corner of the layout.

9. Place Vertical and Horizontal guides to slice the other parts of the layout. The spacing should be of medium size as slices will be created depending on the guideline placement.

Therefore spacing between the guideline should not be too big or too small as its dependant on the size of the slice.

10. The rest of the guides are placed according to the color combination & effects given to the layout. Guides are also placed cutting the punchline area into two parts.

The other guides has to be placed differentiating the flat color area & the effect given area. So, that the flat color slices can be optimized with the lower color value and the effect given slices can be optimized with a higher value to retain the image quality.

The layout used here dosen't have flat color so the guide placement is such that the layout downloads faster despite the fact that the layout has more effects.

If the full layout image is kept without slicing then the page will be very heavy and would take a lot of time to download, which is not advisable.

11. As soon as the guides are placed, Save the layout.

File > Save