Images with transparency??

[randelld]

Hi All.
I have a background image in a table and want to place a transparent image file containing text only with drop shadow into it. So that I can overlay different text on different pages.

My problem is that when I try to do it, the text always has a rough looking white outline that looks terrible. Would this be caused by the drop shadow? Does anyone know how I can create the text overlay without the horrible rough outline??

Thanks all.

[Tim]

Originally Posted by randelld

Hi All.
I have a background image in a table and want to place a transparent image file containing text only with drop shadow into it....My problem is that when I try to do it, the text always has a rough looking white outline that looks terrible. Would this be caused by the drop shadow? Does anyone know how I can create the text overlay without the horrible rough outline??

I can't quite picture what you're aiming at here but try recreating the image using the same background colour as your pages then (with anti-aliasing on and a tolerance of say 20) clear the background colour to reduce file-size. Assuming it's a Gif, play around with the number of colours when optimising it to maximise the smoothness of the shadow gradient.

[KeithO]

what program are you using for image editing?

[wslover]

When exporting or "saving for web" in photoshop, change the Matte color in the presets to the background color you are using. It defaults to white, that's why you get the white edge.

Caution, do not use the None option, you will get jagged edges.

[Mac 5]

What color is the background on the webpage? It's hard for Photoshop to fade to clear, it usually goes to white instead and that is probably what you're seeing. Are you using the layer generated shadow?

Make another layer below the dropshadow with a 2nd drop shadow that is LARGER than your black dropshadow that is the webpage background color. Do not use much of a blur or feather. In Photoshop It should look like the image with a drowshadow, and a glow of the web background color. It should be small but a hard edge of the background color. The rest of the layer should be transparent. (It can be made with whatever method you want, with a selection and fill, generated shadow, outer glow, etc.)

Save that as a gif with transparency checked. You can play with the save for web details that Bootboy describes above also.

[randelld]

Hi all,
Thank you all very much for the suggestions. I'll be going through them in the morning. I have uploaded the poor result so that you can see exactly what I mean. The section with the car is a gif that streches the whole width and has the blue background. That gif is set as background image. Then I have put a table over it and inserted the text image into the table. The idea being that I can change the text on different pages.

[khurramali]

Originally Posted by wslover

When exporting or "saving for web" in photoshop, change the Matte color in the presets to the background color you are using. It defaults to white, that's why you get the white edge.

Caution, do not use the None option, you will get jagged edges.

wsolver is right, this is the only solution.

[Jabber_uk]

I don't use 'drop shadow' for transparent GIFs for the very reason specified. I would either use a jpg (non transparent of course) OR I would create TWO layers of text, the lower one being a grey like CCCCCC for instance to ceate the illusion of drop shadow. Then save as GIF.

[Jabber_uk]

I tend to make an image with TWO text layers, one sits behind the other creating the illusion of being a shadow.

[randelld]

I am still learning to use the functions of photoshop, so I have tried the most simple solution from above.
Wslover, I managed to find the matte option and have done that and now i am happy with the result. I can now continue and have learned a valuable tip once again from this forum.
Here is what i was trying to achieve
http://www.motoringspain.com/wpw/
Muchisimas Gracias Caballeros

[docholiday]

I'm assuming that you are capable of editing web pages, and if so - for any transparency you wish to create, you don't have to use GIF. Just use PNG, the best format for alpha-blended transparency. The caveat is that Internet Exploder (of course) hates it. The simple workaround is in a script that is called upon by the img tag in CSS.

The demo: http://webfx.eae.net/dhtml/pngbehavior/demo.html

The tutorial: http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html

It works beautifully and degrades as far as IE5.5 - this is the holy grail of transparency support.

[docholiday]

Not sure how to delete posts, but the others got through even though it said 'server error' so I'm changing this message to say this.

[docholiday]

Not sure how to delete posts, but the others got through even though it said 'server error' so I'm changing this message to say this.