One of the most frequently asked questions is why do my GIF images have a white fringe around them?

The example above illustrates the problem. The type and other objects have a white outline or fringe that is very annoying while the image should look like the image on the lower right.

The answer to the question is anti-aliasing.

Anti-aliasing is a process of creating intermediate colored pixels to smooth the edges of objects. In the example above (magnified 1000%) you can see what is causing the white fringe around the purple star. The T and the bit of green circle are more examples of anti-aliasing. But the bottom objects seem to blend better into the background brown color. Why?

The answer is Xara anti-aliases objects to the background color. Since most of us create our graphics on a white page, Xara anti-aliases to white. When viewed over a white background, the Anti-aliased pixels are not apparent. But when placed over a darker background, the white Anti-aliased pixels look like a white outline or fringe.

So, what is the answer?

Place the objects you wish to export over the same color, or a similar color to that over which they will appear on your web page. In the example above the image have been placed over a red-brown rectangle. When viewed over this color, or a similar color, the edges will appear sharp and clean.

When you export, select the objects but DO NOT select the colored rectangle.

With the objects selected, select File > Export...

Name your image and from the Save as Type drop down list, select GIF (*.gif)  and press Export which brings up the GIF Export Bitmap Options dialog (shown below).

TIP: You can also change the page color in Xara to a color that is the same or close to the color on the web page on which the objects will appear. Hold down the Ctrl key, and drag a color onto the page. To return to the white page color, right click on the page and select Default Page Background. By changing the page color, Xara will automatically Anti-alias to that color.

Xara presents two preview windows in case you want to do a side-by-side comparison. When you press the wineglass icon (Make Background Transparent) the preview window shows your selected objects over a gray background to indicate a transparent background. (The window on the right shows the same objects with the transparency option disabled).

Press Export and you are in business. Not that hard or mysterious really.

While we have the GIF Export dialog open above here are some additional things to try or consider.

If your selection does not have gradient fills and you only have a few solid colors, try the 16 Colors Color Depth option. This will significantly reduce the size of the exported image.

If your image contains gradients and/or photographic images, try changing the Max Colors: setting to a lower number (32, 64, 126 for example) and pressing Preview to see the difference. The file size in pixels and in Bytes is displayed under the color preview. You can also try Error Diffusion Dithering along with a reduced number of colors which creates the impression of more colors. This can also reduce the size of the exported file while not affecting the image quality.

For an in-depth study of Bitmaps see WebXealot 30 and WebXealot 31.

H  1   2   3   4   5   6       NEXT PAGE >