Editing Opacity and Blending Parameters

The opacity and blending controls for each object appear both in the Properties tab of the Inspector, and in the default HUD for any selected object.

Figure. HUD and Inspector showing blending controls.

Opacity

By layering together objects with varying opacities, you can merge them together in ways not otherwise possible. For example, if you have two full-screen background images that you want to use together, you can set the opacity of the object in front to 50%, allowing the object in back to show through.

Figure. Canvas window showing the effect of decreasing an object's opacity.

You can overlap as many objects as you want, and by varying their opacities, selectively reveal objects in the back.

To change an object’s opacity
Do one of the following:
  • Adjust the Opacity slider in the Properties tab.

  • Adjust the Opacity slider in the HUD.

    Note: Some objects, such as text and shapes, have additional opacity parameters in their respective tabs in the Inspector. For example, setting a shape’s Opacity value in the Properties tab and setting its Opacity value in the Style pane are separate controls that have multiplicative effects. In other words, if Opacity is set to 50% in the Properties tab, then set to 50% in the Shape Style pane, the result opacity for the text is 25%.

Blend Modes

While the Opacity parameter simply defines a uniform level of transparency for an object, the blend modes allow you many more creative options to control how the overlapping images interact, based on the colors in each object. By default, each object’s blend mode is set to Normal, so that changes to an object’s opacity uniformly affect every part of the image equally.

Blend modes can create transparency in an object regardless of the setting of its Opacity parameter. This is because the pixels of an image with a selected blend mode are combined with the pixels of any objects lying immediately below in the Canvas. For example, if you overlap two objects, then set the blend mode of the top one to Screen, the darker areas of the screened image become transparent, while the lighter areas remain more solid, resulting in the following image:

Figure. Canvas window showing two objects blended using the Screen blend mode.

Important: The transparency created by most of the available blend modes only affects how an object combines with overlapping objects underneath. These blend modes do nothing to affect an object’s alpha channel. For information about blend modes that do affect an object’s alpha channel, see Blend Modes That Manipulate Alpha Channels.

Each blend mode combines objects in different ways. For example, setting the top object’s blend mode to Multiply yields a result opposite to that of the Screen blend mode, as the darker areas of the image remain solid, and the lighter areas become transparent.

Figure. Canvas window showing two objects blended using the Multiply blend mode.

Blend modes only affect the combination of an object with the objects below it. Any objects appearing above have no effect on this interaction, even if the object is transparent. In the following example, the text objects on the top level have no effect on the blended images below.

Figure. Canvas window showing an object above the blended layers.

For overlapping layers with different blend modes, the bottommost pair of objects is combined first, and that combination then interacts with the next object up, and so on until all overlapping objects have been combined for the final image. In this case, each object with a specified blend mode only interacts with the image below it, whether that image is a single object or a pair of objects that have been blended together.

Each of Motion’s blend modes works in conjunction with the Opacity parameter to alter the interaction between the foreground and background objects. Adjusting an object’s opacity lessens the blending effect that is assigned to it, even as it reduces that object’s visibility. This allows you to customize any blend mode to better suit your needs.

Blend modes only affect overlapping objects, and have no interaction with your project’s background color. If you specify a blend mode for an object that doesn’t overlap anything, that object remains as it was before.

To change a selected object’s blend mode
Do one of the following:
  • Choose an option from the Blend Mode pop-up menu in the HUD.

  • Choose an option from the Blend Mode pop-up menu in the Properties tab.

  • Choose Object > Blend Mode, then choose an option from the submenu.

  • Display the Blend Mode column in the Layers tab, then choose an option from an object’s Blend Mode pop-up menu.

  • Control-click an object in the Canvas, then choose an option from the Blend Mode submenu in the shortcut menu.

  • Control-click an object in the Layers tab or Timeline layers list, then choose an option from the Blend Mode submenu in the shortcut menu.

Preserve Opacity Option

The Preserve Opacity checkbox allows you to limit an object’s visibility to areas of the Canvas where the object overlaps nontransparent regions of other objects. For example, you might place two overlapping objects into your project, as shown below:

Figure. Canvas window showing overlapping objects with Preserve Opacity turned off.

If you turn on Preserve Opacity for the Dolphin object in front, the result is this:

Figure. Canvas window showing overlapping objects with Preserve Opacity turned on.

The only area of the Dolphin object that is visible is the area that overlaps the sea life picture object behind it. At first, this may not appear to be very exciting, but the Preserve Opacity checkbox can be used in combination with the opacity and blend mode to create some very interesting effects.

Note: The object with the enabled Preserve Opacity parameter takes the opacity value of the object beneath it in the composite stack.

Preserve Opacity is an easy way to selectively reveal part of an object. In this example, by setting the blend mode of the top color wash layer to Exclusion, you get the resulting image:

Figure. Canvas window showing overlapping objects blended using Exclusion.

By selecting the Preserve Opacity checkbox for the color wash layer on top, only the overlapping parts are displayed, and the superimposed image only affects the Dolphin layer.

Figure. Canvas window showing blended objects with Preserve Opacity turned on.
To turn on Preserve Opacity
  • Turn on an object’s Preserve Opacity checkbox in the Properties tab.

Using Blend Modes

Each of the available blend modes presents a different method for combining two or more images together. Blend modes work in addition to an object’s alpha channel and opacity parameter.

To understand the descriptions of each blend mode in this chapter, it’s important to understand that blend modes mix colors from overlapping images together based on the brightness values within each color channel in an image. Every image consists of red, green, blue, and alpha channels. Each individual channel contains a range of brightness values that define the intensity of each pixel in the image that uses some of the channel’s color.

The effect that each blend mode has on overlapping objects depends on the range of color values within each object. The red, green, and blue channels within each overlapping pixel are mathematically combined to yield the final image.

These value ranges can be described as blacks, midrange values, or whites. These regions are loosely illustrated by the chart below.

Figure. Diagram showing the range of values from black to white.

For example, the Multiply blend mode renders color values that fall into the white areas of an image transparent, while the black areas of the image are left alone. All midrange color values become translucent, with colors falling into the lighter end of the scale becoming more transparent than the colors that fall into the darker end of the scale.

Group Blend Modes

Blend modes work differently depending on whether they’re used with groups or layers. In particular, the Pass Through blend mode is available only for groups.

Pass Through

When a group is set to Pass Through, each object is individually blended with all objects and groups that appear underneath it in the Layers tab. In this example, the Swirls object is set to Stencil Luma, and the Fishes object is set to Add.

Figure. Layers tab showing a group set to Pass Through blend mode.

With the enclosing group set to Pass Through, the Swirls object stencils all other objects underneath it, including the Gradient object in the bottom group. The result is that all objects are stenciled against the background color. The Fishes object is likewise added to the combined stack of objects.

Figure. Canvas window showing a group set to Pass Through blend mode.
Normal

When a group is set to Normal, the layers nested within that group can only be blended with one another. Objects nested within that group do not blend with objects in other groups beneath it in the Layers tab.

In this example, the Fishes and Swirls objects in the topmost group are only blended with themselves when the topmost group is set to Normal.

Figure. Layers tab showing a group set to Normal blend mode.

The Gradient object in the bottom group is left unaffected, although the transparency in the top group caused by the combination of the Add and Stencil Luma blend modes reveals it in the background.

Figure. Canvas window showing a group set to Normal.
Other Blend Modes

When you set a group to any of the other available blend modes, each layer nested within that group is blended according to its blend mode. The resulting image is then blended with the groups underneath, according to the selected blend mode for that group. In this example, the topmost group is set to Multiply.

Figure. Layers tab showing one group set to Multiply.

As a result, the combination of the Added Fishes and the Stenciled Swirls objects is multiplied with the Gradient object in the bottommost group.

Figure. Canvas window showing groups multiplied together.

Object Blend Modes

The following section describes how blend modes affect individual objects. All blend modes are presented in the order in which they appear in the Blend Mode pop-up menu.

About the Examples in This Section

Most of the examples in this section are created using the following two reference images. The resulting “Mondrian Monkey” illustrates how differently the color values from each image interact when using each blend mode. When examining the results, pay particular attention to the white and black areas of the colored squares, as well as the highlights and shadows in the monkey. These show you how each blend mode treats the whites and blacks in an image.

The other brighter and darker colors serve to illustrate each blend mode’s handling of overlapping midrange color values. The yellow, gray, orange, and blue squares, in particular, all have very different color and luminance values that contrast sharply from example to example.

Figure. Two source images: a collection of colored boxes and a photo of a monkey.

Important: Depending on the blend mode, layer and group ordering may or may not be important. Certain blend modes behave differently depending on which image is on top.

Normal

The default for objects. The only transparency in an object set to Normal is caused by its Opacity parameter or by an alpha channel that is assigned to it.

Subtract

Subtract darkens all overlapping colors. Whites in the foreground image go black, while whites in the background image invert overlapping color values in the foreground image, creating a negative effect.

Blacks in the foreground image become transparent, while blacks in the background image are preserved.

Overlapping midrange color values are darkened based on the color of the background image. In areas where the background is lighter than the foreground, the background image is darkened. In areas where the background is darker than the foreground, the colors are inverted.

The order of two objects affected by the Subtract blend mode is important.

Figure. Canvas window showing the boxes and the monkey blended using Subtract blend mode.
Darken

Darken emphasizes the darkest parts of each overlapping image. Whites in either image allow the overlapping image to show through completely. Lighter midrange color values become increasingly translucent in favor of the overlapping image, while darker midrange color values below that threshold remain solid, retaining more detail.

The order of two objects affected by the Darken blend mode does not matter.

Figure. Canvas window showing the boxes and the monkey blended using the Darken mode.

Suggested uses: The Darken blend mode is useful for using one image to texturize another selectively, based on its darker areas. You can also use Screen, Color Burn, and Linear Burn for variations on this effect.

Figure. Practical example of Darken blending.
Multiply

Like Darken, Multiply emphasizes the darkest parts of each overlapping image, except that midrange color values from both images are mixed together more evenly. Progressively lighter regions of overlapping images become increasingly translucent, allowing whichever image is darker to show through. Whites in either image allow the overlapping image to show through completely. Blacks from both images are preserved in the resulting image.

The order of objects affected by the Multiply blend mode does not matter.

Figure. Canvas window showing the boxes and the monkey blended using the Multiply mode.

Suggested uses: The Multiply blend mode is particularly useful in situations where you want to knock out the white areas of a foreground image and blend the rest of the image with the colors in the background. For example, if you superimpose a scanned sheet of handwritten text over a background image using the Multiply blend mode, the resulting image becomes textured with the darker parts of the foreground.

Figure. Practical example of Multiply blending.
Color Burn

Color Burn intensifies the dark areas in each image. Whites in the background image replace the foreground image, while whites in the foreground image become transparent. Midrange color values in the background image allow midrange color values in the foreground image to show through.

Lighter midrange color values in the background image allow more of the foreground image to show through. Darker midrange values in all visible overlapping areas are then mixed together, resulting in intensified color effects.

The order of two objects affected by the Color Burn blend mode is important.

Figure. Canvas window showing the boxes and the monkey blended using the Color Burn mode.
Linear Burn

Similar to Multiply, except that darker overlapping midrange color values are intensified, like Color Burn. Progressively lighter color values in overlapping images become increasingly translucent, allowing darker colors to show through. Whites in either image allow the overlapping image to show through completely.

The order of two objects affected by the Linear Burn blend mode does not matter.

Figure. Canvas window showing the boxes and the monkey blended using the Linear Burn mode.
Add

Add emphasizes the whites in each overlapping image and lightens all other overlapping colors. The color values in every overlapping pixel are added together. The result is that all overlapping midrange color values are lightened. Blacks from either image are transparent, while whites in either image are preserved.

The order of two objects affected by the Add blend mode does not matter.

Figure. Canvas window showing the boxes and the monkey blended using the Add mode.

Suggested uses: The Add blend mode is useful for using one image to selectively texturize another, based on its lighter areas such as highlights. You can also use Lighten, Screen, Color Dodge, and Linear Dodge to create variations of this effect.

Figure. Practical example of Add blending.
Lighten

Lighten emphasizes the lightest parts of each overlapping image. Every pixel in each image is compared, and the lightest pixel from either image is preserved, so that the final image consists of a dithered combination of the lightest pixels from each image. Whites in both images show through in the resulting image.

The order of two objects affected by the Lighten blend mode does not matter.

Figure. Canvas window showing the boxes and the monkey blended using the Lighten mode.
Screen

Like Lighten, Screen also emphasizes the lightest parts of each overlapping image, except that the midrange color values of both images are mixed together more evenly.

Blacks in either image allow the overlapping image to show through completely. Darker midrange values underneath a certain threshold allow more of the overlapping image to show. Whites from both images show through in the resulting image.

The order of two objects affected by the Screen blend mode does not matter.

Figure. Canvas window showing the boxes and the monkey blended using the Screen mode.

Suggested uses: The Screen blend mode is especially useful for knocking out the blacks behind a foreground subject, instead of using a Luma Key. It’s mainly useful when you want the rest of the foreground subject to be mixed with the background image as well, based on its brightness. It’s good for glow and lighting effects and for simulating reflections. You can also use the Add, Lighten, and Color Dodge blend modes to create variations of this effect.

Figure. Practical example of Screen blending.
Color Dodge

Whites in either the foreground or background image are preserved in the final image. Blacks in the background image replace the foreground image, while blacks in the foreground image become transparent.

Midrange color values in the background image allow midrange color values in the foreground image to show through. Darker values in the background image allow more of the foreground image to show through. All overlapping midrange color values are mixed together, resulting in interesting color mixes.

Reversing the two overlapping images results in subtle differences in how the overlapping midrange color values are mixed together.

Figure. Canvas window showing the boxes and the monkey blended using the Color Dodge mode.
Linear Dodge

Similar to Screen, except that lighter midrange color values in overlapping regions become intensified. Blacks in either image allow the overlapping image to show through completely. Whites from both images show through in the resulting image.

The order of two objects affected by the Linear Dodge blend mode does not matter.

Figure. Canvas window showing the boxes and the monkey blended using the Linear Dodge mode.
Overlay

Whites and blacks in the foreground image become translucent and interact with the color values of the background image causing intensified contrast. Whites and blacks in the background image, on the other hand, replace the foreground image.

Overlapping midrange values are mixed together differently depending on the brightness of the background color values. Lighter background midrange values are mixed by screening. Darker background midrange values, on the other hand, are mixed together by multiplying.

The visible result is that darker color values in the background image intensify the foreground image, while lighter color values in the background image wash out overlapping areas in the foreground image.

The order of two objects affected by the Overlay blend mode is important.

Figure. Canvas window showing the boxes and the monkey blended using the Overlay mode.

Suggested uses: The Overlay blend mode is particularly useful for combining areas of vivid color in two images.

Figure. Practical example of Overlay blending.
Soft Light

Soft Light is similar to the Overlay blend mode. Whites and blacks in the foreground image become translucent, but interact with the color values of the background image. Whites and blacks in the background image, on the other hand, replace the foreground image. All overlapping midrange color values are mixed together, creating a more even tinting effect than the Overlay blend mode.

The order of two objects affected by the Soft Light blend mode is important.

Figure. Canvas window showing the boxes and the monkey blended using the Soft Light mode.

Suggested uses: The Soft Light blend mode is useful for softly tinting a background image by mixing it with the colors in a foreground image.

Figure. Practical example of Soft Light blending.
Hard Light

Whites and blacks in the foreground image block the background image. Whites and blacks in the background image, on the other hand, interact with overlapping midrange color values in the foreground image.

Overlapping midrange color values are mixed together differently depending on the brightness of the background color values. Lighter background midrange values are mixed by screening. Darker background midrange values, on the other hand, are mixed together by multiplying.

The visible result is that darker color values in the background image intensify the foreground image, while lighter color values in the background image wash out overlapping areas in the foreground image.

The order of two objects affected by the Hard Light blend mode is important.

Figure. Canvas window showing the boxes and the monkey blended using the Hard Light mode.
Vivid Light

Vivid Light is similar to the Hard Light blend mode, with two exceptions. The first is that midrange color values are mixed together more intensely. The second is that whites and blacks from either overlapping image are preserved in the end result.

Note: Some dithering may result in overlapping areas of solid white and solid black.

Overlapping midrange color values are mixed together differently depending on the brightness of the background color values. Lighter midrange values become washed out, while the contrast of darker midrange color values is increased. The overall effect is more pronounced than with the Hard Light blend mode.

Reversing the two overlapping images results in subtle differences in how the overlapping midrange color values are mixed together.

Figure. Canvas window showing the boxes and the monkey blended using the Vivid Light mode.
Linear Light

Linear Light is similar to the Hard Light blend mode, except that overlapping midrange color values are mixed together with higher contrast. Whites and blacks in the foreground image block the background image. Whites and blacks in the background image, on the other hand, interact with overlapping midrange color values in the foreground image.

Overlapping midrange color values are mixed together. Lighter background colors brighten the foreground image, while darker colors darken it.

The order of two objects affected by the Linear Light blend mode is important.

Figure. Canvas window showing the boxes and the monkey blended using the Linear Light mode.
Pin Light

Pin Light is similar to the Hard Light blend mode, except that overlapping midrange color values are mixed together differently based on their color value. Whites and blacks in the foreground image block the background image. Whites and blacks in the background image, on the other hand, interact with overlapping midrange color values in the foreground image.

The methods used by the Pin Light blend mode to mix two images are somewhat complex. Overlapping midrange color values are treated differently depending on which of the four regions of the luminance chart they fall into.

  • Lighter and darker areas of the foreground image falling close to the whites and blacks are preserved.

  • Areas of the foreground image falling near the center of the midrange are tinted by the background color.

  • Darker areas of the foreground image in between the blacks and center of the midrange are lightened.

  • Lighter areas of the foreground image in between the whites and the center of the midrange are darkened.

The end result may appear alternately tinted or solarized, depending on the lightness or darkness of the overlapping values. This blend mode lends itself to more abstract effects.

The order of two objects affected by the Pin Light blend mode is important.

Figure. Canvas window showing the boxes and the monkey blended using the Pin Light mode.
Hard Mix

Hard Mix is similar to the Hard Light blend mode, except that the saturation of overlapping midrange color values is intensified, resulting in extremely high-contrast images. Whites and blacks are preserved.

While the order of two objects doesn’t affect the overall look of two images blended using the Hard Mix blend mode, there may be subtle differences.

Figure. Canvas window showing the boxes and the monkey blended using the Hard Mix mode.
Difference

Similar to the Subtract blend mode, except that areas of the image that would be severely darkened by the Subtract blend mode are colorized differently.

The order of two objects affected by the Difference blend mode does not matter.

Figure. Canvas window showing the boxes and the monkey blended using the Difference mode.
Exclusion

Similar to the Difference blend mode, except that the resulting image is lighter overall. Overlapping areas with lighter color values are lightened, while darker overlapping color values become transparent.

The order of two objects affected by the Exclusion blend mode does not matter.

Figure. Canvas window showing the boxes and the monkey blended using the Exclusion mode.

Blend Modes That Manipulate Alpha Channels

The Stencil and Silhouette blend modes let you use a single object’s alpha channel or luma values to isolate regions of background objects and groups.

Note: Similar effects can be accomplished using shape and image masks. In addition, masks may provide you with a greater degree of control, depending on your needs. For more information, see Using Shapes, Masks, and Paint Strokes.

Stencil modes crop out all non-overlapping parts of objects underneath the object used as the stencil. Silhouette modes do the opposite, punching holes in overlapping objects underneath in the shape of the object used as the silhouette.

When working in a 3D group, changes in depth order affect the Stencil and Silhouette blend modes differently. For example, if you have two layers in a 3D group and the upper layer is set to Stencil Alpha or Stencil Luma, the blend mode remains in effect when the upper layer is moved behind the lower layer in Z space. If you have two layers in a 3D group and the upper layer is set to Silhouette Alpha or Silhouette Luma, the blend mode does not remain in effect when the upper layer is moved behind the lower layer in Z space.

Limiting the Effect of Stencil and Silhouette Blend Modes

Whenever you use the Stencil or Silhouette blend modes in a group that is set to the Pass Through blend mode, the resulting effect carries down through every object in every group that lies underneath it in the Layers tab, unless the group that contains it is rasterized. This is a powerful, but not always desired effect, because it prevents you from placing a background group to fill the transparent area.

You can limit the Stencil or Silhouette blend mode to affect only those objects that are within the same enclosing group by setting the group’s blend mode to anything other than Pass Through.

For example, if you set the enclosing group of the two objects in the Silhouette Alpha example to Normal, then add a group underneath containing additional objects, those objects show through the transparent areas created by the silhouetted group.

Figure. Canvas window showing the effect of the Silhouette Alpha blend mode with a third object underneath.
Stencil Alpha

The Stencil Alpha blend mode uses the alpha channel of the affected object to crop out all non-overlapping parts of objects and groups underneath it in the Layers tab.

Figure. Practical example of the Stencil Alpha blend mode.
Stencil Luma

The Stencil Luma blend mode does the same thing as the Stencil Alpha blend mode, but uses the affected object’s luma value to define transparency. Stencil Luma is useful if the object you want to use for cropping has no alpha channel of its own.

Silhouette Alpha

Silhouette Alpha is the reverse of the Stencil Alpha blend mode and is useful for cutting holes in objects underneath.

Figure. Practical example of the Silhouette Alpha blend mode.
Silhouette Luma

Silhouette Luma is the reverse of Stencil Luma.

Behind

The Behind blend mode forces the object to appear behind all other objects and groups, regardless of its position in the Layers tab and Timeline.

If multiple objects or groups are set to Behind, they appear behind all other groups that are not set to Behind, in the order in which they appear in the Layers tab.

Alpha Add

The Alpha Add blend mode works similarly to the Add blend mode, but instead of adding the color channels of overlapping objects, it adds their alpha channels together. Try using this blend mode instead of Motion’s default method of alpha channel compositing for a different treatment of overlapping areas of translucency.

Premultiplied Mix

The Premultiplied Mix blend mode is intended for compositing images that are premultiplied, such as those generated by 3D modeling and rendering software. (A premultiplied image’s red, green, and blue channels are multiplied by the image’s alpha channel.) Premultiplied Mix is useful for images with translucent lighting effects such as lens flares, volumetric lighting, fog and haze effects, and so on.

The Premultiplied Mix blend mode performs an unpremultiply composite—the foreground image is assumed to be premultiplied. Artifacts may appear as a result of unpremultiplying pixels whose RGB and alpha values are very small (resulting in pixels with values of 255). In some cases, the hardware performs bilinear filtering and then the blend mode unpremultiplies the alpha.