Leveraging the Image-Overlay Effect for Preview of Customized Engravings

To add custom engravings to your products, such as gadgets like watches, electronic devices, and the like, you could use the paid tools on the market. Why not leverage Cloudinary to do so? It’s a simple tool that seamlessly delivers excellent results—for free.

Here’s how. First, have ready a good image of the product to which you’d like to add custom engraving, for example, this watch:

Ruby:
cl_image_tag("scout-chrono.png", :transformation=>[
  {:quality=>"auto", :flags=>"lossy"},
  {:width=>250, :crop=>"scale"}
  ])
PHP:
cl_image_tag("scout-chrono.png", array("transformation"=>array(
  array("quality"=>"auto", "flags"=>"lossy"),
  array("width"=>250, "crop"=>"scale")
  )))
Python:
CloudinaryImage("scout-chrono.png").image(transformation=[
  {'quality': "auto", 'flags': "lossy"},
  {'width': 250, 'crop': "scale"}
  ])
Node.js:
cloudinary.image("scout-chrono.png", {transformation: [
  {quality: "auto", flags: "lossy"},
  {width: 250, crop: "scale"}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
  .quality("auto").flags("lossy").chain()
  .width(250).crop("scale")).imageTag("scout-chrono.png");
JS:
cloudinary.imageTag('scout-chrono.png', {transformation: [
  {quality: "auto", flags: "lossy"},
  {width: 250, crop: "scale"}
  ]}).toHtml();
jQuery:
$.cloudinary.image("scout-chrono.png", {transformation: [
  {quality: "auto", flags: "lossy"},
  {width: 250, crop: "scale"}
  ]})
React:
<Image publicId="scout-chrono.png" >
  <Transformation quality="auto" flags="lossy" />
  <Transformation width="250" crop="scale" />
</Image>
Angular:
<cl-image public-id="scout-chrono.png" >
  <cl-transformation quality="auto" flags="lossy">
  </cl-transformation>
  <cl-transformation width="250" crop="scale">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Quality("auto").Flags("lossy").Chain()
  .Width(250).Crop("scale")).BuildImageTag("scout-chrono.png")
Android:
MediaManager.get().url().transformation(new Transformation()
  .quality("auto").flags("lossy").chain()
  .width(250).crop("scale")).generate("scout-chrono.png");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setQuality("auto").setFlags("lossy").chain()
  .setWidth(250).setCrop("scale")).generate("scout-chrono.png")!, cloudinary: cloudinary)
Original

Now add a text layer that aligns properly to the watch.

For additional scalability, capture the text to be added in a variable:

Ruby:
cl_image_tag("scout-chrono.png", :variables=>[["$text", "!Sample Text!"]], :transformation=>[
  {:quality=>"auto", :flags=>"lossy"},
  {:overlay=>{:font_family=>"futura", :font_size=>50, :text=>"%24%28text%29"}, :color=>"white", :gravity=>"center", :y=>-189, :x=>1},
  {:width=>250, :crop=>"scale"}
  ])
PHP:
cl_image_tag("scout-chrono.png", array("variables"=>array("$text"=>"!Sample Text!"), "transformation"=>array(
  array("quality"=>"auto", "flags"=>"lossy"),
  array("overlay"=>array("font_family"=>"futura", "font_size"=>50, "text"=>"%24%28text%29"), "color"=>"white", "gravity"=>"center", "y"=>-189, "x"=>1),
  array("width"=>250, "crop"=>"scale")
  )))
Python:
CloudinaryImage("scout-chrono.png").image(variables={"$text": "!Sample Text!"}, transformation=[
  {'quality': "auto", 'flags': "lossy"},
  {'overlay': {'font_family': "futura", 'font_size': 50, 'text': "%24%28text%29"}, 'color': "white", 'gravity': "center", 'y': -189, 'x': 1},
  {'width': 250, 'crop': "scale"}
  ])
Node.js:
cloudinary.image("scout-chrono.png", {variables: [["$text", "!Sample Text!"]], transformation: [
  {quality: "auto", flags: "lossy"},
  {overlay: {font_family: "futura", font_size: 50, text: "%24%28text%29"}, color: "white", gravity: "center", y: -189, x: 1},
  {width: 250, crop: "scale"}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
.variables(variable("$text","!Sample Text!")).chain()
  .quality("auto").flags("lossy").chain()
  .overlay(new TextLayer().fontFamily("futura").fontSize(50).text("%24%28text%29")).color("white").gravity("center").y(-189).x(1).chain()
  .width(250).crop("scale")).imageTag("scout-chrono.png");
JS:
cloudinary.imageTag('scout-chrono.png', {variables: [["$text", "!Sample Text!"]], transformation: [
  {quality: "auto", flags: "lossy"},
  {overlay: new cloudinary.TextLayer().fontFamily("futura").fontSize(50).text("%24%28text%29"), color: "white", gravity: "center", y: -189, x: 1},
  {width: 250, crop: "scale"}
  ]}).toHtml();
jQuery:
$.cloudinary.image("scout-chrono.png", {variables: [["$text", "!Sample Text!"]], transformation: [
  {quality: "auto", flags: "lossy"},
  {overlay: new cloudinary.TextLayer().fontFamily("futura").fontSize(50).text("%24%28text%29"), color: "white", gravity: "center", y: -189, x: 1},
  {width: 250, crop: "scale"}
  ]})
React:
<Image publicId="scout-chrono.png" >
  <Transformation quality="auto" flags="lossy" />
  <Transformation overlay={{fontFamily: "futura", fontSize: 50, text: "%24%28text%29"}} color="white" gravity="center" y="-189" x="1" />
  <Transformation width="250" crop="scale" />
</Image>
Angular:
<cl-image public-id="scout-chrono.png" >
  <cl-transformation quality="auto" flags="lossy">
  </cl-transformation>
  <cl-transformation overlay="text:futura_50:%24%28text%29" color="white" gravity="center" y="-189" x="1">
  </cl-transformation>
  <cl-transformation width="250" crop="scale">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Quality("auto").Flags("lossy").Chain()
  .Overlay(new TextLayer().FontFamily("futura").FontSize(50).Text("%24%28text%29")).Color("white").Gravity("center").Y(-189).X(1).Chain()
  .Width(250).Crop("scale")).BuildImageTag("scout-chrono.png")
Android:
MediaManager.get().url().transformation(new Transformation()
.variables(variable("$text","!Sample Text!")).chain()
  .quality("auto").flags("lossy").chain()
  .overlay(new TextLayer().fontFamily("futura").fontSize(50).text("%24%28text%29")).color("white").gravity("center").y(-189).x(1).chain()
  .width(250).crop("scale")).generate("scout-chrono.png");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setQuality("auto").setFlags("lossy").chain()
  .setOverlay("text:futura_50:%24%28text%29").setColor("white").setGravity("center").setY(-189).setX(1).chain()
  .setWidth(250).setCrop("scale")).generate("scout-chrono.png")!, cloudinary: cloudinary)
With Text

To align to the watch on which the engraving will appear, set the e_distort effect to add the necessary curvature.

Note
Skip this step if the customized object or text to be added is flat.

Ruby:
cl_image_tag("scout-chrono.png", :variables=>[["$text", "!Sample Text!"]], :transformation=>[
  {:quality=>"auto", :flags=>"lossy"},
  {:overlay=>{:font_family=>"futura", :font_size=>50, :text=>"%24%28text%29"}, :color=>"white", :effect=>"distort:arc:60", :gravity=>"center", :y=>-189, :x=>1},
  {:width=>250, :crop=>"scale"}
  ])
PHP:
cl_image_tag("scout-chrono.png", array("variables"=>array("$text"=>"!Sample Text!"), "transformation"=>array(
  array("quality"=>"auto", "flags"=>"lossy"),
  array("overlay"=>array("font_family"=>"futura", "font_size"=>50, "text"=>"%24%28text%29"), "color"=>"white", "effect"=>"distort:arc:60", "gravity"=>"center", "y"=>-189, "x"=>1),
  array("width"=>250, "crop"=>"scale")
  )))
Python:
CloudinaryImage("scout-chrono.png").image(variables={"$text": "!Sample Text!"}, transformation=[
  {'quality': "auto", 'flags': "lossy"},
  {'overlay': {'font_family': "futura", 'font_size': 50, 'text': "%24%28text%29"}, 'color': "white", 'effect': "distort:arc:60", 'gravity': "center", 'y': -189, 'x': 1},
  {'width': 250, 'crop': "scale"}
  ])
Node.js:
cloudinary.image("scout-chrono.png", {variables: [["$text", "!Sample Text!"]], transformation: [
  {quality: "auto", flags: "lossy"},
  {overlay: {font_family: "futura", font_size: 50, text: "%24%28text%29"}, color: "white", effect: "distort:arc:60", gravity: "center", y: -189, x: 1},
  {width: 250, crop: "scale"}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
.variables(variable("$text","!Sample Text!")).chain()
  .quality("auto").flags("lossy").chain()
  .overlay(new TextLayer().fontFamily("futura").fontSize(50).text("%24%28text%29")).color("white").effect("distort:arc:60").gravity("center").y(-189).x(1).chain()
  .width(250).crop("scale")).imageTag("scout-chrono.png");
JS:
cloudinary.imageTag('scout-chrono.png', {variables: [["$text", "!Sample Text!"]], transformation: [
  {quality: "auto", flags: "lossy"},
  {overlay: new cloudinary.TextLayer().fontFamily("futura").fontSize(50).text("%24%28text%29"), color: "white", effect: "distort:arc:60", gravity: "center", y: -189, x: 1},
  {width: 250, crop: "scale"}
  ]}).toHtml();
jQuery:
$.cloudinary.image("scout-chrono.png", {variables: [["$text", "!Sample Text!"]], transformation: [
  {quality: "auto", flags: "lossy"},
  {overlay: new cloudinary.TextLayer().fontFamily("futura").fontSize(50).text("%24%28text%29"), color: "white", effect: "distort:arc:60", gravity: "center", y: -189, x: 1},
  {width: 250, crop: "scale"}
  ]})
React:
<Image publicId="scout-chrono.png" >
  <Transformation quality="auto" flags="lossy" />
  <Transformation overlay={{fontFamily: "futura", fontSize: 50, text: "%24%28text%29"}} color="white" effect="distort:arc:60" gravity="center" y="-189" x="1" />
  <Transformation width="250" crop="scale" />
</Image>
Angular:
<cl-image public-id="scout-chrono.png" >
  <cl-transformation quality="auto" flags="lossy">
  </cl-transformation>
  <cl-transformation overlay="text:futura_50:%24%28text%29" color="white" effect="distort:arc:60" gravity="center" y="-189" x="1">
  </cl-transformation>
  <cl-transformation width="250" crop="scale">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Quality("auto").Flags("lossy").Chain()
  .Overlay(new TextLayer().FontFamily("futura").FontSize(50).Text("%24%28text%29")).Color("white").Effect("distort:arc:60").Gravity("center").Y(-189).X(1).Chain()
  .Width(250).Crop("scale")).BuildImageTag("scout-chrono.png")
Android:
MediaManager.get().url().transformation(new Transformation()
.variables(variable("$text","!Sample Text!")).chain()
  .quality("auto").flags("lossy").chain()
  .overlay(new TextLayer().fontFamily("futura").fontSize(50).text("%24%28text%29")).color("white").effect("distort:arc:60").gravity("center").y(-189).x(1).chain()
  .width(250).crop("scale")).generate("scout-chrono.png");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setQuality("auto").setFlags("lossy").chain()
  .setOverlay("text:futura_50:%24%28text%29").setColor("white").setEffect("distort:arc:60").setGravity("center").setY(-189).setX(1).chain()
  .setWidth(250).setCrop("scale")).generate("scout-chrono.png")!, cloudinary: cloudinary)
Round Text

At this point, the text looks flat. To beef it up, you can add the shadow effect. However, a more effective way is to add another layer that’s slightly offset, like this:.

Ruby:
cl_image_tag("scout-chrono.png", :variables=>[["$text", "!Sample Text!"]], :transformation=>[
  {:quality=>"auto", :flags=>"lossy"},
  {:overlay=>{:font_family=>"futura", :font_size=>50, :text=>"%24%28text%29"}, :color=>"black", :effect=>"distort:arc:60", :gravity=>"center", :y=>-186, :x=>-2},
  {:overlay=>{:font_family=>"futura", :font_size=>50, :text=>"%24%28text%29"}, :color=>"white", :effect=>"distort:arc:60", :gravity=>"center", :y=>-189, :x=>1},
  {:width=>250, :crop=>"scale"}
  ])
PHP:
cl_image_tag("scout-chrono.png", array("variables"=>array("$text"=>"!Sample Text!"), "transformation"=>array(
  array("quality"=>"auto", "flags"=>"lossy"),
  array("overlay"=>array("font_family"=>"futura", "font_size"=>50, "text"=>"%24%28text%29"), "color"=>"black", "effect"=>"distort:arc:60", "gravity"=>"center", "y"=>-186, "x"=>-2),
  array("overlay"=>array("font_family"=>"futura", "font_size"=>50, "text"=>"%24%28text%29"), "color"=>"white", "effect"=>"distort:arc:60", "gravity"=>"center", "y"=>-189, "x"=>1),
  array("width"=>250, "crop"=>"scale")
  )))
Python:
CloudinaryImage("scout-chrono.png").image(variables={"$text": "!Sample Text!"}, transformation=[
  {'quality': "auto", 'flags': "lossy"},
  {'overlay': {'font_family': "futura", 'font_size': 50, 'text': "%24%28text%29"}, 'color': "black", 'effect': "distort:arc:60", 'gravity': "center", 'y': -186, 'x': -2},
  {'overlay': {'font_family': "futura", 'font_size': 50, 'text': "%24%28text%29"}, 'color': "white", 'effect': "distort:arc:60", 'gravity': "center", 'y': -189, 'x': 1},
  {'width': 250, 'crop': "scale"}
  ])
Node.js:
cloudinary.image("scout-chrono.png", {variables: [["$text", "!Sample Text!"]], transformation: [
  {quality: "auto", flags: "lossy"},
  {overlay: {font_family: "futura", font_size: 50, text: "%24%28text%29"}, color: "black", effect: "distort:arc:60", gravity: "center", y: -186, x: -2},
  {overlay: {font_family: "futura", font_size: 50, text: "%24%28text%29"}, color: "white", effect: "distort:arc:60", gravity: "center", y: -189, x: 1},
  {width: 250, crop: "scale"}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
.variables(variable("$text","!Sample Text!")).chain()
  .quality("auto").flags("lossy").chain()
  .overlay(new TextLayer().fontFamily("futura").fontSize(50).text("%24%28text%29")).color("black").effect("distort:arc:60").gravity("center").y(-186).x(-2).chain()
  .overlay(new TextLayer().fontFamily("futura").fontSize(50).text("%24%28text%29")).color("white").effect("distort:arc:60").gravity("center").y(-189).x(1).chain()
  .width(250).crop("scale")).imageTag("scout-chrono.png");
JS:
cloudinary.imageTag('scout-chrono.png', {variables: [["$text", "!Sample Text!"]], transformation: [
  {quality: "auto", flags: "lossy"},
  {overlay: new cloudinary.TextLayer().fontFamily("futura").fontSize(50).text("%24%28text%29"), color: "black", effect: "distort:arc:60", gravity: "center", y: -186, x: -2},
  {overlay: new cloudinary.TextLayer().fontFamily("futura").fontSize(50).text("%24%28text%29"), color: "white", effect: "distort:arc:60", gravity: "center", y: -189, x: 1},
  {width: 250, crop: "scale"}
  ]}).toHtml();
jQuery:
$.cloudinary.image("scout-chrono.png", {variables: [["$text", "!Sample Text!"]], transformation: [
  {quality: "auto", flags: "lossy"},
  {overlay: new cloudinary.TextLayer().fontFamily("futura").fontSize(50).text("%24%28text%29"), color: "black", effect: "distort:arc:60", gravity: "center", y: -186, x: -2},
  {overlay: new cloudinary.TextLayer().fontFamily("futura").fontSize(50).text("%24%28text%29"), color: "white", effect: "distort:arc:60", gravity: "center", y: -189, x: 1},
  {width: 250, crop: "scale"}
  ]})
React:
<Image publicId="scout-chrono.png" >
  <Transformation quality="auto" flags="lossy" />
  <Transformation overlay={{fontFamily: "futura", fontSize: 50, text: "%24%28text%29"}} color="black" effect="distort:arc:60" gravity="center" y="-186" x="-2" />
  <Transformation overlay={{fontFamily: "futura", fontSize: 50, text: "%24%28text%29"}} color="white" effect="distort:arc:60" gravity="center" y="-189" x="1" />
  <Transformation width="250" crop="scale" />
</Image>
Angular:
<cl-image public-id="scout-chrono.png" >
  <cl-transformation quality="auto" flags="lossy">
  </cl-transformation>
  <cl-transformation overlay="text:futura_50:%24%28text%29" color="black" effect="distort:arc:60" gravity="center" y="-186" x="-2">
  </cl-transformation>
  <cl-transformation overlay="text:futura_50:%24%28text%29" color="white" effect="distort:arc:60" gravity="center" y="-189" x="1">
  </cl-transformation>
  <cl-transformation width="250" crop="scale">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Quality("auto").Flags("lossy").Chain()
  .Overlay(new TextLayer().FontFamily("futura").FontSize(50).Text("%24%28text%29")).Color("black").Effect("distort:arc:60").Gravity("center").Y(-186).X(-2).Chain()
  .Overlay(new TextLayer().FontFamily("futura").FontSize(50).Text("%24%28text%29")).Color("white").Effect("distort:arc:60").Gravity("center").Y(-189).X(1).Chain()
  .Width(250).Crop("scale")).BuildImageTag("scout-chrono.png")
Android:
MediaManager.get().url().transformation(new Transformation()
.variables(variable("$text","!Sample Text!")).chain()
  .quality("auto").flags("lossy").chain()
  .overlay(new TextLayer().fontFamily("futura").fontSize(50).text("%24%28text%29")).color("black").effect("distort:arc:60").gravity("center").y(-186).x(-2).chain()
  .overlay(new TextLayer().fontFamily("futura").fontSize(50).text("%24%28text%29")).color("white").effect("distort:arc:60").gravity("center").y(-189).x(1).chain()
  .width(250).crop("scale")).generate("scout-chrono.png");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setQuality("auto").setFlags("lossy").chain()
  .setOverlay("text:futura_50:%24%28text%29").setColor("black").setEffect("distort:arc:60").setGravity("center").setY(-186).setX(-2).chain()
  .setOverlay("text:futura_50:%24%28text%29").setColor("white").setEffect("distort:arc:60").setGravity("center").setY(-189).setX(1).chain()
  .setWidth(250).setCrop("scale")).generate("scout-chrono.png")!, cloudinary: cloudinary)
Layered Text

To improve on the effect, adjust the opacity settings for the individual layers:

Ruby:
cl_image_tag("scout-chrono.png", :variables=>[["$text", "!Sample Text!"]], :transformation=>[
  {:quality=>"auto", :flags=>"lossy"},
  {:overlay=>{:font_family=>"futura", :font_size=>50, :text=>"%24%28text%29"}, :color=>"black", :effect=>"distort:arc:60", :gravity=>"center", :y=>-186, :x=>-2, :opacity=>50},
  {:overlay=>{:font_family=>"futura", :font_size=>50, :text=>"%24%28text%29"}, :color=>"white", :effect=>"distort:arc:60", :gravity=>"center", :y=>-189, :x=>1, :opacity=>50},
  {:width=>250, :crop=>"scale"}
  ])
PHP:
cl_image_tag("scout-chrono.png", array("variables"=>array("$text"=>"!Sample Text!"), "transformation"=>array(
  array("quality"=>"auto", "flags"=>"lossy"),
  array("overlay"=>array("font_family"=>"futura", "font_size"=>50, "text"=>"%24%28text%29"), "color"=>"black", "effect"=>"distort:arc:60", "gravity"=>"center", "y"=>-186, "x"=>-2, "opacity"=>50),
  array("overlay"=>array("font_family"=>"futura", "font_size"=>50, "text"=>"%24%28text%29"), "color"=>"white", "effect"=>"distort:arc:60", "gravity"=>"center", "y"=>-189, "x"=>1, "opacity"=>50),
  array("width"=>250, "crop"=>"scale")
  )))
Python:
CloudinaryImage("scout-chrono.png").image(variables={"$text": "!Sample Text!"}, transformation=[
  {'quality': "auto", 'flags': "lossy"},
  {'overlay': {'font_family': "futura", 'font_size': 50, 'text': "%24%28text%29"}, 'color': "black", 'effect': "distort:arc:60", 'gravity': "center", 'y': -186, 'x': -2, 'opacity': 50},
  {'overlay': {'font_family': "futura", 'font_size': 50, 'text': "%24%28text%29"}, 'color': "white", 'effect': "distort:arc:60", 'gravity': "center", 'y': -189, 'x': 1, 'opacity': 50},
  {'width': 250, 'crop': "scale"}
  ])
Node.js:
cloudinary.image("scout-chrono.png", {variables: [["$text", "!Sample Text!"]], transformation: [
  {quality: "auto", flags: "lossy"},
  {overlay: {font_family: "futura", font_size: 50, text: "%24%28text%29"}, color: "black", effect: "distort:arc:60", gravity: "center", y: -186, x: -2, opacity: 50},
  {overlay: {font_family: "futura", font_size: 50, text: "%24%28text%29"}, color: "white", effect: "distort:arc:60", gravity: "center", y: -189, x: 1, opacity: 50},
  {width: 250, crop: "scale"}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
.variables(variable("$text","!Sample Text!")).chain()
  .quality("auto").flags("lossy").chain()
  .overlay(new TextLayer().fontFamily("futura").fontSize(50).text("%24%28text%29")).color("black").effect("distort:arc:60").gravity("center").y(-186).x(-2).opacity(50).chain()
  .overlay(new TextLayer().fontFamily("futura").fontSize(50).text("%24%28text%29")).color("white").effect("distort:arc:60").gravity("center").y(-189).x(1).opacity(50).chain()
  .width(250).crop("scale")).imageTag("scout-chrono.png");
JS:
cloudinary.imageTag('scout-chrono.png', {variables: [["$text", "!Sample Text!"]], transformation: [
  {quality: "auto", flags: "lossy"},
  {overlay: new cloudinary.TextLayer().fontFamily("futura").fontSize(50).text("%24%28text%29"), color: "black", effect: "distort:arc:60", gravity: "center", y: -186, x: -2, opacity: 50},
  {overlay: new cloudinary.TextLayer().fontFamily("futura").fontSize(50).text("%24%28text%29"), color: "white", effect: "distort:arc:60", gravity: "center", y: -189, x: 1, opacity: 50},
  {width: 250, crop: "scale"}
  ]}).toHtml();
jQuery:
$.cloudinary.image("scout-chrono.png", {variables: [["$text", "!Sample Text!"]], transformation: [
  {quality: "auto", flags: "lossy"},
  {overlay: new cloudinary.TextLayer().fontFamily("futura").fontSize(50).text("%24%28text%29"), color: "black", effect: "distort:arc:60", gravity: "center", y: -186, x: -2, opacity: 50},
  {overlay: new cloudinary.TextLayer().fontFamily("futura").fontSize(50).text("%24%28text%29"), color: "white", effect: "distort:arc:60", gravity: "center", y: -189, x: 1, opacity: 50},
  {width: 250, crop: "scale"}
  ]})
React:
<Image publicId="scout-chrono.png" >
  <Transformation quality="auto" flags="lossy" />
  <Transformation overlay={{fontFamily: "futura", fontSize: 50, text: "%24%28text%29"}} color="black" effect="distort:arc:60" gravity="center" y="-186" x="-2" opacity="50" />
  <Transformation overlay={{fontFamily: "futura", fontSize: 50, text: "%24%28text%29"}} color="white" effect="distort:arc:60" gravity="center" y="-189" x="1" opacity="50" />
  <Transformation width="250" crop="scale" />
</Image>
Angular:
<cl-image public-id="scout-chrono.png" >
  <cl-transformation quality="auto" flags="lossy">
  </cl-transformation>
  <cl-transformation overlay="text:futura_50:%24%28text%29" color="black" effect="distort:arc:60" gravity="center" y="-186" x="-2" opacity="50">
  </cl-transformation>
  <cl-transformation overlay="text:futura_50:%24%28text%29" color="white" effect="distort:arc:60" gravity="center" y="-189" x="1" opacity="50">
  </cl-transformation>
  <cl-transformation width="250" crop="scale">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Quality("auto").Flags("lossy").Chain()
  .Overlay(new TextLayer().FontFamily("futura").FontSize(50).Text("%24%28text%29")).Color("black").Effect("distort:arc:60").Gravity("center").Y(-186).X(-2).Opacity(50).Chain()
  .Overlay(new TextLayer().FontFamily("futura").FontSize(50).Text("%24%28text%29")).Color("white").Effect("distort:arc:60").Gravity("center").Y(-189).X(1).Opacity(50).Chain()
  .Width(250).Crop("scale")).BuildImageTag("scout-chrono.png")
Android:
MediaManager.get().url().transformation(new Transformation()
.variables(variable("$text","!Sample Text!")).chain()
  .quality("auto").flags("lossy").chain()
  .overlay(new TextLayer().fontFamily("futura").fontSize(50).text("%24%28text%29")).color("black").effect("distort:arc:60").gravity("center").y(-186).x(-2).opacity(50).chain()
  .overlay(new TextLayer().fontFamily("futura").fontSize(50).text("%24%28text%29")).color("white").effect("distort:arc:60").gravity("center").y(-189).x(1).opacity(50).chain()
  .width(250).crop("scale")).generate("scout-chrono.png");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setQuality("auto").setFlags("lossy").chain()
  .setOverlay("text:futura_50:%24%28text%29").setColor("black").setEffect("distort:arc:60").setGravity("center").setY(-186).setX(-2).setOpacity(50).chain()
  .setOverlay("text:futura_50:%24%28text%29").setColor("white").setEffect("distort:arc:60").setGravity("center").setY(-189).setX(1).setOpacity(50).chain()
  .setWidth(250).setCrop("scale")).generate("scout-chrono.png")!, cloudinary: cloudinary)
Individual Layers

Now edit the text to whatever you desire, for example:

Ruby:
cl_image_tag("scout-chrono.png", :variables=>[["$text", "!The More You Know!"], ["$arc", "115"]], :transformation=>[
  {:quality=>"auto", :flags=>"lossy"},
  {:overlay=>{:font_family=>"futura", :font_size=>50, :text=>"%24%28text%29"}, :color=>"black", :effect=>"distort:arc:$arc", :gravity=>"center", :y=>-186, :x=>-2, :opacity=>50},
  {:overlay=>{:font_family=>"futura", :font_size=>50, :text=>"%24%28text%29"}, :color=>"white", :effect=>"distort:arc:$arc", :gravity=>"center", :y=>-189, :x=>1, :opacity=>50},
  {:width=>250, :crop=>"scale"}
  ])
PHP:
cl_image_tag("scout-chrono.png", array("variables"=>array("$text"=>"!The More You Know!", "$arc"=>"115"), "transformation"=>array(
  array("quality"=>"auto", "flags"=>"lossy"),
  array("overlay"=>array("font_family"=>"futura", "font_size"=>50, "text"=>"%24%28text%29"), "color"=>"black", "effect"=>"distort:arc:$arc", "gravity"=>"center", "y"=>-186, "x"=>-2, "opacity"=>50),
  array("overlay"=>array("font_family"=>"futura", "font_size"=>50, "text"=>"%24%28text%29"), "color"=>"white", "effect"=>"distort:arc:$arc", "gravity"=>"center", "y"=>-189, "x"=>1, "opacity"=>50),
  array("width"=>250, "crop"=>"scale")
  )))
Python:
CloudinaryImage("scout-chrono.png").image(variables={"$text": "!The More You Know!", "$arc": "115"}, transformation=[
  {'quality': "auto", 'flags': "lossy"},
  {'overlay': {'font_family': "futura", 'font_size': 50, 'text': "%24%28text%29"}, 'color': "black", 'effect': "distort:arc:$arc", 'gravity': "center", 'y': -186, 'x': -2, 'opacity': 50},
  {'overlay': {'font_family': "futura", 'font_size': 50, 'text': "%24%28text%29"}, 'color': "white", 'effect': "distort:arc:$arc", 'gravity': "center", 'y': -189, 'x': 1, 'opacity': 50},
  {'width': 250, 'crop': "scale"}
  ])
Node.js:
cloudinary.image("scout-chrono.png", {variables: [["$text", "!The More You Know!"], ["$arc", "115"]], transformation: [
  {quality: "auto", flags: "lossy"},
  {overlay: {font_family: "futura", font_size: 50, text: "%24%28text%29"}, color: "black", effect: "distort:arc:$arc", gravity: "center", y: -186, x: -2, opacity: 50},
  {overlay: {font_family: "futura", font_size: 50, text: "%24%28text%29"}, color: "white", effect: "distort:arc:$arc", gravity: "center", y: -189, x: 1, opacity: 50},
  {width: 250, crop: "scale"}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
.variables(variable("$text","!The More You Know!"),variable("$arc","115")).chain()
  .quality("auto").flags("lossy").chain()
  .overlay(new TextLayer().fontFamily("futura").fontSize(50).text("%24%28text%29")).color("black").effect("distort:arc:$arc").gravity("center").y(-186).x(-2).opacity(50).chain()
  .overlay(new TextLayer().fontFamily("futura").fontSize(50).text("%24%28text%29")).color("white").effect("distort:arc:$arc").gravity("center").y(-189).x(1).opacity(50).chain()
  .width(250).crop("scale")).imageTag("scout-chrono.png");
JS:
cloudinary.imageTag('scout-chrono.png', {variables: [["$text", "!The More You Know!"], ["$arc", "115"]], transformation: [
  {quality: "auto", flags: "lossy"},
  {overlay: new cloudinary.TextLayer().fontFamily("futura").fontSize(50).text("%24%28text%29"), color: "black", effect: "distort:arc:$arc", gravity: "center", y: -186, x: -2, opacity: 50},
  {overlay: new cloudinary.TextLayer().fontFamily("futura").fontSize(50).text("%24%28text%29"), color: "white", effect: "distort:arc:$arc", gravity: "center", y: -189, x: 1, opacity: 50},
  {width: 250, crop: "scale"}
  ]}).toHtml();
jQuery:
$.cloudinary.image("scout-chrono.png", {variables: [["$text", "!The More You Know!"], ["$arc", "115"]], transformation: [
  {quality: "auto", flags: "lossy"},
  {overlay: new cloudinary.TextLayer().fontFamily("futura").fontSize(50).text("%24%28text%29"), color: "black", effect: "distort:arc:$arc", gravity: "center", y: -186, x: -2, opacity: 50},
  {overlay: new cloudinary.TextLayer().fontFamily("futura").fontSize(50).text("%24%28text%29"), color: "white", effect: "distort:arc:$arc", gravity: "center", y: -189, x: 1, opacity: 50},
  {width: 250, crop: "scale"}
  ]})
React:
<Image publicId="scout-chrono.png" >
  <Transformation quality="auto" flags="lossy" />
  <Transformation overlay={{fontFamily: "futura", fontSize: 50, text: "%24%28text%29"}} color="black" effect="distort:arc:$arc" gravity="center" y="-186" x="-2" opacity="50" />
  <Transformation overlay={{fontFamily: "futura", fontSize: 50, text: "%24%28text%29"}} color="white" effect="distort:arc:$arc" gravity="center" y="-189" x="1" opacity="50" />
  <Transformation width="250" crop="scale" />
</Image>
Angular:
<cl-image public-id="scout-chrono.png" >
  <cl-transformation quality="auto" flags="lossy">
  </cl-transformation>
  <cl-transformation overlay="text:futura_50:%24%28text%29" color="black" effect="distort:arc:$arc" gravity="center" y="-186" x="-2" opacity="50">
  </cl-transformation>
  <cl-transformation overlay="text:futura_50:%24%28text%29" color="white" effect="distort:arc:$arc" gravity="center" y="-189" x="1" opacity="50">
  </cl-transformation>
  <cl-transformation width="250" crop="scale">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Quality("auto").Flags("lossy").Chain()
  .Overlay(new TextLayer().FontFamily("futura").FontSize(50).Text("%24%28text%29")).Color("black").Effect("distort:arc:$arc").Gravity("center").Y(-186).X(-2).Opacity(50).Chain()
  .Overlay(new TextLayer().FontFamily("futura").FontSize(50).Text("%24%28text%29")).Color("white").Effect("distort:arc:$arc").Gravity("center").Y(-189).X(1).Opacity(50).Chain()
  .Width(250).Crop("scale")).BuildImageTag("scout-chrono.png")
Android:
MediaManager.get().url().transformation(new Transformation()
.variables(variable("$text","!The More You Know!"),variable("$arc","115")).chain()
  .quality("auto").flags("lossy").chain()
  .overlay(new TextLayer().fontFamily("futura").fontSize(50).text("%24%28text%29")).color("black").effect("distort:arc:$arc").gravity("center").y(-186).x(-2).opacity(50).chain()
  .overlay(new TextLayer().fontFamily("futura").fontSize(50).text("%24%28text%29")).color("white").effect("distort:arc:$arc").gravity("center").y(-189).x(1).opacity(50).chain()
  .width(250).crop("scale")).generate("scout-chrono.png");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setQuality("auto").setFlags("lossy").chain()
  .setOverlay("text:futura_50:%24%28text%29").setColor("black").setEffect("distort:arc:$arc").setGravity("center").setY(-186).setX(-2).setOpacity(50).chain()
  .setOverlay("text:futura_50:%24%28text%29").setColor("white").setEffect("distort:arc:$arc").setGravity("center").setY(-189).setX(1).setOpacity(50).chain()
  .setWidth(250).setCrop("scale")).generate("scout-chrono.png")!, cloudinary: cloudinary)
Shadow

Do you know of other ways to customize engravings? If so, do tell us in the Comments section below.

by Andrew Philips