Previous Next TOC Index Feedback

GUM v.1.0.0


16 

Modes

Modes is a powerful instrument for applying Layers and Paint. There are fourteen different ways of combining layers, and they're all very useful. If you learn how to use Modes, you've learned a lot about computer graphics.

What is modes

Blending modes or Transfer modes can be described as different ways of controlling how the pixels in a foreground layer blend into the background layer(s). Modes is mainly used with layers, but they can also be used more directly as paint modes with the Paint bucket, the Blend tool or any tool which uses Brush Selection. There are 15 different modes in Gimp;

Normal Mode


Extracted pic [1] Normal Mode doesn't do anything special, as you might expect. The normal mode layer covers all other layers, unless there are transparent or semi-transparent areas in it.

Dissolve Mode


Extracted pic [2] Dissolve Mode is actually very similar to Normal Mode. You must move the Opacity slide bar and make the layer or paint transparent to be able to see the effect. When in Normal Mode at 50% opacity, you'll see a smooth semi-transparent surface, Dissolve Mode will produce a dotty, grainy looking surface. Instead of using semi-transparent pixels, Dissolve Mode produces entirely opaque or entirely transparent pixels, 50% of each (if that's the opacity value). This mode creates noise effects similar to grainy film or granite rock. If you want a transparent GIF to look semi -transparent, using Dissolve mode (or Holes in the Image/Alpha menu) is the only way you can achieve something of the kind. As you may know, GIF:s only go two ways - transparent or non-transparent pixels. However, this isn't a great solution. Most likely, your semi-transparent surface (glowing text for example), will look much better with a solid background, if you index it to match the background on your page. Conclusion: This mode is used with semi-transparency, where it divides pixels into wholly transparent or fully solid, according to the level of transparency.

Multiply Mode


Extracted pic [3] Multiply Mode amplifies shadows or dark areas of the image. Multiply is the mode for creating shadows. You may compare it to putting two slides on top of each other on a fluorescent clipping board. As in a slide, white areas are transparent in this mode, and as putting together two slides would - the result is always darker. As to colors, they also react as layers of colored glass (or if you prefer, CMYK color, yellow+magenta=red). The difference between Multiply and Darken Only will be discussed later in this chapter. Conclusion: This mode works with shadow, much like putting two slides on top of each other.

Screen Mode


Extracted pic [4] Screen is the mode for creating highlights in an image, and is in many ways the opposite of Multiply. You may compare it to projecting two slides on a film screen. As you may have understood, this mode depends on light, so black is transparent (just like a black spot on one slide will allow the image on the other slide to show) and the result is always lighter. Accordingly, the darker a layer is, the less it will affect the composite image and vice versa. In Screen mode, white covers all, gray shades get more transparent the darker they get, and color is only visible if the other layer's color permits it. (Now we are talking RGB color, yellow + magenta = white, just as on your computer monitor or television set). For more information on Screen mode, read about the difference between Screen, Addition and Lighten Only further on in this chapter. Conclusion: This mode works with light, much like projecting two slides on the same screen.

Overlay Mode


Extracted pic [5] Overlay Mode is something of a combination of Screen and Multiply. Medium gray is transparent in this mode. The background is the most important layer; the overlay layer is only used for modifying the background. Light and dark areas in the foreground affect the background by intensifying highlights, color or shadows, so white, black or RGB/CMY parts of the background are not affected (you can't intensify the shadow of black, highlight white areas or intensify a color with maximum color value). In this mode all FG colors appear in a paler, more washed-out shade. Overlay color and saturation depend mostly on the background. You can say that the foreground intensifies or modifies the background color; a green FG on a green BG makes the image a bit greener, while a red FG makes the green color slightly less green. Overlay Mode is good for adding shadows and highlights to an image, or changing the color temperature. What it really does is to add information to the existing (brightness) Value in your image, so you can"paint with light". Hue and Saturation are also changed, but add no more than a cold shadow or reddish sunlight would. Conclusion: The Foreground affects the dominating Background by intensifying color, highlights or shadows.

Difference Mode


Extracted pic [6] In Difference Mode, foreground and background pixels have a dramatic effect on each other. Black pixels in either FG or BG are transparent, but as color gets brighter, the effect increases, white being the most powerful difference color (a white pixel always inverts the correspondent pixel). What Difference mode does, is to evaluate corresponding pixels in both FG and BG and calculate the difference between them. Now, if we're talking of grayscale pixels in one of the layers, it's easy to predict the outcome. If for example the foreground pixel is brighter than the one in the BG layer, the background pixel gets inverted, and if it's darker, it keeps its color. A greyish cast is however added to the image - the more the grayscale pixel goes toward white or black, the weaker this shade of gray gets. If the pixels are colored or grayscale in both layers, the result is harder to predict, but it works the same way; |FG-BG|=Outcome i.e the absolute value of the difference between FG and BG, (you count with negative values and dismiss the minus character).

Difference mode is usually very colorful, and can produce psychedelic results, but it is also a powerful tool for telling the difference between two layers. This becomes interesting when you for example want to compare the size, shape and relative position of grayscale masks in different layers. Where the result is black, the layers are identical, and any small difference will appear very clearly in this mode. Conclusion: This mode displays the difference between the RGB-values in the two layers.

Addition Mode


Extracted pic [7] Addition Mode is rather similar to Screen Mode, and is built on the simple principle of adding the RGB values of foreground and background pixels. The result is always lighter and often results in white areas and unsharp edges. Conclusion: This mode adds the foreground RGB-value to the background RGB-value.

Subtraction Mode


Extracted pic [8] Subtraction Mode is the opposite of Addition, and sometimes produce results similar to Difference. Here you subtract the foreground color from the background color - If your background is White (255,255,255), and you subtract Red (255,0,0), the result is (0,255,255) which is Cyan. A white shape in the upper layer against a white background will for the same reason produce a black shape. So far the result is the same as for Difference, but as soon as a foreground value exceeds the background value, the results start to diverge, since what is zero for Subtract becomes a"negative" value for Difference. Conclusion: This mode subtracts the foreground RGB-value from the background RGB-value.

Darken only


Extracted pic [9] Darken only is somewhat similar to Multiply. It is a mode where color can only get darker, but Darken doesn't work like two slides on top of each other. Here foreground and background pixels are compared, and Darken chooses the darkest RGB values in each channel. The result of choosing between a bright red (243,83,47) and a turquoise blue (47,239,201) would be: (47,83,47) - a dark moss green. Had you used Multiply instead, you would have gotten a similar but somewhat darker color (44,77,37) Conclusion: This mode compares the pixels of foreground and background and chooses the lowest RGB-value.

Lighten only


Extracted pic [10] Lighten only is of course the opposite of Darken only. If we choose the same example here, bright red and turqoise, the result would be: (243,239,201) - an eggshell bright beige. Lighten works by choosing the highest value of each pixel pair, and the result is always lighter (similar to Screen). If you'd used Screen instead, you'd have gotten a similar, but somewhat brighter color (246,245,211), and if you had used Addition, you'd have got a similar but much brighter color (255,255,248). Conclusion: This mode compares the pixels of foreground and background and chooses the highest RGB-value.

Hue


Extracted pic [11] Hue mode
makes it possible to change the color of an object without changing brightness or saturation. This mode acts on color alone. Your foreground color is the color you'll get, but you'll keep the general feeling in the image; a loud green on soft dark blue will be translated into a loud yellow on soft dark yellow. White, black or grayscale information in the background is not affected and cannot be tinted. Consider this if you wish to tint a background with complementary colors next to each other. Fuzzy blue dots on yellow means that somewhere around the edges there will be gray (on your screen, transparent blue on top of yellow doesn't turn green, it gets gray!), and your dots will look much like frog's eggs or germs in a microscope. Note that you cannot shift a color to grayscale in this mode either. Grayscale information in the foreground comes out as a scratchy red. Conclusion: The composite image uses the Background for Value and Saturation information, while the Foreground is only used for determining Hue.

Saturation


Extracted pic [12] You can use any color you like in the foreground, background color doesn't change, only saturation, which assumes the same saturation as the foreground color. The hue can't be changed, except for pure grayscale background which becomes shades of red if the foreground contains color. Because you can change saturation, this mode is often used with gray paint because this desaturates the background. Note, using black, white or gray makes no difference, what matters is that those colors have no saturation. Conclusion: The composite image uses the Background for Hue and Value information, while the Foreground is only used for determining Saturation.

Color


Extracted pic [13] Color Mode will change both hue and saturation in an image. Black or white background pixels are not affected, but all other colors, grayscale or not will assume the hue and saturation of the foreground color. Color mode does not affect the Value (brightness) of the background. The dark and light information is left intact, but not hue or saturation. This is a nice mode for tinting grayscale photos if you want strong, clear colors, for a softer tinting (old photo look) consider using Overlay instead. Conclusion: The composite image uses the Foreground for Hue/Saturation information, while the Background is only used for determining Value.

Value


Extracted pic [14] Value is the same as"Luminosity" in Photoshop. It doesn't change the hue or saturation of the image, but it changes brightness and shadows; i.e the structure or 3D dimension of the image. As opposed to Overlay, this mode can't distinguish a dark red from a bright red, all shadows or highlights disappear from the background, and Value mode can't see grayscale BG at all - because all of these things are associated with Value, and BG value is ignored in this mode. Value is good for correcting overbright/dark colors, or it can be used to transfer patterns or structures into an image, without changing the color of the image. Conclusion: The composite image uses the Background for Hue/Saturation information, while the Foreground is only used for determining Value.

Behind

This Mode is a pure paint-mode, and has as such no function in the Layers dialog. Behind is used with Blend, Paint bucket or in the Brushes dialog. There is no use trying this mode on solid layers, because it only affects transparent or semi-transparent areas. When you paint with Behind, it's like painting on the other side of the layer. If you compare the layer with a wall with windows in it, the Behind paint would be applied to the outside of the house, and only be visible through the windows. Accordingly, if the windows are dirty (semi-transparency), the dirt will show against the Behind color. Conclusion: This is a paint-mode where only transparent areas are affected by your painting (does the opposite of Keep transparent in the Layers dialog)

Comparing pictures in different modes


Extracted pic [15]


Extracted pic [16]

Why are there so few colors in Screen, Addition, and Lighten only?

With pure process colors (CMY or printing ink colors) as back/foreground (Cyan, Magenta,Yellow) shades of that color is the only color you're going to see in Screen, Addition or Lighten mode. The reason for this: Just as White has a maximal RGB-value for all three channels, the RGB value of a process color is maximum for two RGB-channels. As a matter of fact, all RGB colors with max values for two channels are more or less bright versions of a certain process color, no matter what the third value is. So, if you fill a layer with Magenta (255,0,255), all colors in the composite image will end up Magenta. The more green they have in them, the paler the shade will be (until white) Check it out with the color selection dialog! Using pure Red, Green or Blue produces similar results. Since The RGB-colors have max value in one channel, output colors are restricted to those with max values for that channel, e.g. Using Red in a layer means only colors in the red spectrum (from magenta to yellow) are visible in the composite etc. Conclusion: White=max in all three channels - only white is visible, Process colors=max in two channels - only shades of that color are visible, RGB color=max in one channel - only shades of that spectrum are visible.

What is the difference between Screen, Addition and Lighten Only?

Screen, Addition and Lighten may appear very similar, sometimes almost as the same mode, but there are certain important differences. Lighten Only compares the FG and BG RGB-values, and chooses the higher value for each channel. Addition just adds up all values, and thus comes up with a brighter image.

Screen works by mapping the foreground against a background scale from 0-255 in each channel, where the FG pixel maps its value to 0 (black) on that scale. Compare it to putting two scales of equal length on top of each other. The background scale goes from 0 to 255, while the foreground scale goes from x to 255 (x=FG value). The composite value can be found somewhere on the FG scale, and that placement is determined by the other scale. If the background is a grayscale with an Intensity of 100, and the foreground's Intensity is 178, the composite Value can be calculated like this:

The formula for how Screen works: Composite Value = FG + ((255 - FG) x BG) / 255

The most obvious difference between the three modes is that Screen color is darker than Addition, but lighter than Lighten Only. The main (in practice) difference between Lighten Only and Screen is that Screen is brighter, and it allows more shades than Lighten does. This is because Lighten is seldom affected by dark colors, it'll just choose the color that is lighter in all RGB values if there is one. The advantage of Screen vs. Add is that Screen colors don't white out as often as Add (because 255 is often the result when adding up).
Extracted pic [17]

What is the difference between Multiply and Darken Only?

These two modes often result in similar outcome, where Multiply is always a little darker. As you know, Darken chooses the darkest RGB values in each channel to produce its result. You can compare the difference and similarity of Multiply and Darken Only with those of Screen and Lighten only (Subtract would also correspond to Addition, if you inverted the top layer). Multiply is mathematically the opposite of Screen. Where in Screen the foreground value was mapped to zero and up, it is mapped to 255 and down in Multiply. This means that the Foreground value is the lightest possible value, just how dark it's going to be is determined by the Background Value. The algoritm is simple: The Composite Value = FG x (BG/255). For grayscale images, the difference is much more evident. If you take a look at the pictures on the next page, you'll find that Darken Only looks semi-transparent where Multiply looks as transparent as slides. The Multiply Mode is darker and shows a lot more of the background, and in color images, you'll get more color variation (for lighter colors) with Multiply than with Darken Only.
Extracted pic [18]

What is the difference between Color and Hue?

Hue and Color sometimes produce similar results, because in both cases the Foreground controls the composite Hue, and the Background determines Value. The difference consists in what layer controls Saturation. In Hue Mode it's the background, and in Color Mode it's the foreground. Generally, Hue and Value are the most important parameters in an image, and if Saturation is roughly the same in both layers, it'll be hard to tell the difference between Hue and Color Mode. You will however certainly be able to tell the difference if one of the layers is grayscale, or if there is a lot of variation in the saturation of a layer. You can also think of it this way; Color Mode is often used for adding color to a grayscale, in which case it's important that the top layer controls Hue and Saturation, while it must not interfere with the dark/bright values of the background. Hue, on the other hand is often used for changing the existing color of a certain object. In this case you don't want to change the Saturation in the background, because then the object would look very unnatural.


Generated by fmtoweb (v. 2.9c) written by Peter G. Martin <peterm@zeta.org.au> Last modified: 19 May 1998

Previous Next TOC Index Feedback