Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations IamaSherpa on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Trasparent background with white text 2

Status
Not open for further replies.

bamboo

Programmer
Aug 22, 2001
89
US
I am having an issue creating a transparent .gif image using white text. When put on a background color on a webpage, it looks horrid. Black text on a transparent background seems to work fine though. I did a search with Tek-Tips and found that the correct transparency to use is index-transparency, but that doesn't seem to help. Does anyone know how to display crisp white text on a transparent background and have it look nice on a webpage? THanks.

-Bamboo
 
Hi Bamboo

The secret to making a transparent image look good is to set the background colour of your canvas to match the background colour that the Gif will be going onto on the page. As the object (in this case text) is anti-aliased to the background fireworks adjusts the pixels around it to blend in, so these pixels inherit the colour of your background. When you export and remove the background colour you are left with the "halo" around the text of these anti-aliased pixels.

This is why you see so many websites with images which have this halo effect - people just can't be bothered to do it properly.

I am assuming that the text is not going onto a white background!

If the text is going to go over a non solid colour choose the closest match you can. Then when you export you can choose index or alpha transparency - I have never had a problem with either of them. Derren
[Mediocre talent - spread really thin]
 
Oh, you could also choose to change the setting of the text to "no anti-alias" (this will not have any halo at all) but it tends to make the text look a little, hmm, pants.

[fish] Derren
[Mediocre talent - spread really thin]
 
Darren, Thank you for your input. If I did this though, wouldn't it just be the same as creating a text on the same color canvas as my background in DW and then saving it as a regular .gif file? I'm looking for a way I can create on transparent image and use it on any color background withouth having to alter the canvas of the image each time. What you said worked fine, but from what you said, if I now want to place that same image on another page with a different background I would have to open the .gif up again, change the canvas color to match the new color and resave it using index-transparency. Doing this would be the same as creating a bunch of frames matching each background I wanted and saving them as plain .gif files. Does this make sense?

-Bamboo
 
It certainly does make sense.

The only way to create a single transparent gif which will look good against all backgrounds is to ensure that anti-aliasing is OFF. This is an unfortunate situation, and the reason that so many people can't be arsed to put that extra bit of effort into their site images.

Try the no anti alias option, it may work visually in your case (it will definitely work technially) Derren
[Mediocre talent - spread really thin]
 
See - it's not just me! Derren
[Mediocre talent - spread really thin]
 
I have found that using a very light grey for the text colour works well. Then you can use the transparent background and the text still looks white.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top