Last updated: Nov-14-2022
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.
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.|
|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
|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.
Transformation BasicsLearn the basics of a transformation URL
Named TransformationsSimplify & standardize complex delivery URLs
Optimization TipsTips for delivering optimized images
Check out 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.