: Prepare image as overlay 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.

@Bryan765

Posted in: #AdobePhotoshop #BlendModes #Gimp #Monochrome #Overlay

Due to being a newbie, I can't post more than 2 links. This question has been asked on Adobe forum 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 illuminating image, similar to multiply blend effect.

Questions:


How do I take an image and convert it to this overlay image, such as this?
Does the originating image have to be one color to create the overlay and/or can it be multicolored?
Noticed the sections in the colored images, where black and white sections remain regardless of manipulation. I'd like to do the same.
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 an graphics pro.



I'll break my situation down further..
This image is from the website which allows anyone to apply a color to different parts of 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 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 customer clicked 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..

[![enter image description here][3]][3]

Thanks.

Vote Up Vote Down

Login to post a comment!