fading image

All right here is my question, I want to save an image for the web and make it fade from black(100% opacity) to black(0% opacity) and then use it on a website, but all I get is an image that is halfway black and halfway opacit, not fading bit by bit ... so what I want to know is, is it possible to achieve a fading colour in a GIF or PNG format, or does it just have "100% opacity" and "0% opacity" and nothing in between ...

do you mean something like this?
if not then sorry i will delete this

well, a static image actually, so it doesn't fade within time, it fades from left to right, I probably should've mentioned that ... lol ...

So it's supposed to look like the image below, except the white should be nothing (transparency) ...


but then it comes out like the one below, once again the white is nothing(transparency)

Stay away from GIF with this, the 256 color limitation really hampers alpha transparency (show 34% of the pixel under this one). It works great for index transparency though. (pixel is on or off)

You're looking for at least 24bit PNG, maybe 32bit depending on the image.
Just brush whatever you hear about IE not supporting PNG transparency off your shoulder.

Is this really just a masking type image ?
You can get the same effect without using transparency (or anywhere near the same filesize) in alot of cases just by doing the masking in an image editing application first, then working with what that produces.

What applications are you using, what exactly are you doing ?

transparency is easily achieved by making the base layer transparent and then making it transparent for the "save for web" option

I am using Photoshop CS2, so firstly I create a new image File>New the settings for that image are "backgound>opacity" size (10Hx16W) in pixels ... Then on the background layer I use the gradient tool (black to invisible) and add the gradient. So now I see the image, black on the one side and invisible on the other side (fading from black to invisible) ... then I use the "Save for web" option and then I get a crappy image ... which looks like the second one that I posted ...

So you say I should just try PNG ... ?

I havn't tried this, but i would assume the only way in which you could do this is by creating a box on each frame and then change the opacity through Layer>Layer Style>Blending Options and knock it down one every frame. You'd also need to move the box over a bit in each frame too.

I'm sure there must be easier alternatives, but this is the only way that springs to mind. Also the most time consuming way no doubt.

All right so I did the same thing and saved it as a PNG file, tested in FF and viola ... tested in IE7 and CRAP ... In FF it fades from black (left) to nothing (opacity) right ... in IE it fades from black (left) to white (right) ...

here is an example of what I want to do ... it is the shadow on the right hand side ... View in FF and IE to see what I mean ...

i used the settings above and also drayed doing it as a png file it works well thogh it wont animate. you can try playing with the 'matte' to match the backround or again playing with the transparency and you will get something like that

There's 3 types of PNG images, 8bit, 24bit, & 32bit, if your image looked like crap as a PNG you saved it as an 8bit PNG.

I use Fireworks instead of Photoshop, so I can't help you at all with Photoshops interface.

But, now that I look at sigi23s screenshot there, you see where it says "color mode" & "8 bit" ?
Make sure that says "24 bit" or maybe even "32 bit" if 24 looks bad.

I didn't mean that the image its-self looked crap, in FF the background for the black "fade" is 0% opacit and in IE the background for the black "fade" is white ... that's what I meant ... SO iE doesn't display th PNG opacity ... or does the amount of bits also affect that?

8 bit transparency in PNG images is the same as index, or "on/off" transparency in GIF images.

Look at a 32bit PNG in IE, that shouldn't look messed up at all.

Okay thanks, I'll try that the moment I get home, just got to finish work quickly ... only 2.5 hours to go ... Woot!

I can do that easily in Photoshop CS3. Well, I could have when I had it, I'll try to reinstall it and probably make a tutorial on it on Photoshop CS3. Its really handy.