Lesson 7 Slices

Slicing

Slicing can make it easier for a browser to load large images. In the example below the image is designed to go across the entire screen. As one image, it could possibly take a while for this image to load. By slicing it into many parts it is likely to appear faster.

The easiest way to slice an image is to slice along ruler guides. Drag a guide from the ruler around the area(s) you wish to slice. Continue to drag guides until you have defined all the areas you wish to slice. When you are ready to Export this image, after you have set the Export settings, click the Next button.

Set slicing to Slice Along Guides

Also, remember to save the HTML of your slice.

When you look at your files you will see that you now have multiple images of this photograph. And an HTML file. Look closely and you will see that Fireworks has given you row and column numbers. missy_rl_c1.jpg is the first row and first column of the image.

All you have to do is to copy and paste the HTML code into the document where you want your image to load.

Click here to see how this image would load.

Slice Objects

Sometimes you don't want to use the guides to slice an image. In that case you need to select the Slice Tool and draw a rectangle around the area(s) you want to slice. You can use the Selection tools to move or modify slice objects.

One reason for doing this would be if you had an image that you wanted to update parts of it on a regular basis. By using the Slicing option in Fireworks you can update just the parts of the image that need updating.

Using the Slice Tool a rectange was drawn around the inset photograph

Options are set using the Slice object window. You can set a URL link for a sliced object as well as other settings.

Slicing can also be used when you have an image that should be saved as two different file formats. This image has an area that should be saved as a JPG (the photograph), the text can be saved as a GIF with few colors, and the background can be saved as a GIF with more colors.

Set the Slice Object Export options by choosing Custom. This will open the Export Preview Window where the export settings can be set. You can also create a Text Slice. Select the slice object and set the Export Settings to Text (No Image). You will see a text box where you can type in whatever text you want to appear. You can use any HTML codes you want for formating. Using a Text Slice is handy for areas in a graphic that include text that needs to be updated on a regular basis. Instead of having to create a new image, you just change the text.

Text Slice