Is it possible to create good transparent text images?

What, exactly, did you do to create your text?  What,exactly, are you trying to do?

Transparent gifs only allow for 1 color of transparency. Which means that you will end up with a weird white halo around images including text. There really isnt a solution to this except for:

1) use the same color as the background behind the text in photoshop as youre using as the background color of your web page. Select that color as the transparent colors when you save your gif. Then the white halo suddenly becomes the same color as your background and you dont see it.

2) use PNG format which allows for several hundred levels of transparency and even alpha channels for masking. Unfortunately some browsers are lagging behind in supporting this marvelous format.

How do you "select" a transparent color?

When you choose to export as a GIF from photoshop it will present you with a dialog box that lets you use the eyedropper to choose your transparency color. How did you get transparency before?

Adjusted points from 25 to 50

Please go here and tell me how they did the word preconception: http://www.babycenter.com/preconception/

This is what I am trying to do.  I tried the transparent color thing but still got the same crappy image.

Also, since the PNG thing won't work with all browsers that really isn't an option for what I am trying to do.  Like the idea but...

They did it exactly as described above. In photoshop they put down white text over an orange background. Exported it as a Gif, selected the orange background color as the transparent color and put the graphic on top of the same orange background color on the web page.

Maybe I am being a little slow but...

You said in your last post "put down white text over an orange background."  When you put the orange background in don't you lose the transparency?  I did.  

I also tried starting with a transparent image the adding white text.  Then selecting the transparency background when saving the .gif file but it still looks crappy (very choppy) like the image at the site.

If you right click on the image at the site I referenced then click copy and paste into photoshop.  You can see mulitple gradient levels to orange.  Do you see them?

Help!

When you put the white text over an orange background you dont lose transparency because in the export step youre choosing the orange color as your transparent color meaning the orange color wont show up.

Yes there are varying levels of orange around the white text but they are NOT the same color orange as the color that was chosen as the transparent orange. They did this to avoid making the text look like it had a white or black halo around it when placed against the orange on the web page. Theyre using anti-aliasing to their advantage. It helps to make the text look smoother. Perhaps youre not using anti-aliasing when putting down the text? Also keep in mind that NO image on the net is going to be perfect. Due to the compression methods of JPEG and GIF there will always be slightly gritty parts.

I am checking the anti-aliased box when adding the text. Also, there has to be a way to automatically add those varying levels of orange.  I can't beleive they would do that by hand.  Isn't there a mask or something I could use to get a better image?

Yes they do it automatically by putting the orange behind it when creating it in photoshop then selecting the orange as transparent when exporting as gif. The oranges around the text are slightly lighter than the orange you selected in the export box because theyre under the fringe semitransparent white of the text.

I could not get your idea to work.  Even when selecting the same transparent color as the background color while exporting the file it did not work.  The background was still visible.

Here is what I got to work:

Create a transparent image.
Fill the background with the background you will have on the page.
Insert white text.
Use the magic wand to select the white text.
Invert the selection
Delete the background.

This will produce very nice transparent text.

Try this:

1. Create a black background on a layer

2. Use the texttool to create the text you want on a new layer - on top of the backgroundlayer. The text shoud be white and 1 point larger then what you want the endresult to be. (remember the antialiasbutton) you DONT WANT ANY SMOOTHE EDGES on the font.

3. Render the textlayer. Rightclick on the textlayer ->choose "render layer.

4. Go to the Layermenu - layereffects - innerglow and choose your color (orange)

5. Adjust the amount of innerglow so that therees only a thin blurry orange line around the font.

6. Now there should a black background, a white font with a an orange outline. Beacuse you used "innerglow" she edge of the font is still sharp, right?

7. Go to: image->mode->and choose "index"
 
8. Go to File->export and choose "gif89a"

9. A new window appear. Click left mousebutton on the black background. and then "ok"

Thats it. You should have your transparent gif which will "blend" into an orange background.

I think weed is correct. This is the only way that perticular example could have been created.

I disagree.  This is how it is done:

1. Create a transparent image.
2. Fill the background with the background color you will have on the page.
3. Insert white text.
4. Use the magic wand to select the white text.
5. Invert the selection
6. Delete the background.
7. Export as .gif image (no transparent color selection necessary.

kkirt1- I agree that this is a good way to make GIFS, however, the particular example in the link above was created using the method weed described. You can tell if you right click and view the text gif. There are orange artifacts around the letters.

I don't want to beleaguer the point but...

The method I described does leave the differing colors of orange around the white text.  This is why it looks so good - these levels of orange make it anti-aliased.  

The method that weed described does not remove the orange background (at least the way I interpreted it.)  Sure the text looks good but the image is not transparent.  This creates a problem when you are using the image on the web.  When you set a background color on the page then overlay a gif image with a background you can see the outline of the image. Don't ask me why, I guess it is the way different browsers interpret the background color and the gif image pallete.

Yes, the way i described it does remove the orange background but only in the last stage where you select that orange as the TRANSPARENT part so it doesnt show...Youre doing exactly the same thing i described except youre selecting the orange, deleting it, and selecting the color you replaced it with as transparent. You added 2 extra steps.

Yes, the way i described it does remove the orange background but only in the last stage where you select that orange as the TRANSPARENT part so it doesnt show...Youre doing exactly the same thing i described except youre selecting the orange, deleting it, and selecting the color you replaced it with as transparent. You added 2 extra steps.

This is how I interpret your instructions - step by step:

1. Create a new transparent image
2. Add a background color
3. Create a new layer
4. Add white text
5. Export .gif
6. Select transparent color from dialog box that comes up after selecting "export gif"
7. Select ok.

When I go and look at this image all by itself in IE5.0 I still see the background color.  What am I doing wrong?

Youre missing a step somewhere when you select the color to make transparent. If its selected correctly then it wont show up. You are using the eyedropper tool to select the transparent text right?

No, I am keying in the numbers the RGB way.

Ahhh theres your problem...Use the eyedropper to select the background color. Colors shift when you send them to GIF or JPEG format so the RGB values wont be the same.

I am creating a new RGB image. Should I save it as a gif file then open it back up so that I can get the correct background color?  How else would I get this "shifted" color?

No, just use the eyedropper tool to select the transparent color. The color shift wont be visible with just the fringes of color showing around the white text.

I give!  You said two comments ago that I needed to use the dropper to get the correct background color.  I don't see how the eyedropper color could be any different than the fill color I am using since I am specifying the exact number while doing both.

I create a new transparent file. Then I use a fill color Red 51, Green 51 and Blue 102.  When I export the file and select the transparency color I use the same exact numbers.  How can "Colors shift when you send them to GIF or JPEG format so the RGB values wont be the same."

Help!

The colors shift because photoshop can display millions of colors and a GIF is only capable of displaying 256 MAX...Some colors HAVE to change to fit that 256 color pallet. As far as JPEG color shifting goes, the compression method leaves artifacts which shift the colors but less dramatically than GIF. Do NOT use RGB values to specify transparency thinking that youre being exact. The web is a very unexact place.

Okay, you say don't use RGB to select colors - how should I select these colors?  When I create the transparent image and "fill" it how should I select the "fill" color?

I appreciate you hanging in here with me but I have yet to piece this together. Can you break it down very simply for me?  Please insert, delete or modify the following step by step instructions:

1. Create a new transparent image
2. Add a background color (I think you are saying that this color has to be the same as the color in step 6 -right?)
3. Create a new layer
4. Add white text
5. Export .gif
6. Select transparent color from dialog box that comes up after selecting "export gif."  (How do I make this the same color without using RGB.  Wouldn't using another color method like CMYK in both steps produce the same results?)
7. Select ok.

Anyone?

First, thank you Shedlord.  That was the ticket!  I had been trying tp export an RGB file and so I did not get the "eyedropper." It works like a charm!

Weed, what can I say?  If I could give you an A for effort I would.  Thanks for all of your help!

"
Go to: image->mode->and choose "index"
 
8. Go to File->export and choose "gif89a"

9. A new window appear. Click left mousebutton on the black background. and then "ok"
"

In my opinion I told you to change image mode.