Tutorial 08: More Advanced Lower 3rds

This is second tutorial in the Lower 3rds series. In this one, we will create boxes around the text and offset them, so they are perfectly positioned under each other.

You can see 2 more lower 3rd tutorials I made so far:

Text Anchor Point – Bottom Left

Copy to Clipboard

Background Anchor Point – Center Left

Copy to Clipboard

If you are familiar with my tutorials, you may have seen those 2 expressions before. I’m using them to offset Anchor Point on Name Text Layer to Bottom Left. And second expression to offset Anchor Point on Name Background Layer to Center Left.

This “locks” the Anchor Points in place and we can then position background layer relative to Main Text Later – in this case Name.

Background Position

Copy to Clipboard

This expression offsets Background Shape layer, relative to Name Text layer. I’m using index-1 expression, so I can duplicate this shape layer and reuse it again on Title Text layer without changing code.

Note how I’m offsetting x and y positions. I’m using current Name Text layer position and then “pushing” background shape layer to a side, so it is positioned perfectly in the center of Background Shape Layer.

Background Layer – Size

Copy to Clipboard

To find Text Layer dimensions, I’m using SourceRectAtTime expression. It gives me absolute height and width of the layer and I can add extra “padding” or margin to it as well.

By linking Box Margin variable to a slider, it can be animated or adjusted later on as needed.

Position – Title Text

Copy to Clipboard

Position – Title Background

Copy to Clipboard

Title and Title Background layers are using the same Anchor Point expressions as other layers. But Position expressions are slightly different, but concept is the same. Look at the “leading layer”, grab it’s position, then offset accordingly.

Those layers are pretty much clones of other layers with changed final calculations to offset them down, instead of keeping them in the same spot.

Get Project File From Gumroad

This project file contains all the assets necessary to make animation in the tutorial in final form. Everything is labeled, linked, with expressions and ready to use, if you wish to make your own version or just play around with it.

If you have any suggestions for tutorials or how I can improve, please do get in touch. I would love to hear from you.

Found it helpful? Consider sharing it with others.

Other tutorials

2022-11-01T10:00:51+00:00September 25th, 2021|Tutorials|
Go to Top