Solved

Is it possible to create good transparent text images?

Posted on 2000-04-12
32
168 Views
Last Modified: 2010-04-02
All of the transparent text images look bad when viewed with a colored background.  Is there a trick to this?
0
Comment
Question by:kkirt1
  • 15
  • 11
  • 3
  • +2
32 Comments
 
LVL 1

Expert Comment

by:cevr
Comment Utility
What, exactly, did you do to create your text?  What,exactly, are you trying to do?
0
 
LVL 30

Expert Comment

by:weed
Comment Utility
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.
0
 

Author Comment

by:kkirt1
Comment Utility
How do you "select" a transparent color?
0
 
LVL 30

Expert Comment

by:weed
Comment Utility
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?
0
 

Author Comment

by:kkirt1
Comment Utility
Adjusted points from 25 to 50
0
 

Author Comment

by:kkirt1
Comment Utility
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.
0
 

Author Comment

by:kkirt1
Comment Utility
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...
0
 
LVL 30

Expert Comment

by:weed
Comment Utility
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.
0
 

Author Comment

by:kkirt1
Comment Utility
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!
0
 
LVL 30

Expert Comment

by:weed
Comment Utility
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.
0
 

Author Comment

by:kkirt1
Comment Utility
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?
0
 
LVL 30

Expert Comment

by:weed
Comment Utility
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.
0
 

Author Comment

by:kkirt1
Comment Utility
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.
0
 

Expert Comment

by:Snubbenx
Comment Utility
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.

0
 
LVL 1

Expert Comment

by:cevr
Comment Utility
I think weed is correct. This is the only way that perticular example could have been created.
0
 

Author Comment

by:kkirt1
Comment Utility
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.



0
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 
LVL 1

Expert Comment

by:cevr
Comment Utility
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.
0
 

Author Comment

by:kkirt1
Comment Utility
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.
0
 
LVL 30

Expert Comment

by:weed
Comment Utility
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.
0
 
LVL 30

Expert Comment

by:weed
Comment Utility
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.
0
 

Author Comment

by:kkirt1
Comment Utility
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?
0
 
LVL 30

Expert Comment

by:weed
Comment Utility
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?
0
 

Author Comment

by:kkirt1
Comment Utility
No, I am keying in the numbers the RGB way.
0
 
LVL 30

Expert Comment

by:weed
Comment Utility
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.
0
 

Author Comment

by:kkirt1
Comment Utility
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?
0
 
LVL 30

Expert Comment

by:weed
Comment Utility
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.
0
 

Author Comment

by:kkirt1
Comment Utility
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!

0
 
LVL 30

Expert Comment

by:weed
Comment Utility
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.
0
 

Author Comment

by:kkirt1
Comment Utility
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?
0
 

Accepted Solution

by:
shedlord earned 50 total points
Comment Utility
After stage 4, try flattening the layers then change image mode to indexed colour.

At stage 6 (export as gif) you should get a preview of your image which you can point at with an eyedropper. Using this to click on a coloured pixel in the image should turn all matching coloured pixels grey (signifying that these will be transparent).
0
 

Author Comment

by:kkirt1
Comment Utility
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!
0
 

Expert Comment

by:Snubbenx
Comment Utility
"
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.
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

HOW TO CREATE A WEB 2.0 IMAGE WITH A REFLECTION I would like to start by saying I know Web 2.0 isn't a style. It is actually the practice of information sharing or  collaboration on the Web. It is also associated with the technology that is used …
In this article, I'll explain how to change the color of a selection in Photoshop. I'm sure there are a couple different ways to do this in photoshop, but this is my preferred method in Photoshop. I am using Photoshop CS6 and I will be adjusting the…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to correct colors in Photoshop using the Curves adjustment Open a photo for editing in Photoshop: Begin by creating a new adjustment layer by going to Layer > New Adjustment Layer > Curves: Select "OK" on the …

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now