How do you get opacity to work when saving as png?

[bsellon]

I've been trying to create graphics with visio that will appear with
transparency using the PNG file format (via SaveAs) but the resulting images
to not properly handle the opacity of the dithered edges of the drawing. With
gif files you have to specify the background color to avoid this but png
files are supposed to provide opacity so they will work properly against any
background (no halo).

I've tried every option I can find including setting the transparency of the
image/object frame and selecting the transparency color during the save but
nothing seems to work.

It would be real shame if opacity was not supported since visio produces
such beautiful graphics and png is becoming a standard for web and other apps
that use transparency (iPhone, etc..) .

 

[WapperDude]

It sounds like the shape you're trying to "png" uses a gradient fill pattern.
For example, a blue center that transitions to white, and you wish the white
to be transparent. PNG doesn't seem to support transparency in gradient
fills, only solid colors. So, the white remains solid.

Wapperdude

 

[bsellon]

Actually, it's not a gradient fill I'm using. Simple solids but when the
edges get rendered to PNG they are dithered but using the background color
instead of opacity which PNG supports.

The logo image I've been working with appears at the top of this page:
http://www.stecrecords.com

You'll notice that the image is placed on a background that has a gradient
fill which is why fixed colors on the dithered edges doesn't work.
Transparency worked but not the opacity on the dithered edges so I had to
open the file in an image editor and remove the dithered edges. This was time
consuming and resulted in an image that did not have smooth dithered edges.

 

[WapperDude]

OK. So the problem is the png process creates this dithered edge around the
1/4 inch connector logo shape. I'm not sure it's possible to avoid that.
You can try a couple of things: 1) change the color depth, your image is
black and white, and / or 2) increase the resolution pixels/inch. That won't
eliminate the border, but it might make the pixel size so small, it won't be
seen. Other than that, I think you have to explore other options such as
perhaps saving as emf file and then finding a program to translate it to png,
or create the entire top banner as a drawing so it is "correct by design".

Not the answers you were looking for.

BTW, interesting website, I'll have to check it more.

Wapperdude

 

[bsellon]

Thanks for the suggestions. The increase resolution trick might work since a
faint outline can help an object stand out on a page. The resolution of the
original is pretty big so it's something I can try pretty easily.

I've got a bunch of graphics I'm going to be creating for the site and other
applications in the next few months so doing a lot of extra post processing
is not going to fly. I think I can avoid the problem entirely however, by
using a simple white background whenever possible (I do this most of the time
anyway).

I do hope the Visio team at Microsoft does eventually solve the problem as
it would allow Visio-generated-graphics to be used on more stylized web pages
(non-linear textured backgrounds seem to be very popular these days).

Thanks again for your help. - Bob

 

[WapperDude]

The png thing has been an irritating problem. It's like a tease. Look what
you can do, but, oh, there is this little artifact.

Hopefully, Visio development team, will, indeed, address this issue! It is
such a potentially useful tool!

Wapperdude