Results 1 to 13 of 13
  1. #1
    Join Date
    Jan 2002
    Location
    Toronto, Canada
    Posts
    11,059

    I need basic help with a transparent gif

    Geez, I can't believe I'm having trouble with such a basic design element.

    I created a simple text-only logo and exported it in Fireworks as a transparent gif. I placed it into my header which has a gradient fill. The problem is that the logo is not crisp at all. It is very rough on the edges and I can't figure out what I'm doing wrong. See attached. Hopefully it will properly display how rough the edges are.

    What do I do to make it "crisp"?

    Vito
    Attached Thumbnails Attached Thumbnails sample_of_logo.gif  
    DemoDemo.com - Flash tutorials since 2002
    DemoWolf.com - 5,300+ Flash tutorials for hosting companies, incl. Voice tutorials

  2. #2
    Join Date
    Mar 2004
    Posts
    1,468
    If you posted the actual gif/psd it would be easier for us to say....
    Nobodys going to steal it and try to sell it.

    But check the anti-aliasing (spelled wrong)

    Also are you saving this in image ready or photoshop? Photoshop isnt that great with them, try saving it in image ready where you can moniter it better.

    Also, you could try saving it as a .png, i believe they support transparancy too. (once again save in imager ready)

  3. #3
    Join Date
    Jan 2002
    Location
    Toronto, Canada
    Posts
    11,059
    Thanks, jasong.

    As mentioned in my original post, I am using Fireworks. The reason I cropped a portion of the logo is that I am aware of WHT forum rules and I do not wish to be considered indirectly promoting one of my sites so I'd rather not show the entire logo. It really isn't a matter of fearing someone taking my design.

    I have tried every combination of interlace, anti-aliasing and loss reduction. I just can't get the damned thing to look right.

    Vito
    DemoDemo.com - Flash tutorials since 2002
    DemoWolf.com - 5,300+ Flash tutorials for hosting companies, incl. Voice tutorials

  4. #4
    Join Date
    Nov 2002
    Location
    Toronto, Canada
    Posts
    132
    You need to save with more colors, when you get to the export options box make sure u select the option that will give you the biggest number of color.

  5. #5
    Join Date
    Feb 2004
    Location
    USA
    Posts
    1,571
    yeap nice idea tho

  6. #6
    Join Date
    Jan 2002
    Location
    Toronto, Canada
    Posts
    11,059
    Firefuze, thanks, I'll give it a go.

    activeforce, helluva first post in the community...

    Vito
    DemoDemo.com - Flash tutorials since 2002
    DemoWolf.com - 5,300+ Flash tutorials for hosting companies, incl. Voice tutorials

  7. #7
    Join Date
    Jan 2004
    Posts
    1,769
    Vito, are you using a 'matte' color when saving this as a transparent gif?

  8. #8
    Join Date
    Jan 2002
    Location
    Toronto, Canada
    Posts
    11,059
    Umm, I believe by default it sets the matte color to white.

    Vito
    DemoDemo.com - Flash tutorials since 2002
    DemoWolf.com - 5,300+ Flash tutorials for hosting companies, incl. Voice tutorials

  9. #9
    Join Date
    Jan 2004
    Posts
    1,769
    OK, that's what I thought. It looks like the white matte is the problem.

    Try two things....

    1. Choose a matte color that is in the same color range as the blue-ish fade background that you have.

    2. Or, disable the matte completely.

  10. #10
    Join Date
    Jan 2002
    Location
    Toronto, Canada
    Posts
    11,059
    I never thought about that. Thanks, I'll try it and let you know how it goes.

    Vito
    DemoDemo.com - Flash tutorials since 2002
    DemoWolf.com - 5,300+ Flash tutorials for hosting companies, incl. Voice tutorials

  11. #11
    Join Date
    Nov 2003
    Location
    Antwerp
    Posts
    67
    Try saving as a .png....

    make sure that you don't

    have the latest version of

    IE because it obstruct the transparanty

    of the .png file...

    Look here at the titles for an example

    http://www.toptours.be/test/indexkantoren.html

    This are transparant pings...

    And this is sort of the script you need when

    you and the viewers work with the latest IE...


    /* the height and width should match those of the image */
    filter:progidXImageTransform.Microsoft.AlphaImageLoader(src='images/lastminute.png');
    /* apply the background image with Alpha in IE5.5/Win. The src should match that of the image */
    "> <img style="
    filter:progidXImageTransform.Microsoft.Alpha(opacity=0);
    /* make the real image fully transparent in IE5.5/Win, so the Alpha image can show through */
    " src="images/lastminute.png" width="254" height="50" border="0" alt=""></span>


    Greetz,


    Yves

    ps. transparant pings work fine with opera and mac browsers...
    //rubberduck.be
    //hosting and domains
    //visual media and webscripting

  12. #12
    Join Date
    Jan 2002
    Location
    Toronto, Canada
    Posts
    11,059
    After trying all suggestions, still not what I was looking for, so I gave up. Instead, I decided to incorporate the gradient fill backround into the logo image and exported it as a high quality jpg and all looks good now.

    Thanks for the input, folks.

    Vito
    DemoDemo.com - Flash tutorials since 2002
    DemoWolf.com - 5,300+ Flash tutorials for hosting companies, incl. Voice tutorials

  13. #13
    i'll go with a .png file~

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •