20 November 2013

GIMP's Layer Modes (Somewhat) Demystified – Part 1: Normal to Addition


A reader recently commented that he didn't understand why there are so many layer modes in GIMP and he wondered just what one is supposed to do with all of them. Since I wasn't able to help right off the bat, I decided to do some research and experiment. Figuring stuff out for yourself is fun and I find that it burns in the knowledge. So what follows is the process I went through to try and understand more about layer modes.

First, I created a 900 x 1200 canvas in GIMP divided into six sections: light red, dark red, light blue, dark blue, light green, dark green. I varied the intensities of the colors a bit to make it easier to notice possible differences. The HSV and RGB numbers in each large block indicate the actual color values. On top of each color I put a grayscale gradient with a block of black on the left and a block of white on the right. I merged all of the small color blocks onto a transparent layer to make a test pattern layer above the six-color background. I thought this example would be useful for artists to see how layer modes affect colors.


Color Patterns on Color Blocks
Color Patterns on Color Blocks



Next, I created a 900 x 1200 canvas with a photo of a scarlet macaw on the lower layer and a photo of some roses that I cut out and put on a transparent background on the upper layer. I thought this example would be useful for photographers to see how layer modes affect images.


Roses on Macaw
Roses on Macaw


Then I created a copy of the scarlet macaw photo with a grayscale gradient layer above it running from HSV 0, 0, 20 at the top to HSV 0, 0, 80 at the bottom to show the effects of layer modes on grayscales over color images. I also created a duplicate layer of the scarlet macaw to show the effects of layer modes on images over themselves.


Macaw
Macaw
Grayscale Gradient
Grayscale Gradient


For each of the test images, I changed the layer mode of the upper layer to each mode and saved the result. Since pictures are worth more than any number of words, especially (I'm sure) to the types of people who use GIMP, I've included images in each section below as references. What follows are my observations and thoughts about how to use each layer mode. Feel free to copy any of these images to your desktop so you can load them into GIMP for a closer look.

The layer modes are presented in the order in which they appear in the Mode drop-down menu. Here's a full list with quick links.

Normal Multiply Grain Extract
Dissolve Burn Grain Merge
Lighten Only      Overlay Divide
Screen Soft Light Hue
Dodge Hard Light Saturation
Addition Difference Color
Darken Only Subtract Value



Normal is the default layer mode. It simply shows the topmost visible layer in the Layers list. If there is any transparency on that layer, you will also see anything below it through the transparent areas. You can blend the topmost visible layer with what's below it by adjusting the layer's opacity.


Color Pattern; Mode Normal; Opacity 50%
Color Pattern; Mode Normal; Opacity 50%
Photo Overlay; Mode Normal; Opacity 50%
Photo Overlay; Mode Normal; Opacity 50%



The purpose of the Dissolve layer mode is to dissolve the upper image into the lower one by creating variable-sized and random-looking holes in the upper image. The frequency of the occurrence of these holes is based on the upper layer's opacity (which can be thought of roughly as the percentage of dissolving), each upper pixel's original opacity, and the effect of the layer's mask on each pixel.

If the layer on which Dissolve is applied has no transparent or semi-transparent pixels, you won't see a change in the image until you move the layer's opacity off of 100%. This was true of my two test images.


Color Pattern; Mode Dissolve; Opacity 90%
Color Pattern; Mode Dissolve; Opacity 90%
Photo Overlay; Mode Dissolve; Opacity 80%
Photo Overlay; Mode Dissolve; Opacity 80%


Saul Goode at Gimp Chat provided the following example which illustrates Dissolve well. The bottom layer is pure white. The top layer is a gradient of red that goes from opaque at the top to transparent at the bottom. The mask on the red layer is a gradient that goes from opaque at the left to transparent at the right. Examine the images to see the differences among Normal mode, Dissolve mode at 100% opacity, and Dissolve mode at 50% opacity.


Dissolve Example Layer Dialog
Dissolve Example Layer Dialog
Red Gradient in Normal Mode
Red Gradient in Normal Mode
Red Gradient; Dissolve Mode; 100% Opacity
Red Gradient; Dissolve Mode; 100% Opacity
Red Gradient; Dissolve Mode; 50% Opacity
Red Gradient; Dissolve Mode; 50% Opacity


Thoughts:

I find the effects of Dissolve to be rather jarring because of the sharp transitions between the upper and lower images. Though there may be interesting artistic uses of this method, you might want to further process the image to reduce the sharpness and blend the images better.

However, it occurs to me that the Dissolve layer mode could be used to create an interesting texture effect of one color over another. Since there is no anti-aliasing or feathering of the holes, you could create the density of stippling you like, then create a new layer from what's visible, select the color of the holes, use Select > Featherwith a small number, then either hit Delete and put a colored layer under it or pour a color into the selection.

Example:

To test my texture effect idea, I created a 900 x 1200 canvas with a blue layer over a green layer. I changed the layer mode of the blue layer to Dissolve and set the opacity to 55%. The image on the left is a 50 x 50 cutout scaled up to 1000 x 1000 to show the grain.

Then I created a new layer from visible, used the Select by Color tool to select all green pixels, used Select > Feather with a setting of 3 px, then filled the selection with yellow. The image on the right is a 50 x 50 cutout scaled up to 1000 x 1000 to show the grain.




See the following for examples of using Dissolve mode.



After comparing the HSV and RGB values of the original colors and the final results of using Lighten only, I found that the color of each result is determined by taking the largest value of each of red, green, and blue from the initial colors. For example, if an RGB of 134, 204, 134 is combined with an RGB of 78, 78, 179, the result is RGB 134, 204, 179. Since pure black is 0, 0, 0 and pure white is 255, 255, 255, taking the highest numbers makes the resulting color lighter.


Color Pattern; Mode Lighten Only
Color Pattern; Mode Lighten Only
Photo Overlay; Mode Lighten Only
Photo Overlay; Mode Lighten Only


Observations:

  • It does not matter which layer is on top.
  • Black has no effect on the final result.
  • White results in white.
  • A color lightened against itself has no effect on the final result.
  • Shades of gray serve to lighten the other color. Darker shades of gray lighten less. Lighter shades of gray lighten more.
  • If one layer is grayscale and the other is color, the effect of Lighten only is to desaturate the color layer. That is, if you look at the HSV numbers, only the saturation changes.
  • When two non-grayscale colors are involved, the result is a lighter version of a combination of the two. Since there is no attempt to maintain the hues of the two initial colors, the resulting hue can be quite different from either.
  • The lightening power of Lighten only is not as intense as either Screen, Addition, or Dodge.

Thoughts:

  • Use Lighten only with a grayscale layer and a color layer for lightening (desaturating) the color layer without affecting the hue or value (in general), keeping in mind that if a gray pixel has larger red, green, and/or blue values than the corresponding color pixel, then the resulting pixel will tend toward being gray.


Macaw + Grayscale; Mode Lighten Only; Opacity 50%
Macaw + Grayscale Gradient;
Mode Lighten Only; Opacity 50%



In examining the changes in RGB values when using Screen mode, I noticed that each resulting color had higher red, green, and blue values than either of its initial colors, thereby making the final image lighter. However, the formula involved in computing the result was entirely non-obvious, so I was forced to resort to the user's manual. Here's the equation in English:

Invert color 1. Invert color 2.
Multiply the results.
Divide that result by 255.
Invert that result.


Color Pattern; Mode Screen
Color Pattern; Mode Screen
Photo Overlay; Mode Screen
Photo Overlay; Mode Screen


Observations:

  • It does not matter which layer is on top.
  • Black has no effect on the final result.
  • White results in white.
  • Shades of gray serve to lighten the other color. Darker shades of gray lighten less. Lighter shades of gray lighten more.
  • If one layer is grayscale and the other is color, the effect of Screen is to lighten the color layer without affecting the hue. That is, if you look at the HSV numbers, hue does not change.
  • When two non-grayscale colors are involved, the result is a lighter version of a combination of the two. This means the resulting hue can be quite different than either of the initial hues.
  • The lightening power of Screen is more intense than Lighten only, but not as intense as either Addition or Dodge.

Thoughts:

  • Use Screen with a grayscale layer and a color layer to lighten the color layer without affecting the hue.
  • Use Screen on the upper layer of a duplicated image and vary the opacity to adjust brightening of the lower image without affecting the hue.


Macaw + Grayscale; Mode Screen; Opacity 50%
Macaw + Grayscale Gradient;
Mode Screen; Opacity 50%
Macaw Duplicate; Mode Screen; Opacity 50%
Macaw Duplicate;
Mode Screen; Opacity 50%



Dodging is a photographic printing technique that decreases the exposure for areas of the print that the photographer wishes to be lighter. In examining my result images, I noticed that Dodge increases the values of red, green, and blue above both of the initial values. According to the user's manual, the value of each pixel on the lower layer is multiplied by 256. The result is then divided by 256 minus the value of the corresponding pixel on the upper layer.


Color Pattern; Small Blocks on Top; Mode Dodge
Color Pattern; Small Blocks on Top; Mode Dodge
Photo Overlay; Mode Dodge
Photo Overlay; Mode Dodge
Color Pattern; Small Blocks on Bottom; Mode Dodge
Color Pattern; Small Blocks on Bottom; Mode Dodge
(Gray background represents transparency.)


Observations:

  • Because of the way the equation works, it is important which layer is on top.
  • Black on the upper layer has no effect on the final result.
  • Black on the lower layer results in black.
  • White on either layer results in white.
  • If the upper layer is grayscale and the lower layer is color, the effect of Dodge is to lighten the color layer without affecting the hue until it gets to white. That is, if you look at the HSV numbers, hue does not change until it pegs at white.
  • Color on both layers can result in either a lightening or a hue change, or both.
  • The lightening power of Dodge is more intense than Lighten only, Screen, or Addition.

Thoughts:

  • Use Dodge with a grayscale upper layer and a color lower layer to lighten the color layer without affecting the hue (in general).
  • Use Dodge on the upper layer of a duplicated image and vary the opacity to adjust brightening of the lower image without affecting the hue (in general).


Macaw + Grayscale; Mode Dodge; Opacity 50%
Macaw + Grayscale Gradient;
Mode Dodge; Opacity 50%
Macaw Duplicate; Mode Dodge; Opacity 50%
Macaw Duplicate;
Mode Dodge; Opacity 50%


See the following articles for examples of using Dodge mode.



The Addition layer mode does what its name implies. The red, green, and blue values of the two layers are added together, pegging at white. This results in an overall lightening of the combined image.


Color Pattern; Mode Addition
Color Pattern; Mode Addition
Photo Overlay; Mode Addition
Photo Overlay; Mode Addition


Observations:

  • It does not matter which layer is on top.
  • Black has no effect on the final result.
  • White results in white.
  • If one layer is grayscale and the other is color, the effect of Addition is to lighten the color layer without affecting the hue until it gets to white. That is, if you look at the HSV numbers, hue does not change until it pegs at white.
  • Color on both layers results in a lightening, plus a possible change in hue.
  • The lightening power of Addition is more intense than Lighten only or Screen, but less intense than Dodge.

Thoughts:

  • Use Addition with a grayscale layer and a color layer to lighten the color layer without affecting the hue (in general).
  • Use Addition on the upper layer of a duplicated image and vary the opacity to adjust brightening of the lower image without affecting the hue (in general).


Macaw + Grayscale; Mode Addition; Opacity 50%
Macaw + Grayscale Gradient;
Mode Addition; Opacity 50%
Macaw Duplicate; Mode Addition; Opacity 50%
Macaw Duplicate;
Mode Addition; Opacity 50%



If you have specific uses not mentioned here for any of these layer modes, please leave a comment. I'd love to hear about it.

For another review of layer modes in GIMP along with interesting visuals, see the four-part series at emptyeasel.com.

For information on blend modes in general, independent of the software that implements them, see Wikipedia: Blend modes.

See also:

GIMP's Layer Modes (Somewhat) Demystified – Part 2: Darken Only to Subtract
GIMP's Layer Modes (Somewhat) Demystified – Part 3: Grain Extract to Value
GIMP's Layer Modes (Somewhat) Demystified – Part 4: A Pictorial Comparison
 

33 comments:

  1. Debi, this is excellent, just astonishingly good! It's the Rosetta Stone--the real one, not the software--of layer modes.

    ReplyDelete
  2. Thanks, B! I try to inform (accurately, even, if possible). :)

    ReplyDelete
  3. those 4 parts are so usefull!
    thank you very much for this work :)
    NathL from France

    ReplyDelete
  4. You're very welcome. I'm glad you find the information helpful.

    ReplyDelete
  5. Akkana Peck wrote a scheme plugin in 2005 to illustrate additive vs
    subtractive color addition. I modified it heavily to suit my needs (and
    for fun). You can get it from my website at
    http://dbp-consulting.com/venncolorcircles.scm and put it into your
    scripts directory. For me on linux that would be
    $HOME/.gimp-2.8/scripts. Then it shows up in gimp under
    File/Create/Venn Color Circles. You have a choice of additive or
    subtractive and you get two types of color circles, with additive
    colours (Red Green Blue) like light, or subtractive (Cyan Magenta
    Yellow),like paint. (With light, red+green=yellow, but with paint,
    blue+yellow=green!) It doesn't flatten the layers so you can look and
    see what it's doing and check out the layer modes. It's also extremely
    well commented so you can read it to see how it works or to get a clue
    about how to make your own plugin that does something. Additive puts
    black circles in a layer under the red green and blue circles, and
    Subtractive puts white circles in a layer under the red, green, and blue
    circles.

    ReplyDelete
  6. Very cool. Thanks for sharing!

    ReplyDelete
  7. You're welcome.

    ReplyDelete
  8. I can see that you are putting a lot of time and effort into your site and detailed articles! I am deeply in love with every single piece of information you post here

    Logo maker

    ReplyDelete
  9. It is amazing how different people think, look and work. The most obvious method for me is method 4. Never ever have I thought of method 1. I am a Gimp user since 14 years and never have even seen that option :).

    ReplyDelete
  10. Yes, it is funny. I was completely unaware of method 4 until I started doing some investigation. :D

    ReplyDelete
  11. Ok, followed the steps but get this error every time I try to import:

    Error reading temporary file: [Errno 2] No such file or directory: 'c:\\users\\faithm~1.shi\\appdata\\local\\temp\\tmphwjg8k.svg'

    Then it tells me "Failed to load requested file (path)"

    ReplyDelete
  12. I'm sorry, Daniel, but I don't have any idea. I did a web search on the error message and saw that there are some forum posts about it and that there are several possible causes. Check out inkscapeforum.com. You may find a clue there, or someone there may be able to help you.

    ReplyDelete
  13. Thank You very much!

    ReplyDelete
  14. Excellent description of the steps. I got mine up and running. Thanks!

    ReplyDelete
  15. Thanks I managed to open .eps file. Just that can't save back as .eps. So I'm now testing on converting svg to eps. 1st attempt not successful..

    ReplyDelete
  16. Frederic llante02 July, 2014 07:53

    Hi Daniel I had the same problem because my path variable was not correct I forget to include the bin directory.

    C:\Program Files\gs\gs9.14\bin;C:\Program Files\gs\gs9.14\lib

    ReplyDelete
  17. I created a test document and put a square in it. Then I chose File > Save As, and under the "Save as type" I chose "Encapsulated PostScript (*.eps)". When I hit the Save button I got an "Encapsulated PostScript" popup dialog. I clicked OK and it created an EPS file. I was able to open this saved EPS file in Inkscape. I'm using Inkscape 0.48.

    ReplyDelete
  18. thank you so much!! you save my life :)

    ReplyDelete
  19. You are very welcome, Henry! I'm glad this article was helpful to you.

    ReplyDelete
  20. I have created some shapes on Photoshop and exported it as .eps files, and when i imported them back on inkscape -the same way you describe- they were dealing as an embed photo!

    ReplyDelete
  21. That's a cool and perfectly working guide. Excellent.

    ReplyDelete
  22. disqus_D87XRi0Gy725 August, 2014 17:26

    Excellent, this makes Inkscape even more enjoyable to learn and use, of all my software toys I think I love Inkscape the most. Thank you so much for supplying such a great extension.

    ReplyDelete
  23. Thank you, Dusan. I'm glad you found it useful.

    ReplyDelete
  24. I'm sorry, Omar, but I don't have Photoshop, so I can't really debug this problem for you. I haven't run into the problem you describe myself. You might try http://www.inkscapeforum.com/ to see if anyone there can help you.

    ReplyDelete
  25. How refreshing to look for a solution to my EPS issues on the "internet" and find something that is not only well documented and easy to follow but actually worked!! Thank you!

    ReplyDelete
  26. Alex Standiford27 August, 2014 15:52

    Hey Debi,

    I'm working really hard on getting Gimped! back up and running. I appreciate the mdntion!

    ReplyDelete
  27. You are most welcome. I'm glad you found this tutorial helpful.

    ReplyDelete