Hi Andrea,
We design UI's icons in grayscale (src:
http://jqueryui.com/themeroller/images/icons/icons.png
) so they can be combined with an icon color on the back-end to
generate a colorized icon image. This is done by creating a solid
color-filled image and then setting our icon image as a mask on top of
it. Anything white in the source image will become fully opaque color,
and gray tones will vary in transparency (black being fully
transparent).
Our final icon image is in png8 format, which can have png24-like
alpha channels while still degrading nicely for older versions of
Internet Explorer. In IE, the image will have only 1 alpha channel, so
it's either fully opaque, or fully transparent. This means our icons
need all of their important visual information to be fully white in
the source image. The less-important pixels on the edges can be
feathered out so it looks better in modern browsers.
The end result of the image processing comes out like this:
http://ui.jquery.com/themeroller/images/?new=aa0000&w=256&h=240&f=png&fltr[]=rcd|256&fltr[]=mask|icons/icons.png
-Scott