Concept Explained

Image Slicing means taking a large image and breaking it into smaller images that can be "reassembled" into an HTML table so that the image appears complete.

Advantage are:

• Several small images will load faster than one large image.
  
  
• It's easier to create interactive images with sliced images. (EG. hyperlink certain parts of the over all image to specific files.)
  
  
• It's possible to place text in relation to image slices in ways that are not practical with large, unsliced images.
  
  

Completed Example

The large image below consists of 6 smaller images arranged in a table to form a single image.  The process was performed in PaintShop Pro but it can also be performed in Fireworks just as easily.

Individual Slices

HTML Table

<table border="0" cellpadding="0" cellspacing="0" width="600">
        <TR>
                <td rowspan="1" colspan="1" width="300" height="256">
                        <img name="castles0" src="images/castles_1x1.gif" width="300" height="256" border="0" alt=""></td>
                <td rowspan="1" colspan="1" width="300" height="256">
                        <img name="castles1" src="images/castles_1x2.gif" width="300" height="256" border="0" alt=""></td>
        </tr>
        <tr>
                <td rowspan="1" colspan="1" width="300" height="257">
                        <img name="castles2" src="images/castles_2x1.gif" width="300" height="257" border="0" alt=""></td>
                <td rowspan="1" colspan="1" width="300" height="257">
                        <img name="castles3" src="images/castles_2x2.gif" width="300" height="257" border="0" alt=""></td>
        </tr>
        <tr>
                <td rowspan="1" colspan="1" width="300" height="257">
                        <img name="castles4" src="images/castles_3x1.gif" width="300" height="257" border="0" alt=""></td>
                <td rowspan="1" colspan="1" width="300" height="257">
                        <img name="castles5" src="images/castles_3x2.gif" width="300" height="257" border="0" alt=""></td>
        </tr>
</table>

Instructions for Macromedia Fireworks 8

• Select the Slice tool on the Tools panel
  
  
• Drag the cursor over the image to divide it into rectangular sections
  
  
• Begin Export
  
  
  • Choose File >> Export
    
    
  • In the File dialog box, choose the folder for storing the resulting HTML page and the resulting image files.
    
    
  • Type a name for the HTML page.
    
    
• Make selections in the Export dialog box
  
  
  • In the Export drop down list, select the "HTML and Images" option.
    
    
  • In the Export dialog box, navigate to the folder in which you wish to save the HTML file.
    
    
  • Type a name for the HTML file.
    
    
  • In the Export drop down list , select the "HTML and Images" option.
    
    
  • In the Slices list choose "Export Slices."
    
    
  • Enable the "Include areas without slices option.
    
    
  • From the HTML list choose "Export HTML File."
    
    
  • Check the "Put Images in Subfolder" checkbox. It's easier to manage the smaller images when they are together in a single dedicated subfolder.
    
    
  • Click "Export" to save the image sliced together with an HTML file.
    
    
• Check your work: View the HTML page in a browser. It should assemble the images so that they appear as a single large image.
  
  

Instructions for PaintShop Pro 7

• Open the large graphic in PaintShop Pro
  
  
• Select File > Export > Image Slicer. This will open the Image Slicer dialog box.
  
  
• Make selections in the Image Slicer dialog box
  
  
  • Select the Grid tool (#) and then click on the preview image. Enter the number of rows and columns you want for dividing the image into smaller parts.
    
    
  • Select the Arrow tool and then use the Arrow cursor to adjust the dividing lines.
    
    
  • Optionally, you can create a link to specific slices by clicking on the slice with the Pointer tool and typing the path in the Properties Inspector.
    
    
  • Select the image format and check the optimize box
    
    
  • Click the Save button and the "Save As" dialog box will open. Naivagate to the folder in which you wish to save the sliced images and the HTML file for reassembling them. Click the save button.
    
    
• Check your work: View the HTML page in a browser. It should assemble the images so that they appear as a single large image.