|
On
the Fringe
Fringe occurs when an object that was saved on one background color is
utilized in another document that uses a different background color. The
anti-aliasing that makes the outline of the rounded capsule appear smooth
is composed of the various shades of the outline itself and the background
that it is initially created on. It looks fine in the original document,
however, if you try to utilize it in a different document, even if you've
gone to the trouble of cropping the button as precisely as possible, you
will find a definite ring of discernible pixels that are shades of the
original background color. This can be avoided if you use a program like
Adobe Illustrator to create an original work document and export multiple
versions of the button on the various background colors that your site
employs. This option, as you can imagine, is both time-consuming and inefficient.
What if you need 9 different versions of the same button? Utilizing transparency
in a GIF doesn't circumvent the problem either because there is no variable
level of transparency which will accommodate anti-aliasing (see examples
below). The border around the graphic will appear both jagged and chunky
because the pixels are either transparent or not transparent. Hardly an
alternative.
This is the
problem that web designers face everyday when they use GIFs to export
button images. Their website's image folders are filled with multiple
versions of objects which appear throughout their website. If the object
appears on two different backgrounds than there need to be two different
versions of the graphic.
This whole
problem of fringe and having to save multiple graphics could be completely
avoided if 24-bit PNGs could be used. If the anti-aliasing around the
outer edge of a graphic can be established through the use of transparency
and not based on the background color upon which it was created then it
follows that the graphic could be used on any background without compromising
its quality. This process can be used for all kinds of graphics and isn't
just for simple buttons. You could add a drop shadow to a graphic and
have it sit perfectly on any background you choose.
|