9 replies [Last post]
Jenni
Jenni's picture
Offline
Enthusiast
Seattle
Last seen: 11 years 31 weeks ago
Seattle
Joined: 2007-03-09
Posts: 115
Points: 0

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.

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

Here is what I'm doing:

  • I create the fonts in photoshop with smoothing.
  • I save them as a GIF using the "Save for Web & Devices" wizard
  • I select the highest colors and transparency
  • Well, it is transparent.... but it looks like poop. Can anyone give me some advice here?

    Thanks

    jq

    Tyssen
    Tyssen's picture
    Offline
    Moderator
    Brisbane
    Last seen: 6 years 1 week ago
    Brisbane
    Timezone: GMT+10
    Joined: 2004-05-01
    Posts: 8201
    Points: 1386

    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.

    How to get help
    Post a link. If you can't post a link, jsFiddle it.
    My blog | My older articles | CSS Reference

    Katie
    Katie's picture
    Offline
    Enthusiast
    Seattle, WA
    Last seen: 4 years 50 weeks ago
    Seattle, WA
    Timezone: GMT-8
    Joined: 2006-08-06
    Posts: 357
    Points: 2

    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! Smile

    Blog: Pew Pew Laser Blog
    Online File Storage: DropBox
    Daily Deals on Local Activities: Groupon

    Triumph (not verified)
    Anonymous's picture
    Guru

    Why use images in this case?

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

    burlster
    burlster's picture
    Offline
    Leader
    Bournemouth
    Last seen: 3 years 4 weeks ago
    Bournemouth
    Timezone: GMT+1
    Joined: 2007-05-31
    Posts: 693
    Points: 45

    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.

    Have YOU said Hello yet?
    The CSSCreator Hello Thread

    Jenni
    Jenni's picture
    Offline
    Enthusiast
    Seattle
    Last seen: 11 years 31 weeks ago
    Seattle
    Joined: 2007-03-09
    Posts: 115
    Points: 0

    Hi Katie, Wow girl... you

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

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

    Jennifer

    Triumph (not verified)
    Anonymous's picture
    Guru

    Jenni wrote:... And shame

    Jenni wrote:
    ... And shame on you Triumph for encouraging me to be lazy and use plain old text Wink

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

    Jenni
    Jenni's picture
    Offline
    Enthusiast
    Seattle
    Last seen: 11 years 31 weeks ago
    Seattle
    Joined: 2007-03-09
    Posts: 115
    Points: 0

    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 Tongue

    Tyssen
    Tyssen's picture
    Offline
    Moderator
    Brisbane
    Last seen: 6 years 1 week ago
    Brisbane
    Timezone: GMT+10
    Joined: 2004-05-01
    Posts: 8201
    Points: 1386

    Jenni wrote:... the guy that

    Jenni wrote:
    ... the guy that co-created SIFR is from Seattle BTW Tongue

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

    How to get help
    Post a link. If you can't post a link, jsFiddle it.
    My blog | My older articles | CSS Reference

    burlster
    burlster's picture
    Offline
    Leader
    Bournemouth
    Last seen: 3 years 4 weeks ago
    Bournemouth
    Timezone: GMT+1
    Joined: 2007-05-31
    Posts: 693
    Points: 45

    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 Smile

    Have YOU said Hello yet?
    The CSSCreator Hello Thread