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.

Photo

Fixing jaggies on circles on a white background


  • Please log in to reply
7 replies to this topic

#1 Grinler

Grinler

    Lawrence Abrams


  • Admin
  • 43,718 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:USA
  • Local time:08:57 AM

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.

BC AdBot (Login to Remove)

 


#2 chiefmasterjedi

chiefmasterjedi

  • Members
  • 124 posts
  • OFFLINE
  •  
  • Location:NC
  • Local time:09:57 AM

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 chiefmasterjedi

chiefmasterjedi

  • Members
  • 124 posts
  • OFFLINE
  •  
  • Location:NC
  • Local time:09:57 AM

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.

Edited by chiefmasterjedi, 08 March 2005 - 09:26 PM.


#4 Grinler

Grinler

    Lawrence Abrams

  • Topic Starter

  • Admin
  • 43,718 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:USA
  • Local time:08:57 AM

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 chiefmasterjedi

chiefmasterjedi

  • Members
  • 124 posts
  • OFFLINE
  •  
  • Location:NC
  • Local time:09:57 AM

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 joe_schlabotnik

joe_schlabotnik

  • Members
  • 13 posts
  • OFFLINE
  •  
  • Location:san diego
  • Local time:08:57 AM

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 lucent

lucent

  • Members
  • 172 posts
  • OFFLINE
  •  
  • Gender:Male
  • Local time:09:57 AM

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 Grinler

Grinler

    Lawrence Abrams

  • Topic Starter

  • Admin
  • 43,718 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:USA
  • Local time:08:57 AM

Posted 23 March 2005 - 11:03 AM

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




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users