Image transparency & shadows

[b4u]

Hi,

I need some advice on how to do proper shadow in an application such as Paint Shop Pro 8.

Here's what I want to do:

I wanto to pick an image (gif), give it a shadow, and then apply transparency.

What I've made so far:

If I pick the picture (gif), and apply the transparency to a set background color, that color area becames transparent. That's what I want to do, to some extent.

The problem starts with shadows ... if I apply an effect like shadow, the application puts various gradients of gray over the background color. If for example I have pure RED as background, and I want that color to became transparent, then the place where the shadow falls will not be pure RED, so when I apply the transparency, the shadow area doesn't get transparent, and the shadow gets the redish look ... if I apply that image over a white background, it looks bad.

What I need is a way of, for example, putting shadow over a white background, and then say that the gray tons are semi-transparent ... so I can place the image over any background, and the browser (for example in a web page) will make it more/less transparency in the shadow, depending on the more/less grayish color of the shadow. Or by other words, I want to say something like "make white full transparent, and black full opaque, then applyand mix the full gradient range over the background color". So a yellow background pixel gets mixed with respective gray pixel of the shadow.

Hope you understand what I wrote ... I'm getting confused myself lol

Thanks allot.

 

[drag]

Well you need to know the background of first and then just make the gif drop shadown on that color backgound.

Gif can't do real gradiant shadows, it only saves one color as transparencies so you can't do the many different colors (well gray in your case) of varying degrees of transparencies. Only one color can be transparent... So you have to fake it if your using Gif (match the background to the image before making the drop shadow)

However if your using PNG format it can do real alpha channel. A alpha channel is like a red/blue/green channel, except for colors it does transparencies. So it's called a RGBA format.(red/green/blue/alpha)

PNG is a certified webstandard and is a widely accepted and used open source format. Remember it's full internet standard, just like gif or jpeg.

here is a crappy picture I made using gimp a long time ago. (tell me if it doesn't come up.)

the only thing that should be fully opaque is the flower, the green should cast a green hue on the background, but be mostly opague. The leaves outside the green ring vary from completely transparent to light shades of gray so they should be a "shadow" on whatever color background your using.

I use sometimes for my desktop background since it supports PNG formats. It'll display correctly in most browsers, except IE of course. IE may display it similar to a gif were it only does one color as transparent... I think.

It should display correctly in your paintshop pro. (it should support the format). If not use Gimp2. Duplicate the layer and stick various different colors underneath it.

here is a better example You can also use it to test different browsers for compatability.

 

[b4u]

It looks exactly what I'm looking for ... but do you know any tutorials around?

I'm googling for quite some time now, but with no practical results ... all I can find is some tutorials on how to add simple transparency, like the one we get with gif files ...

All I can find are screenshots and pictures already processed, no tutorial on how to get there ... you know any place where I can find some info?

 

[WannaFly]

gradient transparency in PNGs are practically useless in my opinion - as MSIE 6 doesnt support it and on most websites a LARGE percentage will be using it. I dont even think photoshop supports gradient transparency.

drag, that link you posted is an excellent resource, thanks!

 

[b4u]

Originally posted by: WannaFly
gradient transparency in PNGs are practically useless in my opinion - as MSIE 6 doesnt support it and on most websites a LARGE percentage will be using it. I dont even think photoshop supports gradient transparency.

drag, that link you posted is an excellent resource, thanks!

Well, I must disagree with you at this point ... as far as I know, and I'm a newbie on PNG, there is a fix to IE5.5+ ... it's a clean fix, so I'll give it a try after a successfully create a gradient shadow ... which I failed so far ...

You can check the fix here ... it has a neat effect with a drag-and-drop car picture, which is exactly what I want to do, but in my case with shadow gradients (white=100% transparency through black=0% transparency (full opacy)).