Lighting overlay images

[Wipped]

Hi y'all,

 

Im a building a product configurator so that people can compose their own chair.

 

What i do is:

- I take the a photo of the product

- Then i put a color (chosen by the user) over the places it should be colored (see the red image):

 

Now i want to add the lighting effects of the original photo over this one.

So what i want to do is take the following image:

Now i want to make a transparant image to put over the color (red image) so that it looks realistic

 

What i thought i wanted to do is:

- Take the average color of the image

- Make everything thats brighter then the average color a white spot which is transparent based on the difference between the light spot and the average color

- Then do the same with dark spots but then with the color black

 

Can someone help me do this?

Or do you know a different way to achieve a realistic end picture?

 

Thanks,

Wipped

Edited August 10, 2017 by Wipped
Forgot text

[IRON67]

Maybe the simplest way is good enough. Put the red chair-shape as a new layer over the background image (black chair) and play with the Blending Modes in the layer properties.

 

Edited August 10, 2017 by IRON67

[Wipped]

@IRON67 Thanks for the response.

 

The problem is that i need a stand-alone overlay image, which will be rendered over the color in a html canvas with javascript

[IRON67]

1 hour ago, Wipped said:

which will be rendered over the color in a html canvas with javascript

 

Well, then it isn't a problem of Paint.net anymore but of HTML and CSS.

[Ego Eram Reputo]

Wipped still needs an image to be used as a lighting overlay - regardless of how the final image will be constructed.

 

The overlay will be mostly transparent, except for areas of white (highlights) and gray/black (shadows). So what we need to do is remove the base color (i.e. basic black of the example chair) leaving the lighting effect.

 

Here's an excellent tutorial on adding highlighting and shadows

 

 

[NinthDesertDude]

Take the gray chair image. Use Switch Gray to Alpha to remove the white base color beneath it. Use Alpha Threshold to adjust the opacity of the resulting transparent chair. Takes me about a minute.

Switch gray to alpha is available here.

Alpha Threshold is available here.

[Wipped]

Thanks for the reactions guys.

 

I'm still not exactly where i want to be but you brought me quite a bit closer.

 

Will update when i reach the ultimate solution.