Hi all,
Im not sure if its something Im doing wrong in either Fireworks/PS or AI in CS5 but every PNG image I create and place ontop of either a standard background colour ( so #000 for example ) OR over the top of a background image, the PNG images edges are not sharp and contain white pixels on most of the edges - see example attachment for exactley what I mean…
Is there a way of getting around this or possibly doing some drastic editing options to the image before I save it ?
Look forward to hearing from anybody
If saving as png-8 with transparency, you’ll see a Matte option in the Save for Web and devices box (at least in Ps). Set that color to the color of the background. Otherwise you get a little white outline around the graphic. (Same with transparent gifs.) What this option does is change that little white outline to a little outline of the color of your background, so that you can’t see it.
Hey Ralph,
Blimey your quick on the ball today 2 posts replied to in 2 minutes! 
Would you know the similar option in fireworks as that is where the star image is created ? (Ive just had a look at the option your on about in PS, so will bear this in mind for furture images created in that application )
In regards to setting the colour to the background colour - Just to clarify that is the background colour where the PNG image is to be placed ontop of, if so if Im using a gradient background image, I think this could be quite tricky to acheive a consistent result over a repeated image or sprite - Any thoughts on this ?
Thanks once again really appreciate your help
I don’t know Fireworks at all, but just from a quick check, there is the option to set a matte color both when you are working on the document and when you are saving for the web. It’s a little box that shows a color palette when you click it.
In regards to setting the colour to the background colour - Just to clarify that is the background colour where the PNG image is to be placed ontop of, if so if Im using a gradient background image, I think this could be quite tricky to acheive a consistent result over a repeated image or sprite - Any thoughts on this ?
It doesn’t really matter, as this is just a tiny, one pixel line around the object. Pick a color close to the background—one that will mix well with multiple colors if the gradient is really extreme, and it shouldn’t be noticeable. The main thing is to get rid of the white outline, which usually is very noticeable—unless, of course, the background is white.
Often is you study transparent images on the web (download them and take them away from their background) you’ll see this weird, 1 pixel color around the edge, which the creator has put there with the matte setting to help it blend with the background.
I’ve read about why this line appears around the outside, but can’t remember the explanation now! I’m sure someone else will know. 