gradients

creating a color-transparent gradient

[eagle072169]

I'm trying to create a rectangle with a color gradient ( dark blue ) that fades into transparency.

Anyone have tips on how to do this?

Thanks

[bird]

1. Create a gradient from your color to another color (eg. white) in RGB color space
   
2. Convert the image to indexed color space with only two entries in the color map, with dithering.
   
3. Assign transparency to one of the palette entries.
   
4. Save the result in a suitable file format.
   

I just tried this with the Gimp, and it worked quite nicely. Unfortunately, my version of the Gimp doesn't support transparency for Jpeg files, so I had to save as GIF. If your software does better with Jpegs, try this instead, and compare file sizes (actually, PNG may well give the smallest files, but at least Plugger for Netscape on Linux doesn't seem to support transparency correctly).

You may also have to experiment with the actual color values used in the gradient for best results. Sometimes, only part of the original gradient will get in dithered in a useful way. The solution is to make the gradient wider than your target size, and to crop the solid ends away before saving.

If you save as GIF, it's probably wise to add a few unused palette entries again when you're finished. There used to be browsers out there that got confused with images that have less than 8 or even 16 colors in their palette (not sure if this is still the case, though).

[ggrot]

You might be able to do it if you export into .png format, I know it is theoretically supposed to allow partial transparencies. All the other web image formats allow for only colored pixels and full transparency pixels - nothing in between.

[mivox]

Unfortuantely, ggrot is right... you can fade to white, and then designate white as the transparent color in a gif format graphic, but that will leave you with a jagged edge of not-quite-white pixels down one edge.

AFAIK, PNG is the only web format that supports fade-to-transparency, and the tools that allow you to fully utilize those effects are few and far between. Then, even when you create the fantastic effect, most browsers won't come close to rendering the transparency correctly....

Unless you're needing the effect for a non-web image, in which case there are many ways to do it, depending on your image software.