Web Slices – Fireworks CS5

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’.
  

Similarly slice and export the photo and a thin slice of the header background gradient.

You can optimize the slices by comparing the quality and file size with various options by using the 2-up and 4-up previe tool.

You can also export all the sliced images together by:

• From the main menu select ‘File’
• Select ‘Export’

In the window that opens, select:

• Export: Images Only
• Slices: Export Slices

Now you have all the images you need to begin creating your webpage using an HTML editor.

Fireworks Source File (Save As onto your computer)