[label][Fireworks][转载] Web Slices - Fireworks CS5

Web Slices – Fireworks CS5

http://bestwebdesignz.com/tips/fireworks/web-slices-fireworks-cs5/

This entry is part 12 of 14 in the series Fireworks CS5 Tutorial

It is time to slice up the layout for the web now that it is ready.

Slicing is a process where we decide which parts of the layout need to stay as images and which parts could be recreated in HTML. The more the images the more the file size and so more the the loading time.

Some images that will need to be sliced are:

Logo
Photos
Background gradients

If we decide that something needs to remain an image in our final web page we need to decide which format will suit it best (i.e. gif, jpg, png). We need to optimize these images to load quickly on the web (smaller files size) and look good at the same time.

Some points to keep in mind while optimizing images are:

Images with flat colors will be best optimized as .gif files. Gif files also allow transparency. Gif files can also be animated.
Images with many colors e.g. photos, will be better optimized as .jpg files.
.png files can retain vector information and transparency

This is what our layout looks like now:

Let us first slice the logo. To do this follow these steps:

Select the slice tool
Create a rectangle around the logo
You have now created a slice
You will be able to see a green tansparent rectangle over the logo.
You will also notice a new layer in the Web layer in the Layers panel, called ‘slice’. Rename this to ‘logo’.
You will notice that the name on the slice will also become ‘logo’
Now optimize the slice by selecting ‘JPEG – Better Quality’ from the ‘Properties’ panel.
Export this slice by right clicking on it and selecting ‘Export Selected Slice’.