I feel kind of like a silly noob asking this question :blushing: but anyway I need help.
I'm trying to make a fancy css menu (On the right it says "Products", "Team Directory", etc) with transparent gifs. I've done this before and it usually goes smooth - but this time I seem to be stuck in jaggy land.
Here is what I'm doing:
Well, it is transparent.... but it looks like poop. Can anyone give me some advice here?
Can't really help you with
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
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?
Why use images in this case? Just make it actual text.
Drop the BackDrop
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
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:
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
Use SIFR! That is the
Use SIFR! That is the opposite of lazy! I wish I thought of that earlier...
... the guy that created SIFR is from Seattle BTW
Jenni wrote:... the guy that
... the guy that co-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.
Colour me pink!
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