BleepingComputer.com: Fixing jaggies on circles on a white background

CMJ or anyone else who can help. I am trying to make some images. Circles with a symbol or letter inside. They look great in photoshop, yet when i put them up on the site, against a white background (they are transparent gifs), certain buttons get jaggy.

Can someone explain what i should do to remove it?

Examples are below:
















As you can see all of them but the green have these jaggies around the perimeter of the circle. I cant see how this happened. I even went so far as to use the check image as a template for the no.gif and still the same.

The problem is not with the images themself, it's the way in which you save them.
Transparent gifs are a pain in the *ss when it comes to saving them, especailly when they're small and symetrical. What i would try if i was you, and this depends on your graphics app, try increasing the quality (256 colors) and give them a matte color, i've had a look at your images in photoshop and noticed the matte color (which is the color used to blend the image into the transparent area) on your images is plain white. Instead match the color with that of your image.

Or you could take the easy way out................ put a 1 pixel black stroke on the outside of the images then choose a black matte, this should give your image a clean, crisp look.

Hope this helps,
Chief.

P.S. if you used Photoshop to produce these pics then send me the .psd's, if you have them, and i will sort them out for you.

Hi again,
I've come up with a better idea...............forget .gif's, try .png.

The first image below is a .gif, the second is a .png. I'm sure you'll notice the difference.

GIF


PNG



Save as png-24 with transparency and you should have no prblems with rough edges.

Chief.

P.S. For best results, start your image at 256x256 pixels, make your whole graphic then resize it to 64x64 before saving as .png. Of course this depends on how good your graphics app is as not all of them will downsize without a loss of quality.

This post has been edited by chiefmasterjedi: 08 March 2005 - 09:26 PM

Thanks CMJ! I was able to get it a bit better by using paths rather then the selection tool. Will try your suggestions. Did you make those with the selection tool or using paths?

I used the "Elliptical Marquee" tool (shortcut M) and as i said above i started out with 256x256 to get it smoother.

Chief.

Can you all explain to me how you post images in your message reply? Or are these "hot links"?

I see that in a lot of technical forums. Some bodycaptures say a toolbar and is able to place it in the message..

thanks

You should save it as any vector based file format, they save points rather than actual pixel locations.

joe_schlabotnik, on Mar 22 2005, 11:51 PM, said:

You can use this tutorial.

How to take and share a screen shot in Windows and use the [img] tag to put it in the post