Preserve only the shadows and highlights to be overlaid another images? [duplicate]

Question

I would like to create a mockups of custom flags "on-the-fly" on a website I'm working on. I thought one reasonable way to do that would be to take an image of a flag such as below, preserve/cut only the shadows and highlights, and then add that to a semi-transparent layer above the image I want to appear on the flag thus giving it a little faux depth.

However, every attempt I've made, mostly with the "Color Range/Shadows" selection too have not been sufficient. Is there a better way?

(not looking for PS plugins, mapping, etc. as again the mockup layering will be done on the fly in a web browser)

Answer 1

You have blend modes in CSS.

So, do not do that to that image.

Import, pull or load a new image of the same size and use Multiply Blend mode on it.

https://duckduckgo.com/?q=Css+Blend+Modes

Here is an example using the image as a background on a simple object.

Of course, you need to cut the excess fat on your image (the white frame)

https://jsfiddle.net/pnx45wvs/

Tweak your flag, for example playing with levels, so you have a cleaner image, with deeper shadows.

Experiment with other blending modes and try to add highlights using a new layer.

Answer 2

1. Make a layer on top of the source image with black color fill
2. Add a layer mask
3. Alt click the layer mask thumbnail
4. Paste the source image there
5. Image > Adjustments > Invert ...because in masks, black color is removed and white is retained.
6. Click any other layer to get out of the layer mask
7. Click the layer mask thumbnail again to select it and use Image > Adjustments > Levels (or curves) to adjust the image to fit your needs.
   • You'll likely want to move the black arrow under Input levels: to the right a bit to get rid of excess and that'll probably do it.