PNG image with no background: outline is not smooth and they are ugly

[properez]

Hello everyone,

Just like the title says. You guys know how a png image sometimes has a checkerboard background instead of a dull white square background?
Those png's are cool to import into Xara and have a smooth outline.

My question is....why is it when i EXPORT a png with the checkerboard background the outline looks like an 8 bit nintendo outline when placed on a website?
These type of pngs with the checkerboard background are meant to be viewed as having no background...which actually works for me but the outline looks horrible.

what do i need to do to fix that outline issue? Is there some sort of setting that i have to tweak?



Please help.

[steve.ledger]

Post your file, we can't tell what you are seeing without it.

[gwpriester]

First of all I need to move this thread to the website forum.

I assume that you are exporting the PNG as an 8-bit, 256 color image and at the default 96dpi. And if so, I assume when you view the image over a colored background you are seeing a fringe like outline.

When you create an 8-bit PNG image with transparent background, Xara anti-aliases (blends) the edges to the page color, normally white. This blending works perfectly if your web page is white.

If not, then change the Xara page color to a color that is the same or very similar to your website background. Then export your PNG and it will look excellent on your website.

Alternately, place a larger rectangle under your image, but only select the object, text, etc. you want to export, not the rectangle, and export.

This may help http://www.xaraxone.com/webxealot/workbook20/page_5.htm

[steve.ledger]

Gary, I believe the OP is referring to PNG files which have been exported (saved) with transparent background from a paint program which he is importing into Web Designer or Designer Pro. Xara software does not have a checkboard background to define transparency.

The fault would lie in the method the OP has exported from this other paint program.

[gwpriester]

Point taken.

properez, please be more specific. What program are you using to create these images.

[properez]

GWPRIESTER,
you are right. that's what I was talking about. I see a crazy fuzzy whiteness around my image. Ill Detail: If I made an image ( Not rectangle or square ) and then I see a white fuzzyness around the image regardless of the wierd shape it's in.

In this case your fix of putting a rectangle behind the image with a similar color is fine. But what if I have an image that has multiple colors. will it still work. and what about circles?

Thanks for answering guys.

[gwpriester]

Apply the same fill to the rectangle as the background, and if this does not work then find a color that is about the same value (light and dark) as your background image.

If the object is not too large, export as PNG, True Color + Alpha. This creates a larger file size (8-bits vs 32-bits). The edges with be super clean.

[steve.ledger]

..

Post your file, we can't tell what you are seeing without it.

[PhilM]

Designer smooths bitmaps by default so if the imported bitmap is low-resolution, and/or you're viewing it at a high zoom factor and the producing program had anti-aliased small amounts of white at the junctions between the opaque and transparent pixels then you might see white fuzzyness around the "outside".

Workarounds: Make the bitmap resolution the same or greater then the screen pixel size (including on zoom factor). Turn off smoothing (Options | View | Never Smooth).

But to answer this properly, as Steve says, we need to see an example bitmap and know how it was created.

Phil