GIF water effects

[Maljonic]

Does anyone know how to make ripply water effects in Fireworks, or whatever, or know of any easy tutorials on making water effects on gifs?

 

[wyrd_fish]

ther's prolly a jva applet out tere that'll do exactly waht you want

 

[Maljonic]

Gif, gif I say!

Actually I been playing around with this a bit this afternoon, it's quite easy to make fading concentric circles that look fairly convincing, I'll have to have a go at ripples.

Did you mean you can use Java in conjunction with gifs?

I know there stuff at there that will do it for me, I just want to have a go at doing the whole thing myself.

 

[wyrd_fish]

i meant there may be a java applet that will do teh effect

i assume you want it animated

 

[Maljonic]

Yes, I should have mentioned that really.

 

[Jonty]

Hi Maljonic

Because GIF files can only support a palette of 256 colours I doubt any animated ripple effect would really look that good. You are thus left with four options:

1. Try and find a program that produces animated ripples and see what the effect looks like (I don't recall any such programs myself, not even in Animation Shop or the likes).
2. Just use a 'proper' paint program, like Paint Shop Pro or Photoshop, and produce a static ripple effect and save as a PNG or JPEG.
3. Search for and use a Java applet which can produce a ripple effect on any given image (I would strongly advise against this, though, as such uses of Java are likely to put people off visiting your site as it's fairly resource intensive and if you don't have it installed you won't see the effect anyway).
4. Think fo something else

Personally I'd go for option two, but that's just me.

Kind Regards

 

[Shovel]

Oi, Jonty! Fireworks is a perfectly ‘proper’ paint program thankyouverymuch And also rather reasonably priced on Student discount (which gives you a PC and Mac license all at once, which is nice).

OT: To be fair, the colour picker in Fireworks is a touch cack on the PC, since it has a limited palette, and then falls back to the Windows system colour picker (which we all know is a piss poor excuse for a joke). Of course, the Mac colour picker is arguable as good as the one in Photoshop, so no such issue exists…*ahem.

As for Maljonic's issue: As Jonty says, .gif images don't have a large enough colour palette to produce a good effect. If you really want to be clever, producing the .gif ripple effect, but do the whole thing in greyscale. You should find this preserves enough smoothness. Then use some CSS to position the ripple image over the top of whatever it is that you want to ‘ripple’ and use the CSS3 opacity property to make your greyscale image semi-transparent, allowing the image underneath to show through and give texture.

Before Fatty dives in and accuses me of losing my design-oriented mind, I should stress that I do not condone doing this on a production site, for the following reasons:
01. Opacity support in browsers is small (or messy, in the case of IE).
02. The effect will look like turd no matter how nifty the implementation is.
03. Goto 02.

 

[Maljonic]

Thanks, I hadn't thought about the opacity thing in CSS, I don't think it wrks at all in Netcape though dose it? I did get a fairly okay effect with a gif, but it's not that good like you and Jonty say. Also I'm not ready to dump Fireworks just yet.

Can Flash animations be transparent, might have a go at that instead?

 

[Jonty]

Hi Maljonic

You can use the following for CSS cross-browser opacity:

/*
Mozilla (e.g. Netscape, Firefox, Mozilla Proper, Camino etc.)
Scale: 0 - 1.0
*/
-moz-opacity:0.5;

/*
Internet Explorer
N.B. The element must have a defined width and height (not verified yet)
Scale: 0 - 100
*/
filter:alpha(opacity=50);

/*
CSS 3
N.B. As yet unsupported
Scale: 0 - 1.0
*/
opacity:0.5;

/*
Safari
N.B. Unable to verify
Scale: 0 - 1.0
*/
-khtml-opacity:0.5;

Note that using proprietary code may upset some validators. Also note that Opera doesn't, last I checked, support opacity, although it will like add support for CSS3 when everything is finalised.

As for Fireworks, I wasn't knocking it! I meant 'proper' in relation to Animation Shop, which is a bit of a scaled down oddity The cross platform licence sounds good, too, Shovel

With regards Flash, es you can have transparent backgrounds, Maljonic

Kind Regards

 

[Shovel]

That's a fair point - Flash could probably do the effect.


And I believe that current versions of Safari (2.0 and 1.3) and Firefox both support the proper CSS3 ‘opacity’ property (as well as their vendor-prefixed test versions). I was fairly sure that Opera supports it too, but will need to check later.