New User Guide — Cleaner Gif Exports

My other thought dealing with my reader's question as to why her GIF images were so jagged, (now that we have eliminated display quality as the cause) was how she was exporting her images.

The image and text shown left were exported in Anti-aliased View Quality with the white background designated as transparent. On this page's predominantly white background the logo looks crisp and the text is readable, even at 10 points.

If the logo and text in the GIF image, with the transparent background shown above, are placed on a web page with a non-white background, such as the gold colored background shown on the left, we see a lot of ugly fringing around the logo and text.

By way of contrast, the logo and text on the right side are clean and sharp. This is because the logo and text on the right were exported over a gold-colored page background. How? Read on.

When Xara anti-aliases an image with a transparent background, it uses the current screen color (usually white) to create the intermediate pixels. Hence when the logo and text  in the image at the top of the page were exported on a white page, the white fringe resulted.

To change the screen color, pick a color from the screen palette, hold down the Ctrl key and drag the color onto the screen. To get the screen color back to white, right click on the screen and select Default Page Background from the pop up menu.

NOTE: If you want a GIF image to have a transparent background, do not place a colored rectangle behind the image. Xara will treat the color as solid, even if you have checked the Transparent option (GIF Options tab) in the GIF export dialog.

Use the page color as your transparent background and Xara will anti-alias your image to the background color. TIP NESTED WITHIN A NOTE: If you want your image to be a specific size, place a rectangle behind your image, but give the rectangle no fill and no outline. ADDITIONAL TIP: Use Pixels as your unit of measurement when creating images for the web, and make sure your pixel amounts are even. If your image is 200 1/2 pixels wide, Xara will attempt to anti-alias the edge of your image, often resulting in a noticable outline.

If your transparent GIF will be appearing over a repeating background image, such as the one seen on the left, you can either pick a page background color that is close to the image or, import the background image into Xara, open the Bitmap Gallery, select the image and press Background . Your page will fill with the background image and Xara will anti-alias your image to the background as seen on the right.

TIP: To achieve the transparent drop shadow under the logo, I applied transparency to the shadow (with the background page image) before exporting. Xara treats the shadow as part of the image. Because the shadow contains a darker version of the background image, the shadow appears transparent when it appears over the web page background image as you can see above.