Blending options

• 4 minutes to read

The Template Editor allows you to not only place one design item on top of another but also to combine them.

Blending options allow you to specify the opacity of the overlaying item and what blending mode should be applied to two images or other items. To change them, click the Design tab and expand the Blending options.

Opacity

Use the opacity slider to specify how transparent the element should be. 100% means that it is completely opaque. You cannot see any pixels under the element. 0% means that the element is completely transparent, therefore, it is invisible.

Blending mode

The normal way to combine elements is to place pixels on top of the underlying element with optional opacity, as discussed above. However, this method is not the only way to blend pixels. When using a different method, blending occurs only if a pixel of the top element is darker than the bottom element. Another mode multiplies the luminance of pixels. These alternative blending modes are used for various tasks, for example, adding the texture of an overlay image to an underlying element.

The Template Editor supports the following blending modes:

• Color Burn
• Color Dodge
• Darken
• Difference
• Exclusion
• Hard Light
• Lighten
• Multiply
• Normal
• Overlay
• Screen
• Soft Light

Note

Adobe Photoshop supports more blending modes. If you have defined a different blending mode in your Photoshop design and imported it into assets, this mode will be skipped in Customer's Canvas.

Let's demonstrate these blending modes on the following two images.

Source image	Overlaying image

This overlaying image has an opacity level of 70%.

ColorBurn

This mode divides the inverted bottom layer by the top layer, and then inverts the result. It is darker than Multiply, with more highly saturated mid-tones and reduced highlights.

ColorDodge

This mode divides the bottom layer by the inverted top layer. It is brighter than the Screen blending mode. The result is an intense color with high contrast, typically with saturated mid-tones and blown highlights.

Darken

This mode creates a pixel that retains the smallest components of the foreground and background pixels. If the pixels of the selected layer are darker than the ones in the layers below, they are kept in the image. If the pixels in the layer are lighter, they are replaced with the tones in the layers below.

Difference

This mode subtracts the bottom layer from the top layer, or vice versa, to get a positive value. In the active layer, a pixel is subtracted from an equivalent pixel in the composite view of the underlying layer, resulting in only absolute numbers.

Exclusion

This mode subtracts the bottom layer from the top layer or vice versa to get a positive value. The subtraction never produces a negative number. The contrast is less than in the Difference mode.

HardLight

This mode uses a combination of the Linear Dodge blending mode on the lighter pixels and the Linear Burn blending mode on the darker pixels. It uses a half-strength application of these modes and logic similar to the Overlay blending mode but favors the active layer instead of the underlying layers.

Lighten

This mode selects the maximum of each component from the foreground and background pixels. If the pixels of the overlaying image are lighter than the ones in the source image, they are kept in the image. If the pixels in the overlaying image are darker, they are replaced with the pixels in the source image (they show through to the selected layer).

Multiply

This mode multiplies pixels from the top image with the corresponding pixels in the bottom image. It works by multiplying the luminance levels of the pixels.

Normal

No math is applied in the normal mode.

Overlay

This mode uses a combination of the Screen blending mode on the lighter pixels, and the Multiply blending mode on the darker pixels. It uses a half-strength application of these modes, and the mid-tones (50% gray) become transparent.

Screen

The pixels in the two layers are inverted, multiplied, and then inverted again. This mode is similar to the Lighten blending mode but brighter, and it removes more of the dark pixels, resulting in smoother transitions.

SoftLight

This mode uses a combination of the Screen blending mode on the lighter pixels, and the Multiply blending mode on the darker pixels (a half-strength application of both modes).

---

Now, let's go further and learn how you can configure text wrapping in the Template Editor.