Last updated: Nov-14-2022
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.
This video is brought to you by Cloudinary's video player - embed your own!
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.|
Step 2: Provide the transformation for the text overlay. The pattern for this input is
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.|
- 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 BasicsLearn the basics of a transformation URL
Named TransformationsSimplify & standardize complex delivery URLs
Optimization TipsTips 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.