Add a text overlay to an image that stays crystal clear when the image is
scaled to different sizes.
Use a text overlay to share sale prices,
announce a new product, or highlight any exciting information. The Composite (Watermark) transformation lets
you overlay text on an image.
Here's the image before and after we've used a
text overlay to announce a holiday sale:
How to
Go to > CDN > Image and Video
Manager.
Select a contract and a policy set name,
then click Manage
Policies.
Click Add New Policy.
The Name
Your Policy window appears:
Enter a name for the policy in the
Policy Name field and click OK .
The Image
Policy Editor appears.
Add the Composite (Watermark)
transformation by expanding the Transformations section and select Composite
(Watermark).
Change the Image Type field to Text.
Next you can adjust a series of settings
to get your text to say and look the way you want. We recommend first typing out the text
you’d like to overlay and setting the font and size.
Note: When you link to a hosted font file,
it must be either a .ttf or .woff (v1) file. At this time we do not support .woff2
files. Woff files offer much better backwards compatibility.
As you make setting changes in the
policy, preview your changes live by clicking on the refresh arrow above the preview
viewer.
Once you have the text, font, color, and
size that you want, you can adjust the placement. In the Watermark/Composite
transformation, set the Horizontal and Vertical offset as padding for the text placement.
This allows you to move the text further from the gravity location you selected. Gravity
selects the main anchor point for the text. You can think of it like a compass (North,
South, East, West). In our example, we selected North so that the text was centered at the
top.
Once you have your text how you like it,
click Save and Test on
Staging to save and activate it on the Staging network and test it
live.