Transparent GIFs and PNGs

[pduggan]

It might seem like a daft question, but is it always assumed that white is the background colour when you export GIFs and PNGs with a transparent background?

I'd like to be able to make my backgrounds transparent without losing the white from my graphics, but haven't found a way to do it...

Or have I just missed something? [img]/infopop/emoticons/icon_confused.gif[/img]

Thanks
Peter

[pduggan]

It might seem like a daft question, but is it always assumed that white is the background colour when you export GIFs and PNGs with a transparent background?

I'd like to be able to make my backgrounds transparent without losing the white from my graphics, but haven't found a way to do it...

Or have I just missed something? [img]/infopop/emoticons/icon_confused.gif[/img]

Thanks
Peter

[gwpriester]

Peter,

Xara anti-aliases (smoothes) your graphics with transparent backgrounds using your page color.

To export a GIF with a transparent background, do not put any solid colored rectangle under your images. You can use a rectangle with no color and no outline to determine the size of the image.

When you export your GIF click on the Wineglass icon in the export dialog.

If your image is to appear over a colored background, change the page color by holding down the Ctrl key while dragging the appropriate color from the screen palette onto the page.

This help?

Gary

Gary Priester

Moderator Person

Be It Every So Humble...

[pduggan]

Hmmm...

I'm either even dafter than I thought or I haven't explained myself very well!

I'm not using any solid coloured rectangles, but I want to produce one GIF or PNG that I can use over various page backgrounds.

Here's a simple example (an Impala sail insignia and, yes, I like my boat!) - the original drawing has a thick red line and black '1' over a solid white circle (real white, not just background!). When I see it in the export dialogue box, I see it exactly as I want (with the white contained within the circle), but when I export it, the white has gone...

So what's the significance of the anti-aliasing? Do I have to specify a page colour? [img]/infopop/emoticons/icon_confused.gif[/img]

Attachments:
1. Transparent (no white!)
2. Non-transparent (white where I don't want it!)
3. XaraX file

2.00am again, and I should be in my bed, but when can I make the time during the day?

Peter

PS Duh! Never mind the other attachments - it must have been the browser (W3C Amaya)! I was testing the GIFs with it purely because my other browsers are all set up with white backgrounds by default, but I can see from my posting that all is well!! [img]/infopop/emoticons/icon_biggrin.gif[/img]

PPS Even more duh! I posted a PNG by mistake, but I've replaced it with a GIF and hope nobody spotted it before I did (must be the time of night...)! [img]/infopop/emoticons/icon_eek.gif[/img] [img]/infopop/emoticons/icon_redface.gif[/img]

PPPS Thanks anyway, Gary! [img]/infopop/emoticons/icon_wink.gif[/img]

[This message was edited by Peter Duggan on February 22, 2001 at 06:12 PM.]

[This message was edited by Peter Duggan on February 22, 2001 at 06:25 PM.]

[This message was edited by Peter Duggan on February 22, 2001 at 06:26 PM.]

[pduggan]

Or perhaps it wasn't quite such a stupid question after all:

I'd hoped to able to do this without having to include what would effectively be duplicate images on my site, but...

Attached boat (with white anti-aliasing, now I see what Gary's talking about) looks fine over very pale gray but dire over navy blue, yet it's one of several images I'd like to use as minimal 'buttons' (no rectangular button shapes, no bevels, nothing...) over more than one background colour (like very pale gray and navy blue for a start).

Any suggestions (short of uploading a separate image for each background colour)?

Peter

[This message was edited by Peter Duggan on February 22, 2001 at 07:20 PM.]

[pduggan]

I have a nice CSS controlled black background (I'm not into black backgrounds, but I need an example), and someone else has a non-CSS browser (or has disabled/overruled author CSS) set up for the same shade of gray as the background for this posting...

Now I've made up a nice transparent GIF which is anti-aliased using a black page colour (right, Gary?). It looks fine on my browser (set up to prefer author CSS), but what does that user see?

Ugh! [img]/infopop/emoticons/icon_eek.gif[/img]

So does it happen in the real world?

[Mark (theKeeper)]

As to "how to control edge colour on transparent gifs"... re-read Gary's reply Peter. He explains how to do this.

Simply put, you must change the Background colour of your Xara document canvas, to match the colour you'll use on your Website. Then, export your images.

To change the Xara canvas BG colour, refer to Gary's post above. [img]/infopop/emoticons/icon_wink.gif[/img]

Mark...

[Erik Heyninck]

If you as a web-designer choose for a certain background image and/or colour, you do so out of aesthetic reasons. And then it is best to follow Gary's thread and, before you apply transparancy, you make the colour surrounding your to-be-gif as close as possible to the colour of your chosen background or to the main colour of your background images, this to avoid white or different colour lines around your gif.

But, if on the other hand, someone does not appreciate your or anyone elses aesthetic work and puts off CSS or even backgrounds (why view images?) then you have to forget about them. You can specify for each page (I do) which Background colour and Image you want, and most people will see something that approaches your view. Although... some indeed have set some real ugly preferences. But that is their problem, not yours.

This is my opinion, for what it's worth...

[pduggan]

'Simply put, you must change the Background colour of your Xara document canvas, to match the colour you'll use on your Website. Then, export your images.'

Thanks, Mark, but I understand that now! The whole point of my last posting was that it's possible for users to change a background colour under some circumstances (eg if it's controlled by CSS). Fortunately I stopped trying to control my backgrounds with CSS after a certain browser (begins with 'N' and ends with '4.7') couldn't decide whether or not to call up my background images from their directory (and this for validated code and CSS and correct file paths that worked in every other browser).

So now, although most of my presentation is still controlled by a linked style sheet, my background images are not, and I guess it's safe enough to anti-alias the images to my choice of background colour (as suggested by yourself and Gary). But my point about CSS and the possibility of users seeing something like the image attached to my previous posting still stands!

Peter

PS Hi Erik! Your reply must have been posted while I was composing mine. I'm not frowning at you! [img]/infopop/emoticons/icon_wink.gif[/img]

[This message was edited by Peter Duggan on February 24, 2001 at 02:55 AM.]

[Sean Sedwards]

Peter

As I understand it, you're trying to export your symbols as GIFs or PNGs and want to get rid of the white (or other colour) anti-alias fringe so you can place them on any background. You try and make the fringe colour transparent but parts of your drawing disappear.

This technique might work except that the fringe is not white nor is it any single colour - zoom in and have a look. The best way is to set the page background to the same colour as the outline of your symbol, i.e. red, so X anti-aliases red against red and comes up with...er...red ;-). The internal parts of your symbols will be fully anti-aliased and the outline will work on any background.

The situation becomes more tricky when the symbol has more than one outline colour and you still want the internal detail to be anti-aliased, but we'll cross that bridge when we come to it.

Regards - Sean