Maintaining text shape with tranpsarent background 2

[Mechelsdic]

Is there a way to preserve the "look" of text when you place it on a transparent background using Photoshop 7? Everytime I try it leaves the text jagged, blotchy and totally unusable. The idea I'm trying to do is make an email signature that can be used on any color stationary without modification and not have the white (or the background color i'm using in PS) box around the text, just the color of the background used by the user who is reading the email or the color of the current stationary I am using to compose the email. The more we know, the more we know there's more to know.

 

[babywewe]

The way i'm understand is that your using a transpart (nothing in the backgroud) with text over it.
My first thought is that photoshop is horrible with text because it tends to rasterize them. If you just want text try using quark,illustrator , or word

 

[kim1234]

Short answer: Nope.
Is it the Photoshop's fault: No.

Long Answer:
Regardless of what program you use to create your signature graphic (Photoshop, Illustrator, Etc.) the result you're aiming for is a .gif or a .png file (which are both rasterized formats). Starting with one program or the other (in this case) will make no discernable difference in the resulting signature graphic. The limitation is not in the program you use to create the graphic, but in the file format itself (namely .gif, or .png), and the way in which email programs render it.

The edge of the text (which looks jagged) when looked at up close in photoshop, reveals pixels which are fully opaque (the inner portion of the letters), pixels which are fully transparent (completely outside the letters), and pixels which are partially opaque/transparent (along the edges of the letters). Photoshop is happy to render partially transparent pixels for you. However, when you save this graphic as a .gif - you have to conform to .gif file capabilties - mainly, a .gif file may have pixels which are either fully transparent or fully opaque. IT CANNOT HAVE partially transprent pixels. As a result, Photoshop picks a "matte" color, pretends that is the canvas color behind your text, and renders the pixels along the edge of the text as if they were blending to that matte color (anti-aliasing), and then renders them as fully opaque pixels in the resulting ".gif" file. (Try the "Save for Web" option in the "FILE" menu, in the "Optimized", "2-up", or "4-up" tab, use the "Settings" located to the right to play with matte color, and see the effects).

Now, the png-24 bit graphic format (not the png-8 bit graphic) supports partial tranparency (called alpha transparency), but the only browsers to render it properly thus far are Mozilla 1.0+, NN6 and NN7 (and perhaps Opera 6?). IE (all versions) does not yet support alpha transparency. Email "stationary" is basically an HTML version of email, and the recipient's email program will use a browser's redereing engine to show the stationary - so you've got the same limitaitons in email "stationary" as you do on web pages.

When all is said and done, you cannot, at this point, create a single signature graphic to look good on any background color (smooth, non-jagged edges). An old trick of web designers is to create several graphics, each one using a different matte color, and pick the closest match to the background they're currently using. For example, a dark green "matte" color could effectively blend not only to dark green, but also dark blue, dark brown, etc.

Hope this helps -- Kim

 

[Mechelsdic]

Thank you both for the replies. You both have educated me. )
I have a far better understanding of the intracasies now. This knowledge will be useful in other endeavors with graphics also. Thank you both again.

Mechelsdic ) The more we know, the more we know there's more to know.

 

[BDNFLNC]

Well put Kim. A star for that one!

 

[jimoblak]

Here's a thought that may be worth experimenting with...

Design your signature as a two-color indexed image that is 4 to 8 times the size you need. When exporting to GIF, select the background color as the transparency.

Place the image in your HTML but specify the pixel dimensions to 1/4th to 1/8th of the image size. Let the browser handle the antialiasing.

I have done this plenty of times on logos that I want to display onscreen and print in high resolution from the web page.

Since you are only using 2 indexed colors on the enlarged image, the file size is suitably small for the web.