Creating smooth edges on a transparent PNG

[boozapian]

I need an image on my website with a transparent background. I first tried creating this as a gif, but it looked horrible over my website background image. Then I tried saving it as a png, which looked much better, but it has jagged edges. What is the right way to create a transparent image in PS so that it will have smooth borders? It is basically a circle, about 60 px wide, with a solid color in the center and a border of about 2 px. Nothing fancy.

It looks perfect in PS but once I embed it on my page over the background image, it looks a mess.

Thank you!

[Gyno-jiz]

You just need to make sure your circle is placed over a transparent background. Checkerboard gray, not white. Then save as PNG with transparency.

[boozapian]

J Maloney wrote:

You just need to make sure your circle is placed over a transparent background. Checkerboard gray, not white. Then save as PNG with transparency.

Thanks, but that was already done. It's already displaying the background is transparent and not white. I have it over an image, and what I need is for the bordered edges of the circle to have a clean, crisp border instead of jagged edges.

[SeanyOB · Accepted solution]

Instead of doing a Save As, save for web devices. File -> Save for Web & Devices. Then save as 24-bit PNG, not an 8-bit.

[boozapian]

Thanks! That worked perfectly.