fading image

  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

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 ...
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • sigi23
  • Newbie
  • Newbie
  • sigi23
  • Posts: 7

Post 3+ Months Ago

do you mean something like this? Image
if not then sorry i will delete this :oops:
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

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 ...
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

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

but then it comes out like the one below, once again the white is nothing(transparency)
Image
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

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 ?
  • sigi23
  • Newbie
  • Newbie
  • sigi23
  • Posts: 7

Post 3+ Months Ago

transparency is easily achieved by making the base layer transparent and then making it transparent for the "save for web" option Image
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

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 ... ?
  • SB
  • Moderator
  • Genius
  • User avatar
  • Posts: 8742
  • Loc: Aberdeen, Scotland

Post 3+ Months Ago

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.
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

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 ...
  • sigi23
  • Newbie
  • Newbie
  • sigi23
  • Posts: 7

Post 3+ Months Ago

Image
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 Image :roll:
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

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.
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

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?
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

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.
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

Okay thanks, I'll try that the moment I get home, just got to finish work quickly ... only 2.5 hours to go ... Woot!
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

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.
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

I'm now at home, I'm using Photoshop CS3 at the moment, but when I convert my image mode to RGB 32bit, I don't have the option to save it as a png file any more ... only in 8 and 16bit, and they both look messed up in IE ... So what's up with that?
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

I usually save it as jpeg. I think it would support transparency.
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

Under 32bit's save as options I only have the following ...
    Photoshop (PSD)
    Large Document Format (PSB)
    Open EXR (EXR)
    Portable Bit Map (PBM;PGM;PPN;PNM;PFM;PAM)
    Radiance (HDR;RGBE;XYZE)
    TIFF (TIF;TIFF)


JPEG only works under 8bit and doesn't save transparency ...
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

Oh oops! I'll re-install Photoshop CS3 right now.
  • wfcamb
  • Student
  • Student
  • User avatar
  • Posts: 77
  • Loc: Louisiana, USA

Post 3+ Months Ago

Yeh, PNG transparency doesn't work in most IE browsers.. ;) GIF is usually the thing to use for all browsers, but I'm kinda' like you.. I can't get the thing to look smooth.. :p If you go to Save For Web, there should be, in the options of GIF, a drop-down menu that allows you to choose an exact properties type of thing.. Don't remember exactly what it's called or how to explain it to you, but it basically makes it smoother. The only thing about it, you have to have a matte with it..
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

Ok, check the image below. Does it work?

Image

If it works for all of you, than I'll post the tutorial on how I made it. If it doesn't work, than who cares about that tutorial :)

That was made in 8 bit color.

( http://www.imagehosting.com/out.php/i93 ... parent.png )
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

The image you posted works in FF, but not in IE, in IE it has a background colour (white) and in FF the background is transparent ...
  • wfcamb
  • Student
  • Student
  • User avatar
  • Posts: 77
  • Loc: Louisiana, USA

Post 3+ Months Ago

In my IE, it's an off-white background, but yeah... It still has a background in IE.. ;)
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

Try the following

Code: [ Select ]
<html>
<head></head>
<body bgColor="red">
<!-- This DIV is the target container for the image. -->
<DIV ID="oDiv" STYLE="position:absolute; left:140px; height:400; width:400;
   filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
   src='http://www.imagehosting.com/out.php/i937855_transparent.png', sizingMethod='scale');" >
</DIV>
</body>
</html>
  1. <html>
  2. <head></head>
  3. <body bgColor="red">
  4. <!-- This DIV is the target container for the image. -->
  5. <DIV ID="oDiv" STYLE="position:absolute; left:140px; height:400; width:400;
  6.    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
  7.    src='http://www.imagehosting.com/out.php/i937855_transparent.png', sizingMethod='scale');" >
  8. </DIV>
  9. </body>
  10. </html>

Post Information

  • Total Posts in this topic: 24 posts
  • Users browsing this forum: No registered users and 22 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.