Due to being a newbie, I can't post more than 2 links. This question has been asked on Adobe forum https://forums.adobe.com/thread/2278171, but not resolved.

I am trying to duplicate an image effect on my site. The sample picture is an image that when a fill is applied below the overlay the image is colored.

The 1st image is the image that has been converted to what looks like a monochrome png… The next are the effect of back lighting the overlay. As you view the image here, it looks like the opacity is 100, not the case. The white background of this web page is an illuminating image, similar to the multiply blend effect.


  1. How do I take an image and convert it to this overlay image, such as this?
  2. Does the originating image have to be one color to create the overlay and/or can it be multicolored?
  3. Noticed the sections in the colored images, where black and white sections remain regardless of manipulation. I'd like to do the same.
  4. Can this conversion be done in Illustrator or only Photoshop?

I've tried converting a color in image to alpha. I've tried from grayscale image too… I'm not getting it, nor am I a graphics pro.

Originating image

I'll break my situation down further… This image is from the website which allows anyone to apply a color to different parts of the object. The greyed image I supplied at the beginning of this post is the image used on the site.

The fill is being applied to this image by applying fill to svg object (drawing of a specific part) that is on the layer (z-index) below the grayscale overlay image, demonstrated in Illustrator in the next image. There is no blending mode applied in css on the web element for svg. (I'll get back to this).

Currently, my websites design tool looks like this. basic svg with a fill.

Took a glove of solid color.

Drew paths and cut/copied the selection from paths to independent layers. I duplicated the layer for each section for as many leather colors I offered. Used the colorize option and changed the hue/sat/light of the leather layer to the color that I needed… So the laces had 1 layer of each color. 11 png transparencies.

I wrote code that would swap the png when a customer clicked the corresponding button color.

This was bad because consider 10 color png x 10 parts is 100 files to be downloaded and loaded into memory. Thus changed to the SVG drawing implementation.

Our team wants to make the image more life like to help customers visualize what they will be getting and complete their purchase.(psychology). Thus, I'm trying to marry the svg+overlay image, minus the 99 files.

So the question is how was that image file prepped for a fill to be applied below? How to do in Gimp or PS?

I did some testing and before working on this solution… I did the same thing but put the image on the lower layer and applied fill to SVGs on top of, with a blend mode of multiply and cut the opacity a bit… It looks good, looking at and looks like the glove, but comparing the brand competitors outcome to mine is a not a contest. The originating image is to the right, I need to take my images and shadows and noise to give it some umph when customers see it…


1 Answer 1


The problem here is that multiplying or overlaying colours onto a greyscale image kills the highlights. In reality, highlights tend towards white regardless of the colour of the object while overlaying a colour onto a greyscale image creates a solid, dark, coloured highlight leading to a flat, fake appearance.

What you need to do is create a second version of your image that is all highlight and overlay this on top of the colour to lighten the highlight areas towards white. The colour layer (set to multiply or darken) is then sandwiched between the highlight layer (on top, set to screen or lighten) and the shadow layer (on the bottom). There are a few ways to create the highlights only image, but curves or levels in Photoshop would be my go-to solution.

The following illustration (which is very rough) should help to illustrate the difference that adding the highlights makes...

enter image description here

It will take a bit of experimentation to get a truly realistic result.

  • Thanks for this answer,looks solid. . Forgive me, which base image did you use? Due to link limit.. I could not include the test image to alter. The main image is one that is finished and works without additional editing. What would be the step - by step with the image I'm linking to below. My apologies if you did. link Commented Feb 16, 2017 at 15:59
  • I just used the B&W image at the top of your question. That linked image adds a few extra hurdles into the process. For instance, you may have to put the embroidery on a separate layer if it can't be changed (or possibly even if it can't). If you have specific issues beyond the scope of this question then it might be worth posting an additional question to address them.
    – Westside
    Commented Feb 16, 2017 at 16:13
  • thanks.. the first image is a production overlay that works if fill is applied below it.. In the second image, the first 2 images from L to R are using the overly image above. I want to start from the last (orange) image. Commented Feb 16, 2017 at 16:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.