Jagged edges on oval graphics?

How do I smooth them out?

[superfly]

I'm trying to make oval rollovers in photoshop, imageready, or livemotion on Mac computer. Then I try to bring the image into Go live, via drop rollover square on over state and it becomes horribly jagged upon preveiw. I can get it good before export. No matter how well I match the background, stroke, blur, smudge it keeps going back. Anti aliasing checked. It looks sweet when straight lines are used (rectangle). Is this an export problem? Going on 30 hours of straight frustration. Please help.

[Mark_A]

Hi superfly I dont use ps but I expect it is to do with anti aliasing which is about avoiding jagged edjes on angular lines in text and images or graphics.

If you can create the exact image you want in PS then the issue is just how you select that image and save it as a seperate element for your website.

BTW if you choose gif you can select a transparent colour which could aid your blending it into a background.

Hth

[choster]

Check your color depth. Are you trying to squeeze too much complexity into an 8-color or 16-color gif? Bump up the number of colors or, depending on the type of image, trying using PNG or JPEG.

[superfly]

I have tried everything even up to 256 colors, gif, png, no jpg, because I want transparency. I think maybe it is a software problem with ps7. I don't have much money, but if you know something that works well with mac os 9.1. I'd be happy.

[Longhaired Genius]

Hmm... this really shouldn't be a problem. I use Paint Shop Pro so I can't give you step by step instructions but here's my checklist.

• Create the image exactly the same size as you want the button to be.
  
• Antialiasing on.
  
• Your image background should be approximately the same colour as the page background even 'tho it will eventually be transparent. This eliminates fringing.
  
• When you have saved your final image as a gif or png preview it in a simple html file made by hand in an editor. This will tell you if the problem is with Go Live.
  

Hope that helps

[superfly]

Maybe the problem is that my background goes from almost a black dark green to really light green within the area for which the graffic is displayed. It looks alright, but not perfect.

[tbear]

Hi superfly,
In those circumstances I'd try to create the button using a transparent canvas to begin with.

[Longhaired Genius]

Yes, If you can get a completely transparent canvas that would probably do the trick. If not use a neutral mid-grey as background and make that colour transparent at the end of the process.

[mivox]

Problem with the transparent canvas is that the GIF89 file format does not support alpha transparency... so you'd end up with a button that looked like it was created on a white canvas. Not good.

If you're willing to risk older browsers seeing some strange, ugly edges on your buttons, using PNG format would allow the transparent canvas idea to have the desired effect. Check out this page [libpng.org] for browser support test images and screenshots from various browsers...

[Alex_Gilman]

Why can't you just take a screen cap of your BG and then use it as a layer in Photoshop while creating your roll over images on top of that spot ...then save it as a JPEG?

[anon1]

Have you tried adjusting the matte setting?

How to get rid of the "halo" and "jaggies" in PS6 w/ transparent gifs:

1. Make sure you have your image on its own layer with no background.

2. File>Save for web

3. Make your setting gif and use the smallest amount of colors you can without affecting the appearance of the image.
a. Make sure Transparency is selected.

b. Set the Matte color to the closest match of the background color you will be placing the image on. If you are unsure then set the Matte to "None". Click ok and save your image.

3. Matte puts a thin outline around the image to get rid of halos. Setting matte to none should get rid of the halo but might still leave the image a bit jaggy around the edges.

4. If your image will be on a dark background use either a black matte or a matte that is near the color of the background to get rid of the jaggies.

Hope that works for you.

[superfly]

I just found the easiest way to make it work perfectly. Instead of messing with PS. I just put a 3D border around it in livemotion and export as png. It came out beautiful. For some reason the PS still showed imperfections. Thanks for the help I would still be trying to make it work in gif format.

[Craig_F]

I didn't see it metioned so -- I always start with the maximum number of colors, which in my program is 16m. Then make the image you want. Once you have the image looking good reduce the colors as far as possible. I can usually get down to 256 colors with no jaggies easily this way, it's going beyond that that it gets tricky.

[Jon_King]

Anon1 is right. This is an age old topic discussed at length in Adobe's forum. Use matting and read about it in Photoshop help.

[kingkelly]

Thats what i was thinking- using a PNG. They have some nice transparency, so problems with jaggedness should be a problemo.

[ijan]

Yes, choosing a matte color similar to your page's background color in Save For Web will definitely solve the problem. Also, forget about transparent PNGs because Internet Explorer (even 6.0) does not support it, and as you probably know over 90% of all web users use IE. I hope Microsoft will finally support transparent PNGs in the next release.

[jen24815]

Another very easy fix: just make your image background color the same color as the page bg color, then specify that color as transparent. No jaggies at all.

In Illustrator, I just slide a rectangle of color in behind the image, then copy & paste to PSP & save.

Even if you use a "transparent" background, on some drawing & editing programs it will still pick up white jaggies.

As someone said, though, always work in high color, then reduce to 256 or less after you have the image looking like you want it.

[tedster]

The challenge is dealing with all those subtle transition colors.

When you're drawing the image, they may be the "same" color - but each pixel has a different percentage transparency, depending on the curve. Once the layers are merged, each of those partially transparent pixels of what was one color now become an array of subtly different colors, depending on the original degree of transparency.

The game is retaining all those edge pixels which are subtly different colors - and not shifting their colors too far in the indexing process.

I like to use Select > Color Range with the slider set to 0. I make sure the image is a true layer (not a background) Once I've made the selection with Color Range, a click on the Delete button makes all the selected pixels transparent.

Then I can go to ImageReady and play with the compression options, knowing my transparency is all set. The image looks ugly unless it's against the right color background, but when it is in its right place, it looks great.

[KevinC]

The answer is to use photoshop but you need to use channels and levels and a littl gaussian blur. I will try and post the url to a tutorial here: [phong.com...]

but if it gets edited sticky me.

[tedster]

That is a sweet little trick. Thanks for the link, Kevin.

It's the Image > Adjust > Levels step that really puts the icing on the cake for me.

[KevinC]

Ya I am primarly a graphic designer and I use that all the time. You can make almost any shape and use that trick.

[mivox]

Woo... very slick. :) (Now if I can just remember it without re-reading it everytime... since I finished building my employers site, I've been mostly stuck in site maintenance and print-design land.)