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 optimisation 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 shows you how to slice images into regular shaped blocks. Another tutorial describes slicing the image by its component objects. You might typically use the method described here if you have a complex graphic with several overlapping objects - such as the car, heading and logo in this particular example which you might reasonably want to be separately editable objects within Macromedia Dreamweaver.

So to break this image into four separate slices start by positioning the guidelines exactly where you want the slices to cut (you can create these guidelines by simply clicking on the rulers shown on the margins of the drawing document and dragging - if you don't have rulers showing then check the option in Window > Bars > Rulers or Ctrl-L).

Next draw 4 rectangles to define those slices (select the rectangle quickshape tool or Shift F3), one over the car, one over the logo, one over the heading and one over the buttons. This will be easiest if you have snap to guidelines selected - check the option in the Window menu (or NumPad 2).

The next step is to give each of these slices a name - so simply select each in turn, click the name icon (at the far right end of the Selector tool infobar) ...

... and give them names.

Now that the image is divided into different named slices, it's ready to be exported. However, clearly you don't actually want to export that sliced image covered in black rectangles so just set the rectangles to No Color. (To set an object to No Color select it, then left-click No Color on the Color Line to set the Fill color and right-click to set the Line color.)

If the purpose of the slicing is simply to break the image into smaller chunks, then you could now go to the Export Image in Slices option in the File menu (or Ctrl-I) and export the sliced image in the same way as any other bitmap - Xara Xtreme slices this image into the four named sections and save it with the necessary HTML. As a result the upload of this image to a web page will be more manageable and you can treat the slices as separate objects within your HTML editor.

If you wanted to apply different export settings to one or more of the slices then you can do this through the Name Gallery before going to Export Image as Slices. With this car example you might for example want to export the car as a JPEG and the rest as GIFs. So open the Name Gallery (far right of the Gallery toolbar)...

...and select 'Exports' from the drop down menu and then click on the arrow to the right of the car and filetype...

...select JPEG from the drop down menu of filetypes and click Apply. This creates file information for the 'car' slice and lets you optimize the settings for that slice.

Now in the Name Gallery you see the file type for Car has changed to JPEG. Click on ,...

.... this opens up the standard Export dialog box where you can change any of the optimization settings for the slice - as this is a JPEG you might want to play with the quality settings. When you're happy with the settings click Apply.

Now you're done and you can export the complete image. Simply marquee select the complete image, 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 will slice 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.