New users are frequently confused. OK I could stop there but I won't. New users are frequently confused about how to create a GIF image for their website with a transparent background. That and also how to get rid of the white "fringe" around the image. It's easier than the arrow. Honest!

The image above has a soft gray shadow. We'll use this object to create a transparent GIF bitmap image.

Select the image and from the File menu, select Export.

In the Export File dialog, name your image and from the Save as Type: drop down list, select GIF and press Export.

The GIF Export Bitmap Options dialog (shown above) will open. Click the wine glass icon Make the Background Transparent. And press Export. That's all there is to it. Well, almost.

Since this image only has a few colors, you can select 16 Colors for the Color Depth. This will make the file size somewhat smaller.

Notice that when you select and deselect the wine glass transparency option icon that the background on the left is gray and not white. This shows you what part of the image is transparent.

OK. But what do you do if your image is going to appear over a colored background, or even over a bitmap background? I'm glad you asked.

Place a rectangle larger than your image behind the image and apply the same background color or bitmap fill to the rectangle as the image will appear over on your website. In the case of the image above, a deep blue background color.

Select the image but DO NOT select the background rectangle.

Now export your image.

As you can see the shadow is blue and the background is still transparent. Again, you can select 16 Colors or reduce the number of Maximum Colors: to 64 or 32 to make the file size smaller. Press Export.

TIP: You can experiment with the number of colors and compare the two by clicking in the right preview window and then modifying the number of colors. The files size appears under the image sometimes automatically and sometimes only after you press Preview.

And here are the two GIFs. The one on the left was created over the white of the page and shows a white fringe all around. The image on the right is the same image exported over the blue background. No fringe.

For those inquiring minds that need to know why here's a short explanation. Xara anti-aliases the image (smoothes the edges) to the background color. So whatever color or texture the image is placed over, the white of the page, the blue of the rectangle, or the texture of a bitmap, Xara creates an outline of intermediate colored pixels to blend the image's outline to the background. The white fringe you see on the left, is not apparent if the image appears on a white background. Likewise if the blue image appears over a white background, a blue fringe will be apparent.

So, now you know.