![]() |
![]() |
![]() |
![]() |
![]() |
||
![]() |
![]() |
![]() |
||||
![]() |
||||||
Xara X. Image Slicing. A Basic Tutorial |
![]() |
![]() |
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. |
![]() |
![]() |
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
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.
|
![]() |
![]() |
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. |
![]() |
![]() |
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. |
![]() |
||||||||||
|