Xara X. Image Slicing. A Basic Tutorial

Here's how we could break the image down into more efficient units by slicing the image into smaller pieces. Sections a, b, d, and e can be exported as 16-color GIF images while c can be exported as a 256 color GIF or JPEG image.

Xara X will actually determine the best way to break the image apart and will create an HTML table that specifies how to seamlessly reassemble the sliced shapes. When all is said and done, you can copy the HTML table Xara creates along with the slices image and paste it into your HTML document where the sliced images will be seamlessly reassembled.

NOTE: Xara offers a second method of image slicing which is more difficult but more like the method used by Photoshop and Fireworks. This is covered in detail in the Help file under Image Slicing, the Alternative Method, and involves user defined slice areas which are defined in the Layers Gallery. While this method is equally effective, Xara's primary method is quick, easy, and efficient.

If we examine my sample image, we can see that the we will need many more colors to render the grapes and leaves that we will to render the text, or the background and outline. So we will create two Named objects, Grapes and Text.

We will select only the grapes and leaves and then press New... and give the name Grapes to our first selection. We'll do the same and name the text Text. As you can see on the left we now have two named objects.

We can click the > right facing arrows to the right of the black rectangles to change the file type to JPEG or PNG, but for this exercise we'll leave both file types as GIF images.

As I explained earlier, we might need all 256 colors (the maximum number of colors a GIF file can contain) to render the subtle changes in color for the grapes, but for the text, 16 colors will be more than enough.

Click the black rectangle to the right of the Grapes object in the Name Gallery to open the GIF Export Options dialog. We can leave the settings pretty much as they are with the exception of transparency. Click the wine glass icon to disable transparent background (if it is currently enabled). We should also select Optimized from the Palette choices so that Xara will use the best 256 colors to render the grapes. Click Apply to apply the changes and to close the dialog.

Click the black rectangle next to the Text object in the Name Gallery . This time in the GIF Export Options dialog, click on Color Depth and change the setting to 16 colors. Make sure the transparency option is still disabled, and press Apply.

NOTE: Selecting the Browser Palette option forces Xara X to try to render the grapes using a limited palette of 216 fixed web safe colors. Considering the sophistication of most computer monitor's today this is not really necessary. The Optimized Palette on the other hand selects the best 256 colors (or less) to render the image resulting in a much cleaner and sharper image. In the side by side image shown here, the left half of the image uses the 216 color Browser palette and has been dithered to avoid banding. The right side uses the Optimized palette with no dithering and is much smoother and cleaner.

To this point, we have determined the file type for both images will be GIF and that one will have 256 colors and the other named object will have 16 colors.

The next step is to let Xara know we wish the two named objects to slice. When we select Slice from the drop down list the black rectangles are replaced by check boxes indicating that both images have been designated as slicing images. Should we determine that the text, for example, does not really need to slice and can be part of the background image, we could uncheck the check box and then only the grapes would slice.

We are now ready to export the image. From the File pull down menu, we select Export Image in Slices (not Export).  The Image Slicing dialog appears with untitled.html as the name of the file. This is fine as we can change the title later if need be. Leave the Save as Type entry as GIF. Press Save and it's a done deal.

Xara will display a dialog asking if you would like to see the final image. Say OK and your Browser will magically launch and display your image, which will look exactly as it did before slicing. However, as you can see by my dramatic illustration here, which uses the actual sliced shapes, Xara has artfully sliced and diced the image into no less than 9 sections, and created a very precise HTML table to reassemble the sliced pieces in their correct order. You can copy and paste this HTML table, along with the sliced images and paste it into your own HTML document to display your sliced image.

BEHIND THE SCENES NOTE: This all seems pretty straightforward and simple. And it is. However, when your editor (that's me and I'm proud of it!) was preparing this tutorial, he believed the Help files when they said you can export part of the image as a JPEG and part as a GIF, or at least that's how he perceived the information. At any rate, when I tried to make the grapes JPEG, and the text GIF, every time I pressed the black JPEG rectangle to modify the image, Xara crashed. And I spent at least half the day repeating this until I finally saw the light and tried making everything GIF and then everything worked smooth as silk. Moral to the story, you can hit your head against a brick wall as many times as you want, but you'll only end up hurting your head.

This wraps up our exploration of the Xara X Galleries. And as you can see, Xara saved both the best (and the worst) for last. While the Name Gallery has some very powerful potential, some more work is needed to make it more user (and editor) friendly.

Questions, comments, criticisms? Use the form on the next page to submit your message. I've been working on the form and I think I have the bugs finally worked out. I hope to hear from each and every one of you, if nothing more than just to say hello.