Create lower thirds using After Effects

Lower thirds are used extensively in videos to make text and titles stand out, add production value and to bring an edit to life. Adobe After Effects is the gold standard for designing motion graphics, and lower thirds are just one of the elements it can create.

In this guide we'll show you how you can combine the creative versatility of After Effects with the scalability of Shotstack to create lower thirds for your videos.

What is a lower third?

A lower third is a graphic overlay that typically appears in the lower third of a video. It is used to display information such as the name of a person, their title, a location or a time. Lower thirds are used in news broadcasts, documentaries, interviews, sports and YouTube videos.

Examples of lower thirds animations from Envato

How After Effects works with Shotstack

Shotstack does not natively support After Effects files, it is not possible to import or open an AEP file. But you can use After Effects to create animations and export them as video files. Shotstack supports alpha transparency so you can create animations with transparent backgrounds and export them as QuickTime MOV files.

The lower third should not include any titles or text animations. These will be added later using Shotstack.

Once the files are exported from After Effects, they can be uploaded or ingested to Shotstack and used in a Shotstack JSON template and the video editing API. You can layer the animations on top of video clips, and overlay text on top of the animation, including merge field placeholders.

An important feature of Shotstack is the ability to repeat the last frame of an animation for a set duration. This is useful to make sure the lower third will display even after the animation finishes.

Preparing the lower third in After Effects

For this article we have prepared a simple lower third animation using After Effects ready to export. You can download the file lower-thirds-example.aep file and open it.

Adobe After Effects is an extensive tool with a steep learning curve, so the following steps presume a good working knowledge of the software.

Here are the key steps to creating the lower third animation so that it is compatible with Shotstack.

Create a new composition

Create a composition that is the same size as the final lower third animation. In our case we created a composition that is 700px wide x 130px high, 25 frames per second and 2 seconds long. The size of the composition should be large enough to fit the entire animation but no larger.

Animate the rectangle backgrounds in

The animation is composed of an orange and white rectangle which animate in from each side. Easing is applied to the animation to give it a smooth motion. Notice that the total composition length is 2 seconds and the rectangles animate in over 1 second. This ensures that the last frame can be repeated indefinitely in Shotstack.

Here is how the lower third in animation looks:

Animate the rectangle backgrounds out

Once the in animation is ready, you can duplicate the composition and use Keyframe Assistant > Time-Reverse Keyframes option to play the animation in reverse.

This is how the reverse animation looks:

Exporting the animation with transparency

As mentioned, Shotstack can not import or convert After Effects files. You will need to export the animation as a rendered video file. If the animation does not have any transparent areas, then you can export the file as an MP4. Because our lower third has transparent areas, we need to export it as a QuickTime MOV file.

Below are the settings you can use to export the animation from After Effects:

Key settings to note are:

• Format is QuickTime, the file extension will be MOV.
• Channels is RGB + Alpha, to support transparency.
• The Codec is GoPro CineForm, which offers good compression. You can try Animation or another codec that supports alpha transparency.

Once rendered you should have two MOV files ready to import in to Shotstack.

Adding a lower third to a video using the Edit API

The Shotstack Edit API, lets you programmatically edit videos using a JSON template. In the example below we will show you how to add our animations to a timeline over a background video. We'll then add text over the top of the lower third.

Creating the template in the Studio

The Studio is Shotstack's online video editor, that lets you edit videos without having to know any JSON. Once designed you can export the JSON template and use it in your application or use our Workflow tool to create videos in bulk.

The Studio works like a desktop video editor with a timeline, layers and clips. Instead of loading assets from your hard drive you can upload them or fetch them from a URL.

Below is a screenshot of the Studio editor with all the text and tracks arranged.

The timeline below includes:

• Track 1: an audio file that plays music for the duration of the video.
• Track 2: heading text that sits on top of the lower thirds orange rectangle.
• Track 3: subheading text that sits on top of the lower thirds white rectangle.
• Track 4: the lower third animations, that play in and out in sequence.
• Track 5: the background video that plays for the duration of the video.

With the the video edit complete we can export the JSON and render the video using the Edit API.

Rendering the template with the Edit API

The JSON below is the template that was created in the Studio. It includes the background video, the lower third animations and the text overlays.

{
    "timeline": {
        "background": "#000000",
        "tracks": [
            {
                "clips": [
                    {
                        "asset": {
                            "type": "audio",
                            "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/music/unminus/lit.mp3"
                        },
                        "start": 0,
                        "length": "end"
                    }
                ]
            },
            {
                "clips": [
                    {
                        "asset": {
                            "type": "html",
                            "width": 614,
                            "height": 46,
                            "html": "<p data-html-type=\"text\">BOULDERS BEACH</p>",
                            "css": "p { color: #ffffff; font-size: 39px; font-family: 'Clear Sans'; text-align: center; }"
                        },
                        "offset": {
                            "x": -0.199,
                            "y": -0.31
                        },
                        "transition": {
                            "in": "wipeRight",
                            "out": "wipeLeft"
                        },
                        "start": 0.7,
                        "length": 6.4
                    }
                ]
            },
            {
                "clips": [
                    {
                        "asset": {
                            "type": "html",
                            "width": 457,
                            "height": 46,
                            "html": "<p data-html-type=\"text\">WESTERN CAPE, SOUTH AFRICA</p>",
                            "css": "p { color: #282828; font-size: 26px; font-family: 'Clear Sans'; text-align: center; }"
                        },
                        "offset": {
                            "x": -0.094,
                            "y": -0.397
                        },
                        "transition": {
                            "in": "wipeLeft",
                            "out": "wipeRight"
                        },
                        "start": 0.8,
                        "length": 6.3
                    }
                ]
            },
            {
                "clips": [
                    {
                        "asset": {
                            "type": "video",
                            "src": "https://shotstack-assets.s3.ap-southeast-2.amazonaws.com/overlays/lower-third-in-example.mov"
                        },
                        "offset": {
                            "x": -0.18,
                            "y": -0.347
                        },
                        "position": "center",
                        "fit": "none",
                        "start": 0.5,
                        "length": 6
                    },
                    {
                        "asset": {
                            "type": "video",
                            "src": "https://shotstack-assets.s3.ap-southeast-2.amazonaws.com/overlays/lower-third-out-example.mov"
                        },
                        "start": 6.5,
                        "length": 2,
                        "offset": {
                            "x": -0.18,
                            "y": -0.347
                        },
                        "fit": "none"
                    }
                ]
            },
            {
                "clips": [
                    {
                        "asset": {
                            "type": "video",
                            "src": "https://shotstack-assets.s3.ap-southeast-2.amazonaws.com/footage/penguins-2.mp4"
                        },
                        "start": 0,
                        "length": 9
                    }
                ]
            }
        ]
    },
    "output": {
        "format": "mp4",
        "size": {
            "width": 1280,
            "height": 720
        }
    }
}

If you are a designer, you may not be familiar with JSON and calling API's. In that case you might need to hand this over to a developer. But otherwise, you can follow the steps in our Hello World guide to render the video via the API.

Some things to note in the JSON:

• File URLs src values are downloaded from our AWS S3 bucket. They can be stored anywhere online.
• The fit type for the lower third animations is set to none to ensure the animation is not resized or stretched.
• The audio track length is set to auto so it plays for the length of the timeline.

Here is the final video rendered using the JSON template above:

Next steps

Now that you have a lower thirds template set up, you can easily create new videos by changing the text and background video. This can be done in your own application, using merge fields or using our Workflow tool. This allows you to create a large number of videos quickly and easily without having to manually edit each one.

As well as lower thirds, you can use After Effects to create overlay transitions, luma mattes and masks, animated borders and looping background animations. By following the process above you can then export them in the correct format and use them in Shotstack.