web design template web design template   web design template

Page: 1 2 3 4 5 6

In a layout all the slices can be saved either in GIF format or JPEG format or in both selectively depending on the image quality.

7. The file size of the whole-optimized layout is displayed at the bottom status bar.

The entire file size of the .psd file was approximately 3.6 MB. After optimization, the file size of the whole layout is 55 KB.

8. Optimization reduces file size taking care of the overall effects of layout.

Choose File > Save

9. To preview the optimized layout in the browser

Choose File> Preview in > Internet Explorer

The browser displays the image with a caption listing the image's file type, pixel dimensions, file size, compression specifications in the first paragraph, file name and other HTML information in the second paragraph.

10. Choose File > Save Optimized As

This action converts the .psd file into .html file.

The Save Optimized Window is displayed with the options File Name, save as type and options
"Save As HTML File", " Save Images" & "Save Selected Images".

By default the "Save As HTML File", "Save Images" are already checked.

11. Save the file with the name as index.html

The first page of the web site is named as index.html, because server picks index file first and displays it on the internet.

The html file gets saved with its respective images in a seperate folder called images.
After saving close this file since sometimes it prompts to save the file again.

Steps to Slice, Optimize and HTML Conversion of the Homepage Layout is complete.

1. Choose File > Open, and open inside.psd file in Adobe ImageReady.

2. To place guidelines for slicing.

Choose View > Rulers

Select Move Tool from the Tool box, drag and place guidelines from the rulers.

Place horizontal guidelines on the menu links and vertical guides on the top panel. Slices should be of medium size since if the slices are big then it will increase the download time.






© Image Online  2001-2003