Image editing trick so B&W pic can be colored in-browser

[Buttercup]

(-*EDIT to add: Apparently it is much, much easier to do than what I wrote below. Just take your greyscale image, go to Colors -> Color to Alpha -> From: middle grey (808080) to alpha, click that, and wham-o: it's a done deal, and looks the same as the other method I used.-)

So, I'm really excited, I finally figured out how to do something I wanted to, but didn't know how for a long time, and now that I know how, I'm going to share the steps for how it's done with you guys.

Using image editing software such as gimp or photoshop (I use gimp - it's free), I like making a greyscale layer and then coloring the picture in on another layer.

But, I want to be able to combine the two parts in the web browser, and not have to save a new .png for every color combination I want to make/use - to have a greyscale image with transparency and be able to put any color/colored image I want underneath it, so I can mix and match those portions freely, for like backgrounds and stuff, but in a way that looks good/how I want it to.

So, today, after much poking, and prodding, and thinking about what I'd need to do to make it come out -exactly- how I want it to, I figured it out. (Also considering it's a precise set of image-independent steps, it should be scriptable - if one knew how to write scripts in gimp.) Here's how to do it in gimp, it should be similar for other programs (scroll down for a finished example I made which you can play around with):

--------------------
First, make your greyscale image that you want to color. Now, we're going to use that image to make a highlights layer.

Make a new layer underneath your greyscale image layer, fill it with 128/128/128 (hexadecimal #808080) middle grey. Next, set the image layer mode to lighten only. Anything darker than that will be rendered as flat grey. Edit -> Copy Visible (not regular Copy, which only copies the active layer), Paste as -> New Layer, use the Select by Color Tool (deselect antialiasing and set the threshold to 0 so you only get that one shade of grey) select your solid grey, and hit delete/Clear.

Now that you've gotten rid of all the dark parts, go into Colors -> Levels... and set the black point on "Input Levels" as 128. This will make middle grey black and light grey middle grey, while leaving white white.

Next, right click on your higlights layer and "Add Layer Mask" - for that, you want to use a greyscale copy of your layer (it should automatically make the empty portion black).

Now what you want to do, is go back to the image portion of the layer. Select by Color the transparent portion, then invert the selection. Then use a bucket fill and fill the whole selection as white.

Now your highlights portion is complete. Turn the highlights layer invisible for now (click the eyeball by the layer) - we'll turn it on again later.

Next, we want to make a shadows layer. It's almost like doing the highlights layer.

Make a grey (hex #808080) layer underneath your main greyscale layer. Set the main layer mode to darken only - anything light will be set flat grey. Copy visible (this is why we turned the highlights layer off - we don't want to copy that) and paste as a new layer, use the select by color tool to select your solid grey, and hit delete/Clear.

Now that you've gotten rid of all the light parts, go into Colors -> Levels... and set the -white- point on "Input Levels" as 128. This will make middle grey white and dark grey middle grey, while leaving black black.

(As a side note, since both the highlight and shadow areas ignore 128 grey, that will be completely transparent, if you want to deliberately use that color to make completely transparent sections).

Next, right click on your higlights layer and "Add Layer Mask" - for that, you want to use a greyscale copy of your layer (it should automatically make the empty portion black).

-Next-, this part is a little different. With the masked portion of the layer selected, you want to hit Colors -> Invert. This will change the black part to white, middle grey will stay the same, and white will be black. We do this because we want black to show up the most and middle grey the least, and in the layer mask, white is opaque.

Now, go back to the image portion of the layer. Select by Color the transparent portion, then invert the selection. Then use a bucket fill and fill the whole selection as pure black.

Ok! You've got you're highlights and your shadows layer finished. Now all you need to do, is turn the highlights layer visible again (click where the eye was and it'll show up again). Then, turn the main greyscale image invisible. So, with your highlights and shadows layers visible but nothing else, you can save the result as a .png and it will save the varying levels of transparency. And your image is complete.

Now, feel free to put your picture over any background color or image you want without having to save a new image each time!
--------------------

Here is an example I made using this process (the forum background color is close to white, so it looks washed out here):



To see the results in action, right-click and save the above image, as well right-click save as these other two images - http://shintolin.co.uk/images/examplecolored.png and http://shintolin.co.uk/images/examplecircle.png and you can see how it works in your web browser using the following example HTML (save this as an .html file in the same folder on your computer as the example images, then double click on the .html file to open it in your browser):

(*Edit to add: Or I could just put it up and have you click here to see it: http://shintolin.co.uk/images/examplemix.html Do'h! )

[Buttercup]

As I just added to the above post: Apparently it is much, much easier to make colorable greyscale images than what I wrote before. Just take your greyscale image, go to Colors -> Color to Alpha -> From: middle grey (808080) to alpha, click OK, and wham-o: it's a done deal, and looks the same as the other method I used. So... no scripts need to be written, yay!

I figured that out when I was trying to do something else - namely take a colored image and separate it into it's color and black and white components. Again this is so I can mix and match colored and black and white images in-browser. This one doesn't just do lights and darks, but also preserves saturation, so bright colored areas look bright and duller colored areas look dull. I figured it out with one image I had on my hard drive, then decided to use a public domain one for my example to show you guys. To see the finished example, click here: http://shintolin.co.uk/images/examplemonet.html

To separate a color image into it's black and white and color components:

I will call the original/starting image/layer "Monet", because I am using one in my example.

To make the background color layer: Place Monet above a layer with a fully saturated color, for instance red (ff0000). Set Monet's layer mode to Hue. Copy Visible and paste into a new layer.

To make a black and white layer: Take Monet, set the layer mode back to normal, and go to Colors -> Desaturate -> Lightness. Copy Visible and paste as a new layer.

To make a highlights and shadows layer: Take the B&W layer, and do Colors -> Color to Alpha -> From: middle grey (808080) to alpha.

To make a desaturation/greys layer: Take Monet, do Colors -> Color to Alpha -> From: middle grey (808080) to alpha. Take the background color layer and place it above your now partially transparent Monet and set the background color layer's layer mode to Saturation. Make sure those are the only two visible layers, and Copy Visible. Paste as a new layer. Next, place a black layer underneath the new layer. Set the new layer's mode to value, then Copy Visible. Next create another layer and fill it with middle grey, create a layer mask, and with the layer mask selected paste into the layer mask. With the layer mask still selected, do Colors -> invert.

Now, with your highlight and shadows layer and your desaturation/greys layer on top, and your background color layer underneath, with all layer modes set to normal, it should look identical to the original image.

Save a .png with just the highlights and shadows layer and the desaturation/greys layer visible, and save a separate .png with just the background color layer, and you can combine them in your browser.
_________________
Murder Monkey