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

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.

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

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

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.

Point taken.

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

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.

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.

..

Quote:

---

Originally Posted by sledger

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

---

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