#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2003
    Posts
    36
    Rep Power
    12

    Transparency problems


    Hi there,
    Whilst doing some graphics for a site I'm designing I have come across an annoying problem. What I want to do is have some buttons that just consist of text with transparent backgrounds as they will be positioned over a patterned background. Every time I save the images as .gifs I'm getting the transparecy but around the edges of the letters of the wording I am getting a speckley white pattern, and to be honest, it looks crap. Is there a way around this, or am I doing something wrong, I have tried doing these images in both Photoshop 7 and Fireworks MX, no luck with both, any help is appreciated. Thanks in advance.

    Swiss.
  2. #2
  3. mod_dev_shed
    Devshed Supreme Being (6500+ posts)

    Join Date
    Sep 2002
    Location
    Atlanta, GA
    Posts
    14,817
    Rep Power
    1099
    The cause of this is "Anti-Alias"ing. It's used to make the fonts look smoother. It accomplishes this by blending colors around the edges. When you set a transparency, these colors don't become transparent, as only one color can be declared transparent.

    In PhotoShop (I have 5.5 but I can't image it being too different), when you create the text with the text tool, you can set the "Anti-Alias" (in quotes b/c that's the name of the field to change) on the same window where you enter the text and format its font and size and all the other stuff.

    I sortof wonder though why you would make a button that is only text, and not just use the text itself. Another button means increased download time (though small it may be). And if you used text you would have more control over it with CSS.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2003
    Posts
    36
    Rep Power
    12
    Great, thanks I'll try that out. The reason I am making just a text button is, I want to use a particular non-standard font so that it would fit in with the rest of the site design.
  6. #4
  7. No Profile Picture
    Got source?
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Mar 2003
    Location
    Laguna Niguel, California, USA
    Posts
    2,331
    Rep Power
    14
    It's called "Anti-Aliasing" in Photoshop 7 as well. If you can't find it, it has options of none, sharp, crisp, strong, smooth. Located between font size and allignment.

IMN logo majestic logo threadwatch logo seochat tools logo