Transparent GIF Export
Duncan W Kennedy
Ben Kingsley wrote:
>
> Hi,
>
> I am trying to export GIFs with the export wizard, and I find that with
> the eye dropper tool I can make them transparent, but this results in a
> silly looking border around my image file. Specifically, my image is
> actually text with OnLine written on it in green color, and when I do
> the above to export it as a transparent GIF, the text has kind of a
> white glow! Can someone please tell me what I might be doing wrong?
>
> Please email answers to winf...@iname.com.
>
> Thanks a bunch!
> Ben
Is your text anti-aliased? if so try to make your background colour as
near to the background of the web page. It is the anti-aliasing "near
white" which is not transparent and makes the "glow" - You might try
adding a few more of the paler colours to transparent to see if that
helps.
Good luck.
--
Duncan K
Downtown Dalgety Bay
Scotland
http://www.otterson.demon.co.uk/
Ben Kingsley
Phil Schmidt
Duncan W Kennedy wrote:
>Is your text anti-aliased? if so try to make your background colour as
>near to the background of the web page. It is the anti-aliasing "near
>white" which is not transparent and makes the "glow" - You might try
>adding a few more of the paler colours to transparent to see if that
>helps.
If your web page background is a colourful image it will be difficult
finding "the" background colour.
Tip: try not anti-aliasing your text. Since this can look quite horrible
with fonts like Times or Arial try a font with few curves, e.g. Chicago.
Phil
------------------
http://www.luton.ac.uk/~philipp/
Johannes
I got roughly the same problem.
More specific - I want to export a transparent picture into a GIF image, in which the alpha color has a certain color value (192 192 192).
In Photoshop I can do this:
Choose "GIF export" for the transparent picture.
Pick a color value for the GIF transparency color.
Save.
The alpha channel will get the desired color and blurred edges will fade out correctly. All other parts of the image will still be opaque.
In Fireworks, I can't find out how to specify the color value of the alpha channel. If I pick the alpha color in the export palette, and choose "replace color", it just adds another index color before the alpha. The color of the alpha channel remains undefined, and when I export the GIF, blurred edges get a white border. Apparently the alpha color is white. How can I change this? The problem with making an opaque background with a certain color and then pick an index color, seems to be that all areas with the same shade get transparent in the GIF. This is not what I want.
Thanks for any help.
/Johannes
Ben Kingsley skrev i meddelandet <359550C3...@iname.com>...
John Dowdell
If this is "How can I choose a color for GIF transparency in Fireworks?" then
opening the Export Preview and choosing the color with the Eyedropper there will
do the job.
(Note that you can add additional transparent colors through the "Plus
Eyedropper" right next to the regular Eyedropper. These chosen transparent
colors will have an "X" in their palette entry. You can remove such colors
through the "Minus Eyedropper". You wouldn't need to actually replace palette
values at all to achieve this.)
If this is instead "What can cause a white border in transparent GIF, and what
can I do about it?" then this frequent question is usually caused by having an
antialiased edge to the artwork against a white canvas.
If so, then you can go back to the art and change the outer stroke to "Hard
Edged" from the feather/antialias popup (unlike other tools, strokes in
Fireworks are always editable, all the time). You could also just change the
background color of the canvas (even after you've drawn upon it) so that it's
closer to the background color of the web page rather than white. This will
antialias to the HTML color and so will not be as visible as when you antialias
to white.
jd
--
John Dowdell, Macromedia Tech Support, San Francisco CA US
Private email options: http://www.macromedia.com/support/priority.html
Search technotes: http://www.macromedia.com/support/search/
Search DIRECT-L: http://www.mcli.dist.maricopa.edu/director/digest/
Newsgroup FAQ: http://www.macromedia.com/support/newsgroups.html
Cross-browser scripting: http://www.dhtmlzone.com/
Johannes
John Dowdell skrev i meddelandet <359D0C83...@macromeda.com>...
>
>If this is instead "What can cause a white border in transparent GIF, and what
>can I do about it?" then this frequent question is usually caused by having an
>antialiased edge to the artwork against a white canvas.
>
My canvas is transparent (checkered). The gif alpha color seems to be black. Why does the gif anti-alias to white?
>If so, then you can go back to the art and change the outer stroke to "Hard
>Edged" from the feather/antialias popup (unlike other tools, strokes in
>Fireworks are always editable, all the time).
I have choosen hard edges, but when I export the picture smaller than 100% it gets anti-aliased anyway.
If I instead transform the graphics and export 100%, they still got hard edges. An option for keeping hard edges in scaled exports would be nice.
>You could also just change the
>background color of the canvas (even after you've drawn upon it) so that it's
>closer to the background color of the web page rather than white. This will
>antialias to the HTML color and so will not be as visible as when you antialias
>to white.
I guess this a bit of a strange problem. I want to anti-alias to a neutral and defined grayscale value (the target background colors will vary) _but_ at the same time I dont want the gray paint and object fills of the same color to get transparent.
Example:
create a transparent document
draw an anti-aliased circle whith white fill
draw a smaller circle inside the first and fill with gray (rgb x, x, x)
Problem:
export this image to a gif, so that:
checkered area gets transparent
outer circle anti-aliases to gray (rgb x, x, x)
inner gray circle is not transparent
Do you see? I want the alpha index color in the gif to have a defined color value, which also may occur in other index colors used for objects and fills. That's why I wanted to change the alpha color value in the gif export settings.
/Johannes
John Dowdell
> (the target background colors will vary) _but_ at the same time
> I dont want the gray paint and object fills of the same color
> to get transparent.
That does sound like a difficult set of goals to simultaneously hold, true. If
the artwork antialiases to the background, or is resampled by resizing or such,
then the background color will be used when figuring out the blending values at
the edge of the artwork.
(I didn't see a question in the long quote'n'reply, so I hope that the above
corroboration is close to the mark of what you were seeking with the post.)
Johannes
>> I want to anti-alias to a neutral and defined grayscale value
>> (the target background colors will vary) _but_ at the same time
>> I dont want the gray paint and object fills of the same color
>> to get transparent.
>
>That does sound like a difficult set of goals to simultaneously hold, true. If
>the artwork antialiases to the background, or is resampled by resizing or such,
>then the background color will be used when figuring out the blending values at
>the edge of the artwork.
How do I set the background color? I notice a brush color and a fill color, but no background color.
It's not very difficult to accomplish this in Photoshop, because the GIF export filter lets you chose the transparency color value.. Otherwise, it works the same way as in Fireworks: transparent areas goes into alpha color and opaque colors get other index colors.
The strange thing with Fireworks is that transparency always seem to fade out to white, and I can't find any way to change that.
>(I didn't see a question in the long quote'n'reply, so I hope that the above
>corroboration is close to the mark of what you were seeking with the post.)
Actually, you didn't quote my original question in your first reply..
Thanks for the help anyhow.
/Johannes
John Dowdell
Color.
Johannes
>You can set the background color of a document by Modify > Document > Canvas
>Color.
>
>jd
Yes, I tried this, but the background is no longer opaque when you do this.
I guess I have to accept that it's not possible to do this in Fireworks yet, although it's very easy with the Photoshop GIF89 export filter.
Maybe this could be a feature for a future version of Fireworks: choose GIF alpha channel color value
As it is now, transparency in soft edges seems to become white by default. This is not always wanted.
/Johannes
John Dowdell
steps... when I put a red circle on a blue background and choose blue as the
dropout color in the Export Preview, I definitely see the red blended with blue,
not white.
You could always give a crisp edge to the artwork too, of course.
Hmm... with the use of the word "opaque" there, perhaps you're working under the
hypothesis that a canvas needs to be set to "transparent" in order to drop out
the background. Such is not the case, as can be seen in the information about
the Export Preview dialog's controls.
Johannes
>I'm not sure what we may have different on our two machines, or two sets of
>steps... when I put a red circle on a blue background and choose blue as the
>dropout color in the Export Preview, I definitely see the red blended with blue,
>not white.
>
Correct. But if you put a blue circle inside the red one, it will get transparent also. Right? How can I avoid this?
The problem is that I may want a dropout color which also exists in an object. I don't want holes in the object, because I don't know in advance the exact color of the page the image will be put on.
The obvious answer is to have no background color at all = transparency.
The new problem is that soft edges get a colored fringe in exported GIF:s, because GIF:s don't support semi-transparency. And the fringe is always white. How can I define this fringe color?
It's very easy in Photoshop, because you can choose the color of the GIF alpha channel at export time.
This is _not_ the same thing as picking a droput color.
>You could always give a crisp edge to the artwork too, of course.
>
Yes, that is a solution too, but then I can't resize exports. If I do so the edges will get soft and white-lined again.
>Hmm... with the use of the word "opaque" there, perhaps you're working under the
>hypothesis that a canvas needs to be set to "transparent" in order to drop out
>the background. Such is not the case, as can be seen in the information about
>the Export Preview dialog's controls.
>
No, I'm fully aware that you can pick colors to become transparent.
/Johannes
John Dowdell
> also exists in an object.
Hmm, that does sound difficult for GIF to achieve. Best I could see for that
would make the background-blending color close to the desired internal color,
but not exactly the color you don't wish to drop out.
Johannes
>> The problem is that I may want a dropout color which
>> also exists in an object.
>
>Hmm, that does sound difficult for GIF to achieve.
It's not difficult, because a GIF can have multiple colors with the same color value.
Moreover, if I draw a white object in an image with transparent background in Fireworks, and then export to GIF, I will achieve exactly this.
The problem is that Fireworks _always_ choose white for semi-transparency. Why white? Why not black or gray or lime-green?
A GIF contends a maximum of 256 separate colors, which are indentified by index numbers (1-255).
One of them is the alpha color - all pixels with this index value will be rendered transparent, regardless of their corresponding color value. The other index colors will be rendered with the corresponding RGB color value from the GIF's Color Lookup Table. Thus, you can have 2 identical blue colors, of which one is rendered transparent.
Actually, the color value of the alpha channel is not really important in this case, because if your rendering application support transparent GIF:s, you will not see it. It's the semi-transparent areas that are the problem.
If you try Photoshop's GIF export filter, you will understand how you can draw an image on transparent background and then choose a transparency color at export time. It's intuitive, because the transparency color only becomes relevant when you export to GIF:s.
>Best I could see for that
>would make the background-blending color close to the desired internal color,
>but not exactly the color you don't wish to drop out.
Yes, but that is a kludgy solution which gets complicated when you start using gradients or other multi-color effects. You should'nt have to think about this - the application should do the work for you.
I would like it to work like this:
Make a drawing on transparent background
choose Export to GIF
choose Transparency: Alpha channel
The transparency color is the one with a cross over - just doubleclick it and pick a color value.
Presto! - Your GIF will be exported with the choosen color blended into the semitransparent areas.
/Johannes
Dominique Müller
I just did my first project with Fireworks (great programm!) and faced the
problem described in this thread. Did you finally understood the problem
described in this thread and is this feature (choosing a color for replacing
alpha-channel) in a feature request list?
Otherwise it would be no problem for me to put some GIFs online to show you some
tasks which are impossible to do with fireworks but no problem using Ulead's
Smartsaver or the GIFexport Plugin of Photoshop (if you wish me to do so, you
could e-mail me your e-mail address so we don't need to overfill this thread for
nothing).
Because Fireworks does nearly all other tasks perfectly, I am very interested in
using it for all tasks - but this is a very important missing feature.
Greetings & have a nice day
Dominique
John Dowdell
scenarios further up in the thread. Any way you could ask what you'd like here?
I'm not sure how I should interpret "choosing a color for replacing alpha
channel", thanks.
(Just in case, have you worked with the eyedropper in the Export Preview dialog
yet? This is how people usually assign and modify dropout colors.)
Dominique Müller
Hi John,
English is not my native language, so it is a little difficult for me to express
what I mean. But I will do my very best. With "choosing a color for replacing alpha
channel" I mean that if you create an image with a transparent canvas color, you
should be able to choose a color during the export to which the image gets
antialiased (currently, as Johannes allready described, Fireworks antialiases all
images with a transparent canvas color to white). Ulead's Smartsaver together with
Adobe's Photoshop is a nice example how this could be done.
Of course I could choose another canvas-color before I export and use the
eyedropper tool then, but with this I faced the following problem: My webpage's
background consists of a green shaded pattern, the GIF I need to create is an
illustration, laid with 20% opacity on the same background pattern. So it's made of
the same green colors, just a little brighter than the background. Due to the color
palette, it is nearly impossible to select a green canvas color that is not
allready in the image. So always some parts of the image itself get transparent. If
I choose a blue or red canvas color for example, my Image gets a blue or red border
(because the image gets anitaliased to blue or red).
If I just could export the image on the transparent canvas color and Fireworks
would antialias it to green and then would fill all transparent areas with a unused
color index and set this one to transparent, everything would be perfect.
Hu, rather complicated, isn't it? By the way, this is only a small problem I have
with Firework and I can work around it with the eye-dropper tool with a little
trying. All in all Fireworks saved a lot of hours during my last project, and
everytime when my client asks me for some changes, it is nearly unbelievable how
Fireworks streamlines this process.
Greetings,
Dominique
Lee Lance
thing has me so frustrated. I have called and spoken with three different tech support
reps and no one has been able to solve this problem.
Dominique, I totally agree with you... every time I export a gif it is being
anti-aliased on the edges AND in the image itself.
John, for an easy to see example of this problem I created some images and sent them to
another Macromedia support specialist. I took a some text in PhotoShop and did a GIF89a
export, making the background transparent. If you look at this exported image at 800%
or so, you can see very clean edges, not anti-aliased to white or any other color. Ok,
then I opened this image in Fireworks and resized it to 50% in the export process. The
final image has a nasty dithering to white all around the edges AND the image is
horribly fuzzy. If you take the same image and resize it in PhotoShop or EVEN in
Microsoft Photo Editor (comes with Office 97) there is no image blurring or
anti-aliasing on the edges. The only help I have been able to get on this was
instructions to turn Brush to 'none' and turn Fill to 'hard edge'. This did not make
any difference at all.
--- I hope there is a way around this in Fireworks, other than this problem (although
it is a major problem -- I cant work without clean transparent gif images) it is the
best Web image program around.
Have not spent any time in a newsgroup before, so I was not sure if it would be ok to
attach those images. I can do that if anyone wants to look at them.
Johannes
To Macromedia: the solutions for these issues should be rather simple to implement. If something is unclear, please keep asking.
At this point, I see two somewhat connected issues appearing:
1. Rescaling in export gives you blurred edges. (Even vector lines set to "hard" get blurred.)
2. If you have blurred edges on transparency, exporting to GIF will always antialiase to white.
And these could be the corresponding solutions:
1. Include option: "keep hard edges" when rescaling the export
2. Click on the "alpha color" in the export color swatches - then pick a "background" color value, which the GIF transparency will be antialiased to. (Also please keep that color value between export sessions.)
Comments?
/Johannes
Lee Lance skrev i meddelandet <35D1BCCF...@irathomas.com>...
Mark Haynes
It looks like you have the gist of what to do in fireworks. In the Export Preview window, you can also select more than one color to index as a transparent color. See my post from yesterday entitled "Internal
Errors and Transparency Problems" for more details.
enthusiastically,
mark haynes
macromedia DAG tech support