Text overlay transformations (video tutorial)

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

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.

0:14	Step 1: Once you are in the Media Library, locate the image on which you want to add the overlay.

0:21	Step 2: Hover over the desired asset, which will display several options. Choose the Edit icon to bring up the transformation editor.

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

0:41	Step 1: Select the Add overlay and watermark link.

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.

1:50	Step 1: Begin positioning the text by using the gravity option.

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.

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

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

 

 

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.