Image Slicing Overview (Alternative Method)

Large, complex graphics for web pages can produce large files, which take a long time to download over the Internet. You can "slice" the image into sections, which can download separately.

You have two ways of slicing images. This way will be familiar to Photoshop and Macromedia Fireworks users. It uses separate slicing objects in the Guides layer
. The alternative method is easier for drawings that are likely to change (because the slicing information is part of the objects in the drawing).

To show how to slice images, we'll use this graphic (in practice you would not slice a simple image like this):

Another use of slicing is optimization. The blue and white circle contains more colors than the surrounding areas of flat red. You can optimize the graphic by exporting just the high detail area (the circle) as a JPEG or 256-color GIF and the other areas as a 2-color GIF. This minimizes the amount of data to download. A separate page describes optimization.

First stage: create the Guides Layer

The objects that do the slicing need to go in the Guides Layer. (You could also use a separate layer
. For full information see Creating layers.)

1. From the Utilities menu, choose Layer Gallery.

2. Right-click on the Layer Gallery to open the pop-up menu.

3. Choose Create Guides Layer.

4. Move the Guides Layer to the front - see Reordering layers.

4. Click on Guides to make it the selected layer (the layer new objects are created in).

Second stage: create the "slicing" objects

Next step is to create objects over the areas you want to slice - in this case over the circle. Slices are always rectangular so the easiest tool to use is the Rectangle Tool.

1. Draw a rectangle over the circle.

2. We suggest making the rectangle semitransparent so you can the circle underneath. This makes sizing and positioning the rectangle easier:

3. Give the rectangle a name (as named objects control slicing). Use either the Name Gallery or New name on the Selector Tool Infobar
. For this example we'll use the name Rectangle. If you had more areas you wanted to export at high quality you would also name them in the same way.

Third stage: export the graphic in slices

You do not need to specify how to slice the image as Xara LX does this automatically from the information in the Name Gallery. Objects in the Layer Gallery are never exported so you can leave the "slicing" objects visible.

1. Select both the red rectangle and the blue circle - see Selecting objects.

2. Select Export image in slices on the File menu.

3. Select the file format (usually GIF or JPEG for Internet Graphics).

4. The file name is the HTML file that contains the HTML code for the sliced image. You can change the file name if required.

5. Click Save.

6. Select the required save options. (For more detail on the options in this dialog box, click the Help button.)

7. Click Export to save the sliced image.

8. You can now view the exported bitmaps in your browser.

The example is sliced like this (the slices has been separated so you can see them):

Using the graphics and HTML code on a web page

To include the sliced image on a web page you need to copy part of the HTML test page into the web page. (Cut-and-paste is the easiest way.) This description assumes you know how to edit a web page and have a basic knowledge of HTML. You may also need to copy the bitmap files to your web server.

1. In a text editor, open the .htm file created when you exported the bitmaps.

2. Technical Note: the sliced image is contained in a Table. This ensures correct formatting.

Copy the entire Table into your web page where you want the image to appear. The Table starts

<table name="XaraTable"...

and ends

</table>

3. We recommend copying the bitmaps to the same folder as the web page. If you use a different folder to the web page, you need to edit the SRC attributes to point to the correct folder.

4. Copy the bitmaps to your web site. The bitmaps have the same name as used in the Name Gallery. (In this example rectangle.gif)

There may be other bitmaps with names such as r2c1.gif plus a file called shim.gif. Copy all these to your web site. Technical note: Shim.gif is a dummy bitmap used for padding.

Movie—click below (not working in this version)

Image slicing