Jump to content

Lighting overlay images

Recommended Posts

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?




Edited by Wipped
Forgot text
Link to comment
Share on other sites

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



  • Like 1
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...