Text overlay transformations (video tutorial)
Last updated: Sep-02-2024
On this page:
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.
Step 1: Once you are in the Media Library, locate the image on which you want to add the overlay. |
Step 2: Hover over the desired asset, which will display several options. Choose the Edit icon to bring up the transformation editor. |
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
Step 1: Select the Add overlay and watermark link. |
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.
Step 1: Begin positioning the text by using the gravity option. |
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. |
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
- Develop a text overlay creator with instructions from our Solution Architects.
- Find out how to apply overlays programmatically, and use other image transformations in our Fundamentals for Developers course.
- Review our transformation reference to see all of the possibilities for transforming images and videos.
If you like this, you might also like...
Transformation Basics
Learn the basics of a transformation URLNamed Transformations
Simplify & standardize complex delivery URLsOptimization Tips
Tips for delivering optimized images
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.
✖️