Gimp Documentation
`
`1 of 7
`
`The Blend Tool
`
`The Blend Tool documentation was contributed by Steve Harvey (ej345@cleveland.freenet.edu)
`
`Introduction
`The Blend tool allows the creation of gradients, or blended slopes of color. It makes
`possible a number of different effects, ranging from dramatic psychedelic poster art, to
`subtle shading effects, to sleek polished chrome and perfectly shaded 3D geometric
`figures. With this versatility comes a certain amount of complexity, of course, and while
`the Blend tool isn't difficult to use, it does require a little time to become familiar with its
`numerous options.
`Where it's at
`The Blend tool may be accessed from the main GIMP toolbar; it looks like a rectangle
`shaded with bands of grey. It is located beneath the Text tool and next to the Bucket Fill
`tool. The Blend tool may also be selected from the right-click Tools menu, or by keyboard
`shortcut ('L' by default).
`Fundamentals
`The Blend tool is used by clicking & dragging between two points, which draws a vector
`defining the direction and width of the blend. Drawing a short line will cause the resulting
`gradient to be a narrow band, with lots of solid color on the edges. Drawing a longer line
`will produce a wider, smoother blend (this behavior does not hold true for the Conical or
`Shapeburst gradients; see the explanation of the Gradient menu item below).
`Blend acts upon an area defined with one of the selection tools, or covers the entire image
`layer if no selection has been defined (although read about the FG to Transparent option
`in the Blend menu item, for an explanation of how the tool can be used to quickly "draw"
`3D solids, lighting effects, etc.)
`The Tool Options dialogue for the Blend tool has more options than any other item in the
`GIMP's toolbox.
`OPACITY
`This slider controls (via a percentage) how opaque or transparent the drawn gradient
`will be when applied to the underlying image. 100% Opacity (the default) will
`totally cover up what's underneath, while 0% is totally invisible (and therefore not
`very useful). Intermediate values can produce a number of interesting effects, such
`as mimicking the luminous glaze effects found in traditional media such as
`watercolor and acrylics (see Examples below for more details).
`The Opacity slider is identical in function to the Opacity control on the Layers
`dialogue. Sometimes it is useful to draw a gradient on its own layer, and adjust the
`Opacity in the Layers dialogue, rather than using the Blend tool's own Opacity
`control. Using a seperate layer allows easier fine-tuning of the blend effect, and
`preserves the original image in case you later change your mind.
`
`OFFSET
`
`https://web.archive.org/web/20000817022351/http://www.gimp.org/core_blend_tool.html
`
`Legend3D, Inc. Ex. 2012-0001
`PRIME FOCUS V. LEGEND3D
`IPR2016-01243
`
`

`
`Gimp Documentation
`
`2 of 7
`
`The Offset slider controls the weight of the foreground color in a drawn gradient. A
`low Offset will have relatively little foreground color, and a wide area of
`surrounding blend. An high Offset will give the foreground color a stronger
`presence, with less surrounding blend area. The Offset control is useful for fine
`tuning lighting & chrome type effects. Offset has no effect when used with the
`Linear and Shapeburst gradient types (see Gradient menu below).
`
`MODE
`Blends may be drawn using one of fifteen modes which determine how the gradient
`will interact with any existing pixels on the same layer. These modes work the same
`as the modes in the Layers dialogue, and are as follows:
`Normal
`New pixels simply overpaint existing pixels, ignoring what's already there.
`
`Dissolve
`When the Opacity of the blend is < 100%, it will be drawn with a speckled effect, similar to
`drybrush effects in painting. If Opacity is 100%, Dissolve mode looks the same as Normal.
`
`Behind
`The gradient will be drawn only on partially or fully transparent parts of the layer, leaving
`opaque pixels intact (think of drawing on the back side of a painted piece of glass). If Behind
`mode is used on a layer with no areas of transparency, nothing will be drawn.
`
`Multiply
`Darkens all pixels of the existing image, increasing the tonal density. Selecting part of an image
`and coloring it with a Multiply blend is a good way to create areas of shadow.
`
`Screen
`Screen: Screen mode is the opposite of Multiply, and lightens the value of existing pixels. It is
`good for creating areas of pale, bleached-out color.
`
`Overlay
`A combination of the Multiply and Screen modes, Overlay will make dark pixels darker and
`light pixels lighter, adding greater contrast to the image.
`
`Difference
`Subtracts the color of the drawn pixel from the underlying color (or vice versa), causing
`dramatic shifts in color. The result is similar to looking at a photographic negative.
`
`Addition
`Addition mode acts by adding the RGB values of the newly drawn pixel to the underlying color.
`The result is similar to Screen mode, and sometimes produces a "clipping" effect which causes a
`loss of tonal detail.
`
`Subtract
`The opposite of Addition, this mode works by subtracting the RGB value of the underlying pixel
`from the newly-drawn color. Subtract mode produces dark, shadowy effects like viewing the
`image through a piece of thick, heavily tinted glass.
`
`Lighten Only
`If the underlying pixel is darker than the new pixel, it will be made lighter. If the underlying
`pixel is lighter than the new pixel, it will be unchanged. Lighten Only mode is similar to Screen
`mode, except Screen lightens all pixels, while Lighten Only just affects those which are darker
`than the target color. Therefore, Screen will typically produce a more noticeable effect.
`
`Darken Only
`
`https://web.archive.org/web/20000817022351/http://www.gimp.org/core_blend_tool.html
`
`Legend3D, Inc. Ex. 2012-0002
`PRIME FOCUS V. LEGEND3D
`IPR2016-01243
`
`

`
`Gimp Documentation
`
`3 of 7
`
`The opposite of Lighten Only. If the underlying pixel is lighter than the new pixel, it will be
`made darker; if the underlying pixel is already darker than the new pixel, it will be left alone.
`Darken Only is similar to Multiply mode, except where Multiply darkens all pixels, Darken
`Only just changes those which are lighter than the target color.
`
`Hue
`
`The hue of the underlying pixel is changed, but its saturation and value are left unchanged.
`
`Saturation
`The saturation level of the underlying pixel (the intensity of the color) is changed; the hue and
`value (luminosity) are left unchanged.
`
`Color
`The hue and saturation of the underlying pixel are changed, while the value is unchanged. Color
`mode is similar to applying an Hue gradient immediately followed by a Saturation gradient.
`
`Value
`Modifies the luminosity of the underlying pixel, without changing hue or saturation.
`
`BLEND
`Selects which method will be used to create the colors of the blend. There are four
`choices:
`FG to BG(RGB)
`The default blending method, this creates a gradient between the current foreground and
`background colors. The effect is similar to taking two dabs of paint and smoothly blending them
`together; mixing red and blue gives a gradual series of purple tones.
`
`FG to BG (HSV)
`Creates a blend between the current foreground and background colors, using the HSV (Hue,
`Saturation, Value) color model. Rather than simply blending the colors together as if they were
`pigments, this method will create a blend of all colors of the spectrum between the foreground
`and background colors. Blending between red and blue with this method produces a nice
`rainbow effect, with orange, yellow, and green in the middle (think of your old pal Roy G. Biv)
`If one or both of the colors are low in saturation (black, white, or grey), this blending method
`will look the same as the RGB blend above.
`
`FG to Transparent
`FG to Transparent: Uses the foreground color as one end of the blend, which gradually fades to
`transparency. This can be used to add a smoothly faded tint to an image. By setting the Gradient
`type to Radial or Square, it offers a quick & dirty way to instantly create nicely-shaded spheres
`or box shapes.
`
`Custom (from editor)
`Draws a gradient based on a selected preset from the GIMP's Gradient Editor (which can be
`accessed with Ctrl-G, or selected from the Dialogs right-click menu). The Gradient Editor is a
`powerful tool with which custom gradients with any number of colors and transparencies can be
`created. It also contains a large number of presets which give a good idea of its capabilities.
`
`GRADIENT
`Nine different gradient "shapes" may be drawn with the Blend tool, as follows:
`Linear
`The default option, the Linear gradient produces a smooth blend angled in the direction of the
`drawn vector. A large distance between the start & end points of the gradient will result in a
`wider area of blended color. The Offset control (see above) has no effect with a linear gradient.
`
`Bi-Linear
`
`https://web.archive.org/web/20000817022351/http://www.gimp.org/core_blend_tool.html
`
`Legend3D, Inc. Ex. 2012-0003
`PRIME FOCUS V. LEGEND3D
`IPR2016-01243
`
`

`
`Gimp Documentation
`
`4 of 7
`
`Looks like two mirror-image Linear gradients placed back to back (i.e. a blend from the FG
`color to BG, then back to FG). Bi-Linear gradients are a good way to draw constructs which
`look like metal pipe.
`
`Radial
`Creates a circular gradient, with the FG color at the center of the circle (first drawn point), and
`the BG color at the circle's perimeter (second drawn point). With an Offset of zero, it produces a
`perfectly-shaded sphere. Higher Offsets look more like a planet with a foggy atmosphere, or an
`oncoming headlight.
`
`Square
`Creates a square-shaped gradient with the FG color at the center. The length of the drawn line
`controls the size of the circle, but the direction of the line is irrelevant: the Square gradient will
`always be drawn with its edges parallel to the edges of the screen. Looks a little like looking
`down on the top of a pyramid with a truncated top, or staring down a ventilation shaft.
`Increasing the Offset results in a larger central area (i.e. a more heavily truncated pyramid or a
`shorter ventilation shaft).
`
`Conical (symmetric)
`Draws a gradient similar to looking down onto a shaded cone. The direction of the drawn vector
`determines the shading of the cone (the foreground color points in the direction of the line
`between the two points). The length of the drawn vector is irrelevant; a Conical gradient will
`always fill the entire selection or layer.
`
`Conical (asymmetric)
`Like looking down onto a cone with one sharp edge (think of a boat rudder, round on one side
`and tapered to an edge on the other). This gradient type is similar to taking a Linear gradient and
`stretching it into a circle or party hat shape, with pure FG color at one edge of the seam and pure
`BG color at the other.
`
`Shapeburst
`The three Shapeburst gradients all neatly create a bevel-like effect around the edges of a
`complex selection (or if there is no active selection, they will fill the entire image layer with a
`blend similar to the Square gradient). Shapeburst is very handy for creating effects like engraved
`lettering or frames around an image. The Shapeburst (angular) option creates an effect like
`raised lettering, with the FG color at the top of the ridge and the BG color at the base.
`Shapeburst (spherical) is rounder, and makes the selection look like a puffy sticker. Shapeburst
`(dimpled) is similar to the angular option, only it looks as if the bevel were recessed into the
`surface, rather than protruding outwards. Since a Shapeburst will fill all available space, the
`direction and distance between the two drawn points of the gradient are irrelevant.
`
`REPEAT
`Causes the drawn gradient to be repeated several times, rather than leveling off to a
`solid color at either edge. Sawtooth wave causes the gradient to repeat in stripes of
`FG to BG, FG to BG, etc. (like several Linear gradients stacked side to side).
`Triangle wave causes the gradient to repeat in a pattern of FG to BG to FG to BG,
`etc. (like several parallel Bi-linear gradients.). Using the Repeat feature with a
`Linear gradient produces a series of colored stripes, while using it with Radial or
`Square gradients results in a number of concentric circles/squares (like an archery
`target). Repeat has no effect with the Conical or Shapeburst gradients.
`
`ADAPTIVE SUPERSAMPLING
`When this check box is enabled, the GIMP will smooth the color transitions to
`reduce "jaggies" and color banding. Adaptive supersampling is mostly useful when
`applied to complex custom gradients created with the Gradient Editor, and even then
`the effect is generally fairly subtle. Adaptive supersampling works by dividing each
`pixel into N x N sub-pixels (where N is determined by the Max depth slider), and
`performing a process similar to anti-aliasing to blend smoothly with surrounding
`pixels. The Threshold slider controls how sensitive this process is to color changes
`between pixels (similar to the Bucket Fill's Threshold control). The effects of
`
`https://web.archive.org/web/20000817022351/http://www.gimp.org/core_blend_tool.html
`
`Legend3D, Inc. Ex. 2012-0004
`PRIME FOCUS V. LEGEND3D
`IPR2016-01243
`
`

`
`Gimp Documentation
`
`5 of 7
`
`Adaptive supersampling can be seen most easily by filling a small-ish area with a
`custom gradient such as Mexican Flag (which contains dramatic color shifts) and
`looking at the result at a high level of magnification. WARNING: Using Adaptive
`supersampling is slower and more CPU-intensive than leaving the feature disabled.
`In particular, setting a high Max depth and a low Threshold, and plotting a gradient
`on a large image, is a reliable way to bring the GIMP to its knees for quite some
`time.
`
`Cheat Sheet
`Action
`Click & drag with first
`mouse button:
`
`Result
`Draws a vector (line segment) defining the start & end
`points of the gradient.
`
`Uses
`The Blend tool has so many combinations of options that it would be difficult to list all of
`its possible applications. For illustrators, Blend may be used to make a flat image
`background more interesting, and to add depth to areas of solid color. Similarly, Blend
`should be given serious attention by web designers or anyone interested in designing user
`interface widgets (buttons, window controls, etc.) with a shaded or 3D look.
`The Blend tool is also of use to anyone doing photo retouching, to add a professional-
`looking polish to an image. Those interested in using the GIMP for image composition or
`creating artwork from scratch will find Blend useful for creating countless effects, from
`sunsets and geometric figures to weird never-before-seen abstract effects.
`Example:
`Example #1 (simple project): A popular trend these days is to design GUIs with interchangable "themes" or
`"skins", to customize the look of an application to fit in with the rest of the user's desktop (playing with such
`customizations is also a convenient way to avoid doing actual work). The .MP3 player X11Amp is a good
`example of this phenomenon, where the appearance of the program can be changed radically by just plugging
`in a different bitmap graphic.
`As you might expect, the GIMP makes it easy to design such gadgets. Let's pretend a programmer friend visits
`us one day, asking us to design some sleek-looking menu graphics for her latest application. Create a new file
`by typing CTRL-N or selecting File -> New. Set the Width to 320, Height 200, and make sure Image Type is
`set to the default of RGB. Our friend's application, whatever it does, has a simple enough interface that it'll fit
`in a fairly small window.
`Choose the Rectangular selection tool (it's in the upper left corner of the GIMP toolbox, or you can get to it
`from the right button pop-up Tools menu, or just type "R"). Click & drag to draw a rectangle that covers about
`a quarter of the image, leaving a margin of around a quarter inch (about 10-20 pixels) from the edge of the
`image. This rectangle will define the space where some particular control or button group will go in the
`application.
`Draw two or three more rectangular selections to represent areas for other sub-controls. To add to an existing
`selection, hold down shift, click at one corner of the new rectangle, release shift, and drag the mouse to the
`other corner of the rectangle. If you don't release shift before you start dragging, it will constrain the selection
`to an equal-sided square (try it for yourself). This dual use of the shift key is confusing at first, but becomes
`second nature after you've done it a few times.
`Keep at it until you're happy with your rectangles, making sure there is a margin of at several pixels between
`rectangles, and from the border of the image on all sides. When you're satisfied, choose Select -> Invert from
`the right-button menu, or just type CTRL-I. (TIP: Keyboard shortcuts in the GIMP are your friend. They take a
`little while to learn, but once you do, they *will* help you work faster and save you the minor distraction of
`hunting for things on a menu or toolbox). As the name suggests, this command inverts the selection, so instead
`of several seperate rectangles, the selected area now covers the entire image, with several rectangular holes cut
`in the middle.
`Choose the Blend tool, set Blend to FG to BG, and pick one of the Shapeburst Gradient types (they all look
`good - each of the three variants gives a slightly different effect. For this project, I like the dimpled variant).
`Using the color picker, select a bright, pale foreground color (or white), and a very dark background color (or
`
`https://web.archive.org/web/20000817022351/http://www.gimp.org/core_blend_tool.html
`
`Legend3D, Inc. Ex. 2012-0005
`PRIME FOCUS V. LEGEND3D
`IPR2016-01243
`
`

`
`Gimp Documentation
`
`6 of 7
`
`just black). With the Blend tool, click and drag a line anywhere within the image - the Shapeburst gradient
`always fills the entire selection, so the length or direction of the line don't matter. Instant chrome trim! (If you'd
`like, you can even hit CTRL-I to re-invert the selection, making your original rectangles active again, and use
`the Pattern Fill option of the Bucket Fill tool to put a nice marble or wood background in the sub-windows).
`Of course, in a real project, you'd have to be more exact in your placement of the rectangles (since the
`application would have to know precisely where to place the menu widgets), but the basic method remains the
`same. This technique also works well for creating image maps or "button bars" for the web, and is a good
`candidate for the GIMP's powerful scripting capabilities (studying and adapting the many Script-Fu examples
`that come with the standard GIMP distribution is a good starting point).
`
`Example:
`Example #2 (more involved project): One day, we receive a phone call from another friend, who is the
`organizational mastermind for a local user group. He explains that the user group is planning a benefit to
`promote the cause of free software, and is in desperate need of someone to create some web page artwork to
`promote the event. The event will feature the usual guest speakers, CD giveaways, etc., but it won't be a boring
`lecture-hall affair; there will also be food, drinks, and dancing to make it a festive, upbeat evening. Our friend
`asks us to design some artwork which reflects the lively spirit of the event, and requests we "use lots of
`gradients" in the artwork (a strange request, but we are up to the challenge).
`Begin by finding a picture which is suitable as a background image for our artwork. This might be a
`photograph of some people dancing, or a "party animal" wildebeest, or something entirely different. The only
`prerequisite is that it should be a photographic image of some sort, rather than a line drawing, so you can get
`the full effect of following this example.
`Once you've got a suitable image, scale it to a managable size - around 400 x 300 pixels. The exact dimensions
`don't matter, but we want something that'll be eye-catching on a web page without being ridiculously large or
`taking forever to load. From the right-click menu, select Image -> Scale, make sure the Constrain Ratio box
`is selected (it is by default), and type 400 into the Width box (assuming the image is wider than it is tall;
`otherwise you may want to set the Height to 400 instead.) The Constrain Ratio checkbox insures the height &
`width of the re-scaled image will remain proportional - you won't inadvertendly get any "spaghetti western"
`effects.
`Next, from the pop-up menu, select Image -> Greyscale, followed immediately by Image -> RGB. This
`changes the image to black & white (if it wasn't already), so we can add colors on top without everything
`looking too busy or crowded.
`The next step is to add an interesting tint or wash to the background image. The Blend tool has its own built-in
`Opacity and Mode controls, but we're going to create the blend on a layer of its own, so it will be easier to
`experiment with different effects, and to preserve the underlying image in case we want to change something
`later on. Call up the Layers & Channels dialogue by selecting Dialogues -> Layers & Channels from the
`pop-up menu (or just type CTRL-L). In the Layers dialogue, right-click on the background layer (highlighted
`in blue) and select New Layer. Name the layer "Gradient", to be nice and organized, and make sure the Layer
`Fill Type is set to Transparent (it should be by default). Hit OK, and a new, completely transparent, layer will
`be created on top of our background image. The new layer should also be highlighted in blue, to let us know it
`is the currently selected layer.
`Click in the title bar of the image once again, and click on the Blend tool to make it active. Double click on
`blend to bring up the Tool Options dialogue if it isn't already visible. Use the color picker in the main GIMP
`toolbox to select nice, bright colors for both foreground and background (red & blue, or green & purple -
`whatever strikes your fancy). Go back to your image and click-drag a line from the upper left corner of the
`image to the lower right. Ack! We've got a nice-looking gradient, but what happened to the underlying image?
`No need to worry. Go back to the Layers dialogue, which should still be open, and move the Opacity slider to
`the left until you have a nice balance between the newly-created gradient and the underlying image (probably
`about 60-80% opacity). If you had used the Opacity control in the Blend dialogue instead, the end result
`would've looked the same, but you could not have done this fine-tuning in real time; you would have had to
`undo and re-draw the gradient each time you wanted a different setting.
`This looks okay as a background for our artwork, but we want something with a bit more pizazz. In the Layers
`dialogue, experiment by setting the gradient layer to each of the different modes. If you want something really
`far-out looking, Dissolve and Difference are good choices. For something a little more restrained, try Screen,
`Overlay, Addition, or Color mode. Note that since the underlying image is in shades of grey, the Hue and
`Saturation modes may not behave as you'd expect; that's because grey doesn't have any hue or saturation - only
`value (luminosity).
`Finally, we want to customize our image with some text, and perhaps a little festive doodling. We'll put these
`elements on their own layer, to make them easier to work with and to keep them from inheriting the
`transparency of our existing "Gradient" layer. Click on the layers dialogue again (or press CTRL-L),
`right-click on the "Gradient" layer, and select New Layer once again. We'll call this layer "Text etc."
`Click on the Text tool in the GIMP toolbox (or just type T), and click in your image, at the upper left point of
`where you want your text to be drawn. In the Text Tool dialogue, Type the word "FREE" in the empty box at
`
`https://web.archive.org/web/20000817022351/http://www.gimp.org/core_blend_tool.html
`
`Legend3D, Inc. Ex. 2012-0006
`PRIME FOCUS V. LEGEND3D
`IPR2016-01243
`
`

`
`Gimp Documentation
`
`7 of 7
`
`the bottom of the window. (We're advertising a benefit for free software, after all, and it's a proven fact that
`people will be attracted to anything that says FREE in large letters. The graphic we're making is for the user
`group web page, so we just want to catch people's eye; the details of the event will be in the html text itself).
`Experiment with clicking on different fonts, changing the point size, etc. until you get something you like
`(pick a fairly heavy font with thick strokes... I used crilleeplain at 120 points, but if you don't have that font on
`your system, charter and courier are also good choices.)
`Click on OK to finalize your choice and place the text into the image. You'll probably want to adjust the
`placement of the text a bit, which you can do by pointing the mouse inside the "marching arts" outlining the
`text, so the pointer turns into a 4-pointed arrow, and dragging the selection around.
`When you've got the text where you want it, click on the Blend tool again (while the text is still highlighted
`with the marching ants). Set the Gradient type to any of the Shapeburst gradients, and click and drag a line
`anywhere within the image. Instant 3D glowing text! When you're happy with the effect, type CTRL-H to
`anchor the text to the layer (you can also use CTRL-T to toggle the marching ants effect on and off - the text
`will still remain as a floating selection; it'll just let you see how things look without the distraction of the
`selection outline).
`The last thing we'll do is add some bright polka-dots to the image to get people in the mood for lots of fun and
`whimsy. In the Tool Options dialogue, set the Blend type to FG to Transparent, and set the Gradient type to
`Radial. Pick a foreground color that goes well with the image so far, and click & drag a line about half an inch
`long somewhere in your image. Repeat the process, with different colored dots, until you're happy with how
`things look.
`Now, we're all ready to send the finished project off for the approval of the user group. First, let's save a
`reference copy of the artwork, with all the layers intact, in case we need to make changes. Right-click on the
`image, and select File -> Save As from the pop-up menu. Make sure the file type is set to "by extension", and
`save it under the name party.xcf.gz The xcf file format is the GIMP's own native format, which must be used
`anytime you want to save a document with multiple layers. The .gz tells the GIMP to gzip the file, to save disk
`space - it will automagically be decompressed when you open the file again, so this is a handy option to be
`aware of (you could also call your file party.xcf.bz2 if your system supports the bzip2 compression method).
`Finally, we want to save the image in a platform-independent format. Since this image is going to go on a web
`site, it will probably end up as a .jpg file, but .tiff files are another good choice for distribution, since the .tiff
`format isn't "lossy" like .jpg. (Note that your copy of the GIMP may or may not have jpeg or tiff support built
`into it - if it doesn't, consult the GIMP FAQ for more information).
`Hit CTRL-L to get back to the Layers dialogue one last time, right click on any of the layers, and select
`Flatten Image from the pop-up. This important step will combine all parts of the image into a single layer. If
`you try to save a multi-layered document as anything other than a .xcf file, it will only save the active layer
`(the one highlighted in blue), and you will also lose that layer's transparency information (this might be handy
`for some uses, but don't do it by accident! Get in the habit of checking your layers dialogue before you save!)
`Finally, go back to the image, do another File -> Save As, and if you've got a net connection, you can even
`select File -> Mail Image from the pop-up menu, and mail your creation off, right from inside the GIMP.
`
`https://web.archive.org/web/20000817022351/http://www.gimp.org/core_blend_tool.html
`
`Legend3D, Inc. Ex. 2012-0007
`PRIME FOCUS V. LEGEND3D
`IPR2016-01243