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

Jump to content


Register a free account to unlock additional features at BleepingComputer.com
Welcome to BleepingComputer, a free community where people like yourself come together to discuss and learn how to use their computers. Using the site is easy and fun. As a guest, you can browse and view the various discussions in the forums, but can not create a new topic or reply to an existing one unless you are logged in. Other benefits of registering an account are subscribing to topics and forums, creating a blog, and having no ads shown anywhere on the site.

Click here to Register a free account now! or read our Welcome Guide to learn how to use this site.

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

Fixing jaggies on circles on a white background

#1 User is online   Grinler 

  • Bleep Bleep!
  • PipPipPipPipPipPip
  • Find Topics
  • Group: Admin
  • Posts: 36,174
  • Joined: 24-January 04
  • Gender:Male
  • Location:USA

Posted 08 March 2005 - 12:20 PM

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:

Posted Image


Posted Image


Posted Image


Posted Image


Posted Image


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.

#2 User is offline   chiefmasterjedi 

  • Member
  • PipPip
  • Find Topics
  • Group: Members
  • Posts: 124
  • Joined: 24-July 04
  • Location:NC

Posted 08 March 2005 - 08:48 PM

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.

#3 User is offline   chiefmasterjedi 

  • Member
  • PipPip
  • Find Topics
  • Group: Members
  • Posts: 124
  • Joined: 24-July 04
  • Location:NC

Posted 08 March 2005 - 09:22 PM

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
Posted Image

PNG
Posted Image


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


#4 User is online   Grinler 

  • Bleep Bleep!
  • PipPipPipPipPipPip
  • Find Topics
  • Group: Admin
  • Posts: 36,174
  • Joined: 24-January 04
  • Gender:Male
  • Location:USA

Posted 09 March 2005 - 01:19 AM

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?

#5 User is offline   chiefmasterjedi 

  • Member
  • PipPip
  • Find Topics
  • Group: Members
  • Posts: 124
  • Joined: 24-July 04
  • Location:NC

Posted 09 March 2005 - 05:24 AM

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

Chief.

#6 User is offline   joe_schlabotnik 

  • New Member
  • Pip
  • Find Topics
  • Group: Members
  • Posts: 11
  • Joined: 02-January 05
  • Location:san diego

Posted 22 March 2005 - 11:51 PM

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
Ya know, this stuff is fascinating, yet irritating

#7 User is offline   lucent 

  • Forum Regular
  • PipPipPip
  • Find Topics
  • Group: Members
  • Posts: 172
  • Joined: 06-January 05
  • Gender:Male

Posted 23 March 2005 - 12:06 AM

You should save it as any vector based file format, they save points rather than actual pixel locations.
Posted Image
Special thanks to efizzer for the signature

#8 User is online   Grinler 

  • Bleep Bleep!
  • PipPipPipPipPipPip
  • Find Topics
  • Group: Admin
  • Posts: 36,174
  • Joined: 24-January 04
  • Gender:Male
  • Location:USA

Posted 23 March 2005 - 11:03 AM

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

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 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

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users