Complex graphics can cause some interesting problems when you are exporting them for use on the web. For a start, large files take a long time to download over the Internet. Also there might be parts of the image that would benefit from different optimization settings from the rest - for example if your image combines a photo with some vector drawing. Or you might want to treat parts of the image as separately editable objects within your HTML editor.

One way to deal with these problems is to 'slice' the image into sections on export. Xara has two different approaches to slicing, but in either case you can apply different optimization settings to the various slices if required, and the image is automatically exported with the necessary HTML to stitch it together again on the web page.

This tutorial covers slicing by object - that is creating separate slices out of the component objects of an image. Another tutorial deals with the alternative method of breaking the whole image into regular blocks, which would be more appropriate if you have a complex graphic with several overlapping objects.

In this particular example we're going to define the car as a separate slice because it would be best to export it as a JPEG, whereas the rest of the graphic is best as a GIF.

Slicing is controlled from within the Name Gallery. The first step is to give the object which is going to form its own separate slice a name, so simply select the car, open the Name Gallery by clicking the Name Gallery icon...

... click New and call this image 'car'. It now appears in the list of named objects in the Name Gallery.

Next you need to choose the export setting for this separate car slice. Within the Name Gallery select 'Exports' from the drop down menu and then click on the arrow to the right of the object name and file type, select your file type - in this case JPEG - click Save. This creates file information for the 'car' slice and will allow you to optimize the settings for that slice.

Now in the Name Gallery you will see the file type of the car has changed to JPEG.

Next you might want to change the optimization settings for the slice - as this is a JPEG, we might want to play with the quality settings for example. Clicking on opens up the export dialog box. When you are happy with the settings, click Apply to save these settings.

The last step is to export the complete graphic including your car JPEG. Simply marquee select all of the objects, then choose 'Export Image in Slices' [or Ctrl-I] from the File Menu.

We want all parts of the image other than the car to be exported as a GIF, so select GIF as the file type. The Export dialog box opens again. You can make any changes you wish to optimize the GIF part of the graphic and then click Export. Xara slices the whole image in a logical manner, maintaining the different settings for the JPEG slice and exporting it with all the necessary HTML to fit the slices together. We recommend that you save it to a separate folder so that it's easy to identify all the files including the HTML.