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:
Copy to clipboard
cl_image_tag("scout-chrono.png", :transformation=>[
  {:quality=>"auto", :flags=>"lossy"},
  {:width=>250, :crop=>"scale"}
  ])
PHP:
Copy to clipboard
cl_image_tag("scout-chrono.png", array("transformation"=>array(
  array("quality"=>"auto", "flags"=>"lossy"),
  array("width"=>250, "crop"=>"scale")
  )))
Python:
Copy to clipboard
CloudinaryImage("scout-chrono.png").image(transformation=[
  {'quality': "auto", 'flags': "lossy"},
  {'width': 250, 'crop': "scale"}
  ])
Node.js:
Copy to clipboard
cloudinary.image("scout-chrono.png", {transformation: [
  {quality: "auto", flags: "lossy"},
  {width: 250, crop: "scale"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .quality("auto").flags("lossy").chain()
  .width(250).crop("scale")).imageTag("scout-chrono.png");
JS:
Copy to clipboard
cloudinary.imageTag('scout-chrono.png', {transformation: [
  {quality: "auto", flags: "lossy"},
  {width: 250, crop: "scale"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("scout-chrono.png", {transformation: [
  {quality: "auto", flags: "lossy"},
  {width: 250, crop: "scale"}
  ]})
React:
Copy to clipboard
<Image publicId="scout-chrono.png" >
  <Transformation quality="auto" flags="lossy" />
  <Transformation width="250" crop="scale" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="scout-chrono.png" >
  <cld-transformation quality="auto" flags="lossy" />
  <cld-transformation width="250" crop="scale" />
</cld-image>
Angular:
Copy to clipboard
<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:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Quality("auto").Flags("lossy").Chain()
  .Width(250).Crop("scale")).BuildImageTag("scout-chrono.png")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .quality("auto").flags("lossy").chain()
  .width(250).crop("scale")).generate("scout-chrono.png");
iOS:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
$.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:
Copy to clipboard
<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>
Vue.js:
Copy to clipboard
<cld-image publicId="scout-chrono.png" >
  <cld-transformation quality="auto" flags="lossy" />
  <cld-transformation overlay={{fontFamily: "futura", fontSize: 50, text: "%24%28text%29"}} color="white" gravity="center" y="-189" x="1" />
  <cld-transformation width="250" crop="scale" />
</cld-image>
Angular:
Copy to clipboard
<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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
$.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:
Copy to clipboard
<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>
Vue.js:
Copy to clipboard
<cld-image publicId="scout-chrono.png" >
  <cld-transformation quality="auto" flags="lossy" />
  <cld-transformation overlay={{fontFamily: "futura", fontSize: 50, text: "%24%28text%29"}} color="white" effect="distort:arc:60" gravity="center" y="-189" x="1" />
  <cld-transformation width="250" crop="scale" />
</cld-image>
Angular:
Copy to clipboard
<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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
$.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:
Copy to clipboard
<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>
Vue.js:
Copy to clipboard
<cld-image publicId="scout-chrono.png" >
  <cld-transformation quality="auto" flags="lossy" />
  <cld-transformation overlay={{fontFamily: "futura", fontSize: 50, text: "%24%28text%29"}} color="black" effect="distort:arc:60" gravity="center" y="-186" x="-2" />
  <cld-transformation overlay={{fontFamily: "futura", fontSize: 50, text: "%24%28text%29"}} color="white" effect="distort:arc:60" gravity="center" y="-189" x="1" />
  <cld-transformation width="250" crop="scale" />
</cld-image>
Angular:
Copy to clipboard
<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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
$.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:
Copy to clipboard
<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>
Vue.js:
Copy to clipboard
<cld-image publicId="scout-chrono.png" >
  <cld-transformation quality="auto" flags="lossy" />
  <cld-transformation overlay={{fontFamily: "futura", fontSize: 50, text: "%24%28text%29"}} color="black" effect="distort:arc:60" gravity="center" y="-186" x="-2" opacity="50" />
  <cld-transformation overlay={{fontFamily: "futura", fontSize: 50, text: "%24%28text%29"}} color="white" effect="distort:arc:60" gravity="center" y="-189" x="1" opacity="50" />
  <cld-transformation width="250" crop="scale" />
</cld-image>
Angular:
Copy to clipboard
<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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
$.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:
Copy to clipboard
<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>
Vue.js:
Copy to clipboard
<cld-image publicId="scout-chrono.png" >
  <cld-transformation quality="auto" flags="lossy" />
  <cld-transformation overlay={{fontFamily: "futura", fontSize: 50, text: "%24%28text%29"}} color="black" effect="distort:arc:$arc" gravity="center" y="-186" x="-2" opacity="50" />
  <cld-transformation overlay={{fontFamily: "futura", fontSize: 50, text: "%24%28text%29"}} color="white" effect="distort:arc:$arc" gravity="center" y="-189" x="1" opacity="50" />
  <cld-transformation width="250" crop="scale" />
</cld-image>
Angular:
Copy to clipboard
<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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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