homepage Welcome to WebmasterWorld Guest from 54.197.171.109
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
Forum Library, Charter, Moderators: not2easy

Site Graphics and Multimedia Design Forum

    
gradients
creating a color-transparent gradient
eagle072169




msg:860736
 10:45 pm on Dec 5, 2001 (gmt 0)

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




msg:860737
 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).

ggrot




msg:860738
 11:48 pm on Dec 5, 2001 (gmt 0)

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




msg:860739
 11:56 pm on Dec 5, 2001 (gmt 0)

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved