Jump to content

convert grayscale image into "gray-and-alpha" imag

Recommended Posts

Is there an easy way to convert a grayscale image into a "gray-and-alpha" image where the resulting PNG would look exactly the same when shown over a white background, but would also work over colored backgrounds too?

For example, if there's a pixel in my image with RGB #808080, I want to turn that pixel into RGB 000000 with alpha=80 hex. (assuming alpha=80 over a white backgorund is in fact the visual equivalent of RGB #808080)

Here's more info about why I'm trying to do this.

I'm trying to build reusable PNGs to enable a web app to replicate Windows Vista's "blurry drop shadow" effect around the edges of windows. I want to put the same effect inside a web page to raise foreground objects against the background.

It's easy to get (via screenshot of a Vista window against a white background and cropping until I have only the shadow) a black-and-white version of the shadow. But now I'd like to take that and turn white into alpha so that I can display the shadow against any background.

I created PNGs for the sides of the shadow by doing this:

1. creating a new 13x2 pixel image

2. pasing the pasting the 13x1 pixel shadow PNG into half of the new image, leaving the other half transparent.

3. creating a new layer and coloring it white, and putting it underneath the main layer

4. for each of the 13 pixels, setting color to black and pencilling pixels one by one into the second line of pixels, eyeballing the alpha value to visually match the brightness of the other row of pixels I copied from the screenshot.

5. save the second row of alpha-enabled pixels to a new 13x1 PNG

This process was annoying but not too hard for the sides since they are only 1 pixel high or wide. But for the corners, that's 100+ pixels and will drive me nuts to eyeball it. I'm sure there's gotta be a better way. Any ideas?

Alternatively, I guess I could abandon the screenshot approach and just draw a circular gradient or apply a blur to a circle to get the corners. But for now since I already have a perfect black-and-white example I was wondering if it'd be easier to convert to black-and-alpha.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...