Announcement

Collapse
No announcement yet.

Screen, Multiply Explained...

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Screen, Multiply Explained...

    ...by a beginner.

    Hi,

    I had trouble understanding what was really going on with those two blend modes when I first started using them. I read some articles, and my basic understanding was that Multiply darkened the layer underneath it and Screen lightened the layer underneath it. But, something was still confusing to me, and I couldn't quite put my finger on it. In hind sight, the source of my confusion was an intuitive feeling that Screen and Multiply were interacting differently with the pixels than Normal blend mode, but I didn't know in what way.

    To understand Screen and Multiply, you first have to understand what's going on when you're using the "Normal" blend mode. With Normal blend mode, if you have a layer with another layer on top of it, and the upper layer is set to Normal blend mode, then the pixels in the upper layer do not interact with the pixels in the lower layer. Instead, the pixels in the upper layer cover the pixels in the lower layer. So, if you have a solid black upper layer, then the lower layer will be completely invisible because each black pixel in the upper layer covers each pixel in the lower layer. The same is true with an upper layer that is solid white: the lower layer will be completely covered by the white pixels. Taking that another step further, if you have a different image in the upper layer than in the lower layer, then the image in the upper layer is what you will see because once again all the pixels in the upper layer cover the pixels in the lower layer, blocking them from view. The end result is that unless part of the upper layer is transparent, which is signified by a checkerboard pattern in PSE, then the lower layer will be invisible.

    You can demonstrate to yourself that's how the Normal blend mode works by pulling up an image in PSE, and then creating a new layer above the background layer. Then click on Edit/Fill/Black. After doing that, you should see only black. Now, try it with white: Edit/Fill/White. Again, you should see only white.

    Hopefully, now you understand how the Normal blend mode works, and that makes it easier to understand how Screen and Multiply are different from Normal. If the upper layer is set to Screen or Multiply, then the pixels in the upper layer will no longer block the pixels in the lower layer from view. Instead, the pixels in the upper layer will interact with the pixels in the lower layer. Screen and Multiply respectively lighten and darken the layer beneath because they cause the pixels in the upper layer to combine with the pixels in the lower layer in such a way that the pixels in the lower layer become lighter or darker. I'll describe just how Screen and Multiply do that below, but the above information may be enough for most people.

    First, I'll attempt to explain how Multiply works. If you have a pixel in the lower layer represented by the RGB color (r1, g1, b1) and a pixel in the upper layer represented by (r2, g2, b2), then when the blend mode is set to Multiply, the components of each RGB color are multiplied together and then divided by 255. So, for example, if the color of the pixel in the lower layer is (180, 100, 110) and the color of the pixel in the upper layer is (120, 200, 220),

    (r1, g1, b1) = (180, 100, 110)
    (r2, g2, b2) = (120, 200, 220)

    then the resulting color is:

    r: (180 x 120)/255
    g: (100 x 200)/255
    b: (110 x 220)/255

    Now, if you rearrange the parentheses, you get:

    r: 180(120/255)
    g: 100(200/255)
    b: 110(220/255)

    That rearranging shows that what you're doing in Multiply mode is multiplying each component of the lower layer by some fraction less than 1, in this case 120/255, 200/255, and 220/255 respectively for each component. Now, if you remember your RGB color representations for black and white, (0,0,0) is black and (255,255,255) is white. So, if you're multiplying each RGB component of a color by a number less than one, then the result is a color numerically closer to (0,0,0), and therefore you're darkening the pixels in the lower layer.

    Screen works in much the same way. Once again, the components of the pixels in the upper layer and the lower layer are multiplied together moving the color closer to (0,0,0), but in this case (0,0,0) is mathematically replaced by (255,255,255). In effect, the origin changes from (0,0,0) to (255,255,255). Therefore, when you multiply the components of the pixels in the lower layer by numbers less than 1, they are moved closer to the origin, which in this case happens to be white, and thus the pixels become lighter.

    I found the above helpful in figuring out how the initial steps work for separating the red, green, and blue channels from an image. When you use the Multiply blend mode for, say, a red layer, RGB(255, 0, 0), that is above the image, then both the blue and green component of every pixel in the image is multiplied by 0, so the resulting value for those two components is 0 for every pixel, and multiplying every red component by 255 and then dividing by 255, is the same as multiplying every pixel’s red component by 1, and so every red component of every pixel remains unchanged. Also, notice if a pixel doesn't have any red in it, i.e its RBG representation is something like (0, 100, 50), then multiplying by (255,0,0) results in (0,0,0), which is black.

    I hope that explanation might be of some value to someone else.
    Last edited by dpnew; 07-23-2004, 07:12 PM.

  • #2
    This explanation cleared up a lot of the confusion I've had on these modes. For me, anyway, a mathematical explanation goes a lot further than general word explanations.

    Does anyone have any sources for math explanations/algorithms for the other blend modes?

    Comment


    • #3
      Hi,

      I think this explanation (actually for GIMP) is the best:

      http://gimp-savvy.com/BOOK/index.html?node55.html

      but I've also seen links to this site posted:

      http://www.pegtop.net/delphi/blendmodes/#colorburn

      however I have no idea what the notation "SHR" and the like mean, and the website author never explains his notation anywhere, so I found the site unintelligible.

      Comment


      • #4
        Thanks! The GIMP site does the trick.

        Comment

        Loading...
        Working...
        X