Programmable Media

Text overlay transformations (video tutorial)

Last updated: Sep-12-2024

Overview

This tutorial shows how to overlay text onto a base image using Cloudinary's transformations. The steps are demonstrated from within the Cloudinary Console, rather than programmatically.

Video tutorial


This video is brought to you by Cloudinary's video player - embed your own!

Tutorial contents

This tutorial presents the following topics. Click a timestamp to jump to that part of the video.

Access the transformation editor

To access the transformation editor for a particular asset, begin by logging into the Cloudinary Console and then clicking on the Media Library option in the top navigation.

Jump to this spot in the video  0:14 Step 1: Once you are in the Media Library, locate the image on which you want to add the overlay.
Jump to this spot in the video  0:21 Step 2: Hover over the desired asset, which will display several options. Choose the Edit icon to bring up the transformation editor.
Jump to this spot in the video  0:32 Step 3: You can change the image size in order to see the text more easily. If keeping a higher resolution, you should change the text size proportionately.

Apply text overlays

Jump to this spot in the video  0:41 Step 1: Select the Add overlay and watermark link.
Jump to this spot in the video  0:55 Step 2: Provide the transformation for the text overlay. The pattern for this input is text:<FONT FAMILY>_<FONT SIZE>:<CUSTOM TEXT>.

Adjust the text overlay's positioning and style

Let's look at some options for positioning and styling the text.

Jump to this spot in the video  1:50 Step 1: Begin positioning the text by using the gravity option.
Jump to this spot in the video  2:13 Step 2: You can also adjust the X and Y coordinates relative to the gravity position. This can help to provide a margin for the text, so its not up against the edge of the image.
Jump to this spot in the video  2:28 Step 3: You can further define your overlay if you choose by applying a certain style of a font-family, such as Montserrat Light or Bold.

Keep learning

Related topics

If you like this, you might also like...

Transformation Basics
Learn the basics of a transformation URL
Named Transformations
Simplify & standardize complex delivery URLs
Optimization Tips
Tips for delivering optimized images

 

Cloudinary Academy

 

Check out the Cloudinary Academy for free self-paced Cloudinary courses on a variety of developer or DAM topics, or register for formal instructor-led courses, either virtual or on-site.

 

✔️ Feedback sent!

Rate this page: