Page is a not externally linkable
- Code, Content, and Presentation
-- Site Graphics and Multimedia Design
---- gradients


bird - 11:48 pm on Dec 5, 2001 (gmt 0)



  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).


Thread source:: http://www.webmasterworld.com/graphics_multimedia/246.htm
Brought to you by WebmasterWorld: http://www.webmasterworld.com