Help, vector files pixilated

Question

I have a problem trying to upload a vector logo created in
illustrator and saved as gif file to preserve transparency. But it
turns out pixiliated not just on the web but also in illustrator.
With transparency it should work fine, and has before but the file
becomes pixilated -
http://www.jentespranget.no
(logo in centre)
Any ideas how to solve this please?
Cheers

Answer 1

"Stagtime" <[email protected]> wrote in
message
news:[email protected]...
>I have a problem trying to upload a vector logo created
in illustrator and
> saved as gif file to preserve transparency. But it turns
out pixiliated
> not
> just on the web but also in illustrator. With
transparency it should work
> fine,
> and has before but the file becomes pixilated -
>
>
http://www.jentespranget.no
(logo in centre)
>
> Any ideas how to solve this please?
well, you need to understand the difference between vector
and raster images
and how they deal with transparencies. Simply put, your
vector file is
really just a bunch of math - nodes define points that have
lines or bezier
curves between them. If they're closed objects, they can
contain a fill
color, but again, that's all still just math stuff that gets
translated to
the screen and gets retranslated when you zoom in/out. The
vector files are
non-lossy.
Raster files, which are any bitmaps, are mosaics, and
depending on the file
format, they're lossy. Each pixel must have a defined color.
If in your
working file (say a PSD, CPT, or Fireworks PNG) you have a
bunch of
objects/layers, the curves of said object are simulated by
varying the
transparency of individual pixels to show the color of the
layer
below/background. This is called anti-aliasing and is
necessary because when
you're dealing with something that is just a mosaic of square
tiles, there
can be no angles other than right angles (90 degrees).
Anything other than
90 degrees must be simulated.
The GIF format can do transparency two ways: by a single
specific color or
via a mask (and really the mask just basically then makes the
masked area
black and uses that single color for the transparency color).
Lets say in
your original file your background color is lime green and
your object is a
neon orange circle and you select the green as your
transparency color. That
*single* shade of green will be transparent, BUT since a GIF
must be
"flattened", i.e. no layers, the anti-aliasing of the "round"
angles of the
circle (which are of varying transparent levels) are showing
quite a few
more shades of green and that will give you that "halo" of
another color -
there's no escaping that, really.
Your options are to make the background color of the GIF file
the same color
as the background of your web page (and if you are changing
background
colors left and right, well, you would need to make GIF files
for each one
of those colors), or you could save the file off as a PNG
which has the
ability to handle an alpha mask and do true transparency.
However, you'll
have to do some browser conditional hacks for IE versions 6
and below to see
this transparency.