Welcome to WebmasterWorld Guest from 23.22.220.37

Forum Moderators: not2easy

Message Too Old, No Replies

Jagged edges on oval graphics?

How do I smooth them out?

     
6:34 am on Dec 5, 2002 (gmt 0)

New User

10+ Year Member

joined:Dec 5, 2002
posts:7
votes: 0


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.
7:28 am on Dec 5, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Nov 15, 2001
posts:1436
votes: 0


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

8:19 am on Dec 5, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Dec 17, 2001
posts:1262
votes: 0


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.
9:26 am on Dec 5, 2002 (gmt 0)

New User

10+ Year Member

joined:Dec 5, 2002
posts:7
votes: 0


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.
12:36 pm on Dec 5, 2002 (gmt 0)

Preferred Member

10+ Year Member

joined:Aug 28, 2002
posts:564
votes: 0


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

5:53 pm on Dec 5, 2002 (gmt 0)

New User

10+ Year Member

joined:Dec 5, 2002
posts:7
votes: 0


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.
6:13 pm on Dec 5, 2002 (gmt 0)

Senior Member from GB 

WebmasterWorld Senior Member 10+ Year Member

joined:Feb 10, 2002
posts:927
votes: 0


Hi superfly,
In those circumstances I'd try to create the button using a transparent canvas to begin with.
6:44 pm on Dec 5, 2002 (gmt 0)

Preferred Member

10+ Year Member

joined:Aug 28, 2002
posts:564
votes: 0


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.
6:52 pm on Dec 5, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member mivox is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Dec 6, 2000
posts:3928
votes: 0


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

8:24 pm on Dec 5, 2002 (gmt 0)

Junior Member

10+ Year Member

joined:Oct 29, 2002
posts:44
votes: 0


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?
8:50 pm on Dec 5, 2002 (gmt 0)

New User

10+ Year Member

joined:Nov 19, 2002
posts:22
votes: 0


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.

10:03 pm on Dec 5, 2002 (gmt 0)

New User

10+ Year Member

joined:Dec 5, 2002
posts:7
votes: 0


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.
3:29 pm on Dec 7, 2002 (gmt 0)

Preferred Member

10+ Year Member

joined:Nov 2, 2001
posts:597
votes: 0


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.
4:14 pm on Dec 7, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:July 16, 2002
posts:2133
votes: 1


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.
5:59 pm on Dec 7, 2002 (gmt 0)

Full Member

10+ Year Member

joined:July 8, 2001
posts:267
votes: 0


Thats what i was thinking- using a PNG. They have some nice transparency, so problems with jaggedness should be a problemo.
12:56 am on Dec 8, 2002 (gmt 0)

Junior Member

10+ Year Member

joined:May 25, 2001
posts:48
votes: 0


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.
5:52 am on Dec 8, 2002 (gmt 0)

Junior Member

10+ Year Member

joined:Apr 11, 2002
posts:137
votes: 0


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.

9:26 am on Dec 8, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:May 26, 2000
posts:37301
votes: 0


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.

8:53 am on Dec 9, 2002 (gmt 0)

Preferred Member

10+ Year Member

joined:Aug 30, 2002
posts:522
votes: 0


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.

3:09 pm on Dec 9, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:May 26, 2000
posts:37301
votes: 0


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.

6:46 am on Dec 13, 2002 (gmt 0)

Preferred Member

10+ Year Member

joined:Aug 30, 2002
posts:522
votes: 0


Ya I am primarly a graphic designer and I use that all the time. You can make almost any shape and use that trick.
7:24 am on Dec 13, 2002 (gmt 0)

Senior Member

WebmasterWorld Senior Member mivox is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Dec 6, 2000
posts:3928
votes: 0


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

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members