[Solved] Yucky Jaggies!

Can't really help you with Photoshop as I use Fireworks for all my web graphics. But I always use 8-bit PNGs instead of GIF anyway and then run them through a PNG optimiser to reduce the file size even further.

I bet that your jaggies are due to the way that you're matting the .gifs. Remember that .GIFs have only completely opaque pixels (a solid color) or completely transparent pixels. (.PNGs can have pixels with color that are also, say, 40% transparent.) Looks like your .GIFs are currently anti-aliased against white. Try changing the "Matte" color in the Save For Devices dialog to that blue color behind your buttons.

PS - You might want to add a bit more "alphum lorem" on your page there. I can tell what's coming (next year, sometime?) and I don't think it's out yet. Though I love that kitten!

Why use images in this case? Just make it actual text.

I find the easiest way to avoid the problem of somewhat jaggered edges on transparent images is to create them in the first place on nothing.

I sound odd, allow me to elaborate.

In photoshop if you write your text on a white background, you can then save as a transparent gif and it will automatically cut out the white (assuming that's what you've asked it to do), but unless the transparency figures are spot on, it'll never be perfect for going on backgrounds of another colour.

The solution is to simply create it on NO background (the chequered backdrop when there is no background). It doesn't try and do clever smoothing things then when you save it.

That helps me anyway, and might help your roll-over images. But then again, I didn't look that closely (I'm at work you see), so I couldn't say for sure.

Hi Katie,

Wow girl... you were dead on! I went into the "Matte" section of the Save As dialog and selected blue color for the matte background, resaved it as a gif, and guess what - my jaggies blues are history... High Five!!

Check it out:

http://wisetopic.com/Sandbox/JenniQuick/ehome%20portal/index.html

Looks a kajillion times better. That was a nice explanation of the difference between pngs and gifs too. Thanks also for the comments about the kitteh pic. I love kitties Its always nice to work a pic of a cute cat in here and there :rolleyes:

Thanks also to Tyssen, Triumph, and good ol' two star burlster - the off topic forum master. You guys each get a gold star

Get back to work Burlster! And shame on you Triumph for encouraging me to be lazy and use plain old text

Jennifer

Ok, fine. Use plain old text and apply sifr or another text replacment technique then. You'll be calling plain old images lazy soon enough.

Use SIFR! That is the opposite of lazy! I wish I thought of that earlier...

... the guy that created SIFR is from Seattle BTW

One of the other co-creators, and the one now responsible for its continuing development, Mark Wubben, is from the Netherlands.

I'm not quite sure, but I think what I was suggesting wasn't entirely different there Jenni, only instead of turning the background blue-ish, I was suggesting making it non-existant. See, I agree... the problem is that a GIF can't do opacity like pngs, so it looks at a faded colour on a white background and says "Make that 50% white, 50% blue" which is when it doesn't look so good. Take away the background and it will say "Make this 50% blue... 50%... oh no, wait a minute, there is no color, well I can't just use a random color..." so whether it uses a faded colour of the one you're primarily dealing with or none at all, it looks better then when it tries to be clever and incorporate the background colour.

Glad the problem is sorted anyway