Tutorial 09: Advanced Lower 3rds – Dealing with Descenders

This is third tutorial in my first Lower 3rds series. In this one, I will show you how to deal with Descenders and how you can automatically offset text and text background to perfectly position your layers.

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

Overall Set Up

This tutorial is pretty advanced as it involves RegEx and multiple if statements. I somehow made my set up work, with help of a developer. But I’m pretty sure there is a better way to accomplish the whole detection of characters and offset in position, if characters are present.

To learn more about RegEx or Regular Expressions, I would recommend this website, where you can check and debug your code with ease.

Descenders Height

Copy to Clipboard

Punctuation Height

Copy to Clipboard

This is extra step, which is not 100% needed. Simply add those 2 expressions to 2 sliders and “point them” at your text layer. They will simply calculate aproximate height of a Descender, such as j or g. And height of a punctuation mark.

By doing those calculation on a separate sliders, we can reference them later on in different expressions, instead of running those calculations again.

Descenders Check and Offset

Copy to Clipboard

There is quite a lot to unpack in this expression. So, let’s star from beginning.

First, we are defining all the sources, which we will use throughout this expression and then variables. Then we are defining starting X and Y positions, based on main Name Text layer.

Then I’m running to match functions on text string, with defined search parameters. Once this is done, I’m running 2x if statements. First to check if there are any descenders and second to check if there are any punctuation markers. If yes, we will use value to offset position. If no, we will simply use 0.

You can put if statement in a variable in the following way:

variableHere = (condition) ? ifTrue : ifFalse;

Last step is to figure out if there are descenders or punctuation markers. Since descenders like j and g are bigger than punctuation markers, we want to use them for offset. If there are no descenders present, but there are punctuation markers, we want to use smaller offset.

This is where the previous offset code and sliders come in. At this stage, we are running 2 last if statements in new variables. If there are punctuation markers, but no descenders – use punctuation markers. If this is false, use descenders. If both are true, which means we have descenders and punctuation markers, then we use the first result, which means we are offsetting text by bigger amount (descenders offset).

This code is not pretty. It is segmented and we are running multiple if statements for pretty simple check. I think there is better solution with, for loop way? If you know of better solution, please do get in touch and I will make new tutorial.

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

2024-05-09T17:41:16+01:00September 25th, 2021|Tutorials|
Go to Top