Hello bluenike,
Thank you for your question. I have to assume that you are saying that
saved gif files have a white background around the image and you are
placing the object on a colored background. This, of course, would not
be noticeable on a white background, but is unacceptable on a colored
background. In fact, your choice of gif file is exactly right for this
purpose, as you will see, as you can select the transparent color in
the image when you save as a gif file.
You are not the only one with this problem. This thread on forum4designers notes:
"...I reduced the size of some flag images. They were .ai and .wmf
files. For some reason, some of the smaller resized images have white
borders along parts of them. Does anyone know why this is and how I
can prevent it?...
...You can see the partial white border on the flags along the bottom
of the page... They were exported from Illustrator as .gif images and
then imported into a Fireworks.png image which was then exported as a
.jpg..."
http://www.forum4designers.com/archive5-2005-1-172672.html
Here's a bit more of the thread:
"...Would the file type have an effect on the white borders?
>
Yes. The white border you're seeing is due to the matte...
...If they weren't transparent then of course they would have a colour
around them. Gif transparency only has two values - on or off.
The matte specifies the background colour used to fill anti-aliased
edges that lie adjacent to transparent areas of the image. With
Transparency selected, the matte is applied to edge areas to help
blend the edges with a Web background of the same colour. With
Transparency deselected, the matte is applied to transparent areas...
...You can get rid of any white border by drawing a box (m) around the
object where you want it cropped. While the box is still selected, go
to object - crop area -make. Now go to file - save for web and select
.gif. Everything outside the box is cropped off. This should be
another option for you in AI..."
So, you have a few options. If you are saving to gif files and not
selecting the transparency color, this should make you good to go by
selecting white when you save the file as the transparency color. I
personally only use gif when I DO require a transparency. You can also
try adding a crop as noted above.
This site also has a good, albeit short thread on gif files and making
them of the best quality at this page:
http://www.forum4designers.com/archive5-2005-4-209139.html
You will likely find it of interest.
Toonaday talks about this and competing file formats for placing
images on colored backgrounds:
http://www.toonaday.com/faq.htm
"... In the PowerPoint slide on the left, notice that the EPS graphic
looks terrible. Not only is it jaggy but it has an ugly white box
around it making it unsuitable for placing on colored backgrounds. A
tif file will look smoother but will have the same white box around
it. The gif file is better in that there is no white box around it but
you have the same problem as with trying to place a gif on a colored
web page; that white fringe around the image. That can be overcome in
an image editing application but it means more prep work. The WMF
image by contrast, looks great on any background and can be sized up
or down with no degradation..."
A little more on transparent backgrounds in gif files at webexpertz:
http://www.webxpertz.net/forums/archive/index.php/t-28298.html
"...All you need to do is remove the color you want to be transparent,
then save it for the web as a GIF with transparency using Photoshop. A
quick way to select everything is to use the magic wand tool to select
something that is the color you want, then in your menu choose Select
--> Similar and then clear the area by pressing the backspace/delete
key. Remember that you want to preserve the background layer, so make
a duplicate and work with that instead if the background is the only
layer you have. When you export, use GIF as the file format, and make
sure that you check the transparency box..."
Also, read this pdf on gifs and web creation. Likely it has more than
you desire to read, but a section on gifs and background transparency
colors is very interesting. Its a pdf, so you will need Adobe Acrobat
Reader (free at Adobe if you do not already have it). I has a few good
visual examples as well.
"...Because the lettering will be transparent on the Web page, it is
important that the background color of the mask is the same as that of
the blurred pattern. If the mask color is white, the lettering will
always have a disturbing white border. If the mask color is beige, the
border will have a beige tint, but you won't notice this because of
the beige
color of the background pattern.
By saving the lettering as a 3-bit GIF file, the resulting file size
will be very small. This illustration with eight different colors only
takes up 2 KB. This means that it will be downloaded very quickly,
even over a slow or bad Internet connection. The viewer will
appreciate your having done so!
Using the clipboard, the original PostScript lettering can be
copied and pasted directly in Photoshop.
Make sure that the PostScript lettering is converted into
Letter Contours, otherwise the letters will be distorted.
If the lettering is made transparent using the color white, a
disturbing white border will appear around the letters.
It is better to match the color that is used as the mask tint with the
background color of the Web page. This allows you to
create a seamless transition between the foreground information and
the background pattern..."
http://www.kentie.com/images/eyesitee.pdf
So, there is a bit of background. In Illustrator, create your image,
then save as a gif. In the version of Illustrator I have, its under
file / export. When gif89A is selected I can check the transparency
box and it works as I believe you are expecting. Photoshop does this
almost identically. If your image is using the matte behind it to
smoothpixels, select the same color as your target background for the
matte behind your image before you save and choose transparent color.
Give this a try and see if you get the results you desire. You can
also try the cropping suggestion mentioned above.Do let me know if any
of this is at all confusing.
Search Strategy:
adobe +illustrator +gif +white line OR border +problem OR remove
I trust my research has provided you with solutions for removing or
avoiding white behind your saved gif images. If a link above should
fail to work or anything require further explanation or research,
please do post a Request for Clarification prior to rating the answer
and closing the question and I will be pleased to assist further.
Regards,
-=clouseau=- |
