I'm trying to reverse engineer a blending mode I've seen on a picture:

This was created by someone else using Adobe's Scene7. Unfortunately, I don't have access to this tool and I also was unable to reproduce it with other softwares.

I just would like to know the type of blending used so I can research its equation. I'm not interested in the warping effect caused by the overlay.

If you look at the top left corner of where the images overlap, you can see just a little bit of the background leaking to the foreground image.

The original images have the same dimensions and can be found below:

Any idea on how to duplicate this effect?

  • The original images can be found here and here. – karlphillip Mar 14 '18 at 23:57
  • 1
    This is a fairly straight-forward task for PhotoShop. What have you tried? – 13ruce Mar 15 '18 at 12:16
  • @13ruce If you roll down the page you'll see I've already answered this question. Thanks for stopping by, though. – karlphillip Mar 15 '18 at 15:07

It is not simply a blending mode.

Displacement Maps in Photoshop offer this ability.




A simple Google search for "Photoshop, warp photo on t-shirt" turns up dozens of tutorials:


  • I am aware of displacement maps and how they work internally. A displacement map filter uses an overlay algorithm to copy the foreground over the background with some transparency rule. That's the part I'm interested in. – karlphillip Mar 14 '18 at 1:21
  • You mean the simple Multiply bending of the dark areas? – Scott Mar 14 '18 at 1:39
  • 1
    @karlphillip actually displacement does no such thing – joojaa Mar 14 '18 at 8:23
  • @joojaa Correct! But I didn't mean it literally, my apologies! When the displacement map filter applies the distortion on the target image using the map, the distorted target image is then copied over the background through a blending technique. So my question is really about the blending process! My C++ implementation of the displacement map filter is available here. Unfortunately, it looks like I'm not going to find such level of mastery over blending modes from the Graphic Design SE site. It was a long shot anyway. Thank you both of you! – karlphillip Mar 14 '18 at 12:03
  • yeah we be artists.. not C++ developers :) – Scott Mar 14 '18 at 12:05

As I originally stated in the question, I am not interested in the warping effect (aka. distortion). I already knew what they were because I've implemented the algorithm for that effect years ago.

To answer my own question, to reproduce the blending effect for that image:

  • Apply a Multiply blend;
  • Uses this result as the background for a Hue blend;

The resulting image will be the same as the one shared on the question. Also, the exact equations for these operations are defined on Compositing and Blending Level 1 (W3C).

For testing purposes, here is a JSFiddle that loads the result of a multiply blend as the background and then executes a luminosity blend. Yes, I said luminosity instead of hue because either the implementation of CSS blend modes hue and luminosity are switched, or the equations and sample images from W3C are.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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