The Xara Xone Workbook
The Workbook Page 4
H   1   2   3   4    5   6   Download Zipped Tutorial  
Getting Rid of the Dreaded White Fringe

Lisa (USEXPAT) posted this question recently in the Xara X Conference:

    I'm trying to put together a Website. The background color is purple. When I make little clipart designs in Xara and then export them, there are little pieces of white around them. How do I get rid of that?

Lisa's question is one that we hear frequently from new users. And what follows is the answer.

Preparing images for the web

The example above shows the dreaded white fringe that has Lisa baffled.

The explanation is Xara anti-aliases exported GIF, and 8-bit PNG bitmaps with transparent backgrounds to the page color, which as a rule is white.

Anti-aliasing is a process of blending an object's edges to the background color by creating an outline of in-between colored pixels. This process gets rid of what used to be known as the "jaggies" or the pixelated edges of objects. Against a white background, this outline is not apparent. But when placed over a dark background, the white fringe caused by the Anti-aliasing stands out like a hog on a sofa. Getting rid of this fringe is remarkably easy.


Preparing images for the web

The answer is to place your text over a rectangle filled with the same color, or a similar color, to the background over which it will be seen. Select the text (or any other object to be exported) but do not select the rectangle. Export with the Transparent Background option and the results will be just like those shown above.

When seen over a white background, the text now has a dark fringe, which shows the result of the Anti-aliasing. When seen over the dark colored background, the text looks clean and crisp.

And that's it in a nut shell. What follows are some more related tips and tricks for exporting objects to be viewed over a dark background.


Preparing images for the web

If you are going to be exporting a lot of text and images over the same dark background it is easier to change the page color. Hold down the Ctrl key and drag any color from the screen palette and drop it onto the page. Now when you export your transparent bitmaps you won't have to worry about accidentally selecting the colored rectangle.

To restore the page color to white, just drag the white color from the screen palette onto the page. (Or right click on the page and select Default Page Background).


Preparing images for the web

Sometimes you might want to export objects over the same background pattern that you are using on your Website. Import the background bitmap image into Xara. Open the Bitmap Gallery (F11), select the background bitmap, and press Background. The bitmap is applied to the entire page.


Preparing images for the web

One of the problems with Anti-aliased text is that is does not always look sharp and focused as you can see in the first example above. The next 2 examples are more opaque and read better. Why?

Not sure why, but the second set of text has been cloned one time. The last set of text was cloned twice. This increases the opacity of the text and makes it easier to read.


Preparing images for the web

And finally this. Anti-aliased text does not always look well at small point sizes. In the above example the top text is Anti-aliased while the text below is a bitmap font that has not been Anti-aliased. The bitmap font was designed to be read at 8pt. The Tahoma 8 font, by the way, was created by Rubem Pechansky and is available on the Xara Xone Shareware Page. You'll also find some bitmap fonts created by Sean Sedwards a little further down the page.

Set View Quality

To get the optimal results when using a bitmap font, set the View Quality to Normal, either by selecting this option from Window > Quality > Normal, or by moving the Set View Quality slider one click to the left. Now the bitmap text will export as solid colored pixels with no Anti-aliasing.

NOTE: There should only be 4 tick marks on the Set View Quality slider as their are only 4 options. This can be confusing.

So now there should be no reason for anybody to post questions about the dreaded white fringe. (Why do I think this will never happen?)



< LAST PAGE       H   1   2   3   4   5   6       NEXT PAGE >