Creating smooth edges on a transparent PNG

Forum|Forum|16 years ago
April 6, 2009
2 replies
44743 views

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!

This topic has been closed for replies.

Correct answer SeanyOB

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.

S

SeanyOBCorrect answer

Participant

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.

B

boozapianAuthor

Participant

Thanks! That worked perfectly.

G

Gyno-jiz

Inspiring

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

B

boozapianAuthor

Participant

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.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded