Documente Academic
Documente Profesional
Documente Cultură
Follow
Overview
The Displacement Map effect shifts or displaces the pixels on the background layers based on
the color of pixels in a map layer.
The Displacement Map effect should be applied to the map layer, which in turn should be placed in front of
the background layer or layers to be displaced.
The overall displacement is calculated by combining the Offset settings in the effect with the color of the
pixel in the map layer. By default, the pixel luminance is used. Brighter pixels cause a larger shift; darker pixels
cause a smaller shift (black pixels cause no shift at all).
Consider Fig.1: On the left you can see the background layer. In the center, the map layer is overlaid with no
effect applied. On the right, the Displacement Map effect has been applied to the map layer, and
the Offset is being animated up and down along the Y axis.
As you can see, the white area moves furthest, while the black area does not move at all.
https://alightcreative.zendesk.com/hc/en-us/articles/360015525072-Effect-Displacement-Map 1/7
15/1/2019 Effect: Displacement Map – Alight Creative Help Center
From Center changes the behavior so that white pixels shift in one direction, black pixels shift in the opposite
direction, and neutral gray pixels don't move.
Invert causes the offset to be reversed (the behavior of black and white is swapped)
Ideas
Displacement Map is a very versatile effect. It can be combined with other effects to create some very
interesting results.
Here's how:
https://alightcreative.zendesk.com/hc/en-us/articles/360015525072-Effect-Displacement-Map 2/7
15/1/2019 Effect: Displacement Map – Alight Creative Help Center
Here, we use a plain circle with a white outline and no fill, together with a Box Blur and a Displacement
Map to create the ripple on the left; change the layer blending mode to screen for the energy burst look on
the right.
Here's how:
Fake 3D Parallax
Here, a still image is brought to life by creating a depth map using Freehand Drawing, then applying
a Displacement Map to displace pixels based on their depth.
https://alightcreative.zendesk.com/hc/en-us/articles/360015525072-Effect-Displacement-Map 3/7
15/1/2019 Effect: Displacement Map – Alight Creative Help Center
A depth map is a layer where pixel brightness indicates the distance of a pixel from the viewer (the depth into
the scene). While pixels are closer to the viewer (or camera) and black pixels are further.
We then using Freehand Drawing to very roughly sketch out the parts of the image in gray tones based on
their distance (forgive our drawing skill: It doesn't need to be good for the effect to work).
When then apply a Box Blur effect to smooth out the edges (and hide our bad drawing skill).
This is our depth map. We then apply a Displacement Map effect to this layer, and animate the offset.
(NOTE: Use very small adjustments too offset; otherwise you'll get unwanted distortions in the result).
Glitch Effect
https://alightcreative.zendesk.com/hc/en-us/articles/360015525072-Effect-Displacement-Map 4/7
15/1/2019 Effect: Displacement Map – Alight Creative Help Center
Displacement Map is great for building a variety of glitch effects. Here's just one example:
To make this effect, we first made the RGB separation (this is optional) by creating three identical text layers.
We then made one layer red (with a screen blending mode), one layer blue (also with a screen blending
mode) and the original layer white. The red and blue layers were then animated to create a simple RGB
separation:
We then created a map layer using just a blank square shape, with a series of effects applied to it:
This was then grouped and the group was stretched out horizontally to make the mosaic tiles wider rather
than square. This resulted in a map layer that looked like this:
The flickering is because of the animation on the Clouds effect (it moves so fast the change appears random).
This map layer is then placed in front of the three text layers, and Displacement Map is applied, using
keyframe animation to increase and then decrease the offset over time.
Melt Effect
Here, we use a simple map layer: Just Clouds stretched vertically. By animating the offset on the Y axis, we
can creating this melting effect.
https://alightcreative.zendesk.com/hc/en-us/articles/360015525072-Effect-Displacement-Map 5/7
15/1/2019 Effect: Displacement Map – Alight Creative Help Center
Parameters Reference
Offset
The maximum amount of displacement along the X and Y axes. The actual displacement is a combination
of this and the pixel value in the layer.
Channel
Controls which color channel is used to calculate the offset factor for each pixel. By default, the luminance
(the weighted combination of the red, green, and blue channels) is used, but you can select an individual
channel (Red, Green, or Blue) in which case only that channel is used to calculate the offset factor.
Edges
Controls what happens when the offset is so large that it goes past the edge fo the project.
Repeat causes the last row of pixels at the edge to repeat (stretching out) forever.
https://alightcreative.zendesk.com/hc/en-us/articles/360015525072-Effect-Displacement-Map 6/7
15/1/2019 Effect: Displacement Map – Alight Creative Help Center
Tile causes the project content to repeat in a tiled pattern (similar to Mirror but without reversal)
From Center
Changes the behavior so that white pixels shift in one direction, black pixels shift in the opposite direction,
and neutral gray pixels don't move.
Invert
Causes the offset to be reversed (the behavior of black and white is swapped)
https://alightcreative.zendesk.com/hc/en-us/articles/360015525072-Effect-Displacement-Map 7/7