Click here to download a Zipped copy of
(738K)

Xara can create 8 and 256 color GIF files with one color designated as transparent. Xara can also create a PNG file with Alpha channel transparency, which is 24 bits of color information (16.7 million colors) and 8 bits of transparency information, for a grand total of 32 bits.

We'll look first at creating a GIF image with a transparent background and then we'll look at creating a PNG image with Alpha channel transparency.

One of the most frequently asked questions by new Xara users is "Why do my GIF images have a white fringe around the image when I place them over a dark background?"

To answer this question, we need to examine how Xara anti-aliases (smoothes) the image. Xara is unique among vector applications in that it uses the non-selected color behind an image to blend the image to when you export a GIF or 8-bit PNG file with transparent background.

When you export a GIF or 8-bit PNG with a transparent background, it is important to place the objects to be exported over a background that is the same color, or a similar color to the background color or background pattern of your Web page as you can see in the example on the left. The text (magnified 400% on top) was exported over a white page with the Transparent Background option selected, then imported into Xara and placed over the graduated background. As the color behind the text gets darker, the fringe becomes more apparent. As the color gets lighter, and closer to the color the text was originally Anti-aliased to, the fringe disappears and the text looks sharper.

In this example the white text was exported over a deep red background, imported, and a duplicate enlarged 400% and placed over the same background. The same sized text has also been placed over the background. In this case as the background gets darker, the text looks cleaner.

TIP: Notice how the middle line of text looks bolder and whiter than the text on the bottom? The line of text in the middle was duplicated directly on top (Ctrl K). Why this works is a bit of a mystery but it does work and produces cleaner, brighter looking text. Especially at this small size. I suspect this reduces some of Xara's Anti-aliasing at small sizes.

NOTE: When you export your objects and/or text objects, place a rectangle behind your objects that is the same color as the background color of your Web page. Do not select the rectangle. (You can also change the page color if you wish by holding down the Ctrl key and dragging a color from the screen palette onto the screen). Xara will anti-alias to the page background or the non-selected colored rectangle behind the objects.

TIP: If your Web site has a textured background, you can import the background tile image into Xara, open the Bitmap Gallery, select the tiling bitmap image, then press Background. This fills your page with the tiling background. You can place your images to be exported over this background and Xara will anti-alias to the background.

While you need to be very careful when you export GIF or 8-bit PNG images, when you create a bitmap copy using Xara's True Color + Alpha option, the background color really doesn't matter.

Why is this?

Well it has to do with the number of colors that can be designated as transparent. While 8 and 256 color GIF and PNG files can only have one transparent color, True Color + Alpha channel have 8 bits of transparency information, which I believe is 256 different transparent colors. So when Xara anti-aliases the image using all these transparent colors, the edges are razor sharp at any resolution or degree of magnification.

Here is another example of the power of True Color + Alpha transparency. I selected the jewel like object on the left but not the dark green marble background behind it, and created a bitmap copy with the True Color + Alpha option. When the object is placed over a graduated black to white background, the edges appear to be razor sharp throughout the entire image.

A WebXealot reader wrote your editor asking why she would want to convert a vector object into a bitmap. After thinking long and hard, your editor came up with this reason, and I'm sure you'll have many more. The Jewell-like object on the left is 89 separate objects, many of which are layered one on top another and which have multiple levels of transparency. If I apply a gradient transparency to the group of objects, much of the detail is lost in a transparent muddle. The image on the right has been converted to bitmap with Alpha transparency. All the textural detail of the stone fills remains intact while the transparent effect works as we would hope.

Did I miss anything? I have tried to cover Xara's bitmap capabilities but as with all Xara's features, there is a lot to cover. If I left anything out about bitmaps in last month's or this month's issue, or if anything was not clear, or accurate, use the form on Page 7 to send me your comments. And of course, as always, comments in general, or compliments, or even (God forbid) criticisms, are always welcome.

If you have any topics you would like covered next month, you can send me your suggestions as well and your editor will do his very best to accommodate your requests.