Cloudinary cookbook background
Cloudinary Cookbook
← View popular recipes
Find recipes by tags:
View all tags

Turn your pictures in to old photographs

You don't have to wait to go to a theme park to take an old-timey photograph with your family. Instead, you can use Cloudinary to quickly and easily create this effect on any of your current images.

URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/w_1000/l_torn-paper,w_1.0,h_1.0,fl_relative,fl_cutter/l_torn-paper,w_1.0,h_1.0,fl_relative,o_40/e_sepia/mac-bubbles.jpg
Ruby:
cl_image_tag("mac-bubbles.jpg", :transformation=>[
  {:width=>1000, :crop=>"scale"},
  {:overlay=>"torn-paper", :width=>1.0, :height=>1.0, :flags=>["relative", "cutter"]},
  {:overlay=>"torn-paper", :width=>1.0, :height=>1.0, :flags=>"relative", :opacity=>40},
  {:effect=>"sepia"}
  ])
PHP:
cl_image_tag("mac-bubbles.jpg", array("transformation"=>array(
  array("width"=>1000, "crop"=>"scale"),
  array("overlay"=>"torn-paper", "width"=>1.0, "height"=>1.0, "flags"=>array("relative", "cutter")),
  array("overlay"=>"torn-paper", "width"=>1.0, "height"=>1.0, "flags"=>"relative", "opacity"=>40),
  array("effect"=>"sepia")
  )))
Python:
CloudinaryImage("mac-bubbles.jpg").image(transformation=[
  {'width': 1000, 'crop': "scale"},
  {'overlay': "torn-paper", 'width': 1.0, 'height': 1.0, 'flags': ["relative", "cutter"]},
  {'overlay': "torn-paper", 'width': 1.0, 'height': 1.0, 'flags': "relative", 'opacity': 40},
  {'effect': "sepia"}
  ])
Node.js:
cloudinary.image("mac-bubbles.jpg", {transformation: [
  {width: 1000, crop: "scale"},
  {overlay: "torn-paper", width: "1.0", height: "1.0", flags: ["relative", "cutter"]},
  {overlay: "torn-paper", width: "1.0", height: "1.0", flags: "relative", opacity: 40},
  {effect: "sepia"}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
  .width(1000).crop("scale").chain()
  .overlay(new Layer().publicId("torn-paper")).width(1.0).height(1.0).flags("relative", "cutter").chain()
  .overlay(new Layer().publicId("torn-paper")).width(1.0).height(1.0).flags("relative").opacity(40).chain()
  .effect("sepia")).imageTag("mac-bubbles.jpg");
JS:
cloudinary.imageTag('mac-bubbles.jpg', {transformation: [
  {width: 1000, crop: "scale"},
  {overlay: new cloudinary.Layer().publicId("torn-paper"), width: "1.0", height: "1.0", flags: ["relative", "cutter"]},
  {overlay: new cloudinary.Layer().publicId("torn-paper"), width: "1.0", height: "1.0", flags: "relative", opacity: 40},
  {effect: "sepia"}
  ]}).toHtml();
jQuery:
$.cloudinary.image("mac-bubbles.jpg", {transformation: [
  {width: 1000, crop: "scale"},
  {overlay: new cloudinary.Layer().publicId("torn-paper"), width: "1.0", height: "1.0", flags: ["relative", "cutter"]},
  {overlay: new cloudinary.Layer().publicId("torn-paper"), width: "1.0", height: "1.0", flags: "relative", opacity: 40},
  {effect: "sepia"}
  ]})
React:
<Image publicId="mac-bubbles.jpg" >
  <Transformation width="1000" crop="scale" />
  <Transformation overlay="torn-paper" width="1.0" height="1.0" flags={["relative", "cutter"]} />
  <Transformation overlay="torn-paper" width="1.0" height="1.0" flags="relative" opacity="40" />
  <Transformation effect="sepia" />
</Image>
Angular:
<cl-image public-id="mac-bubbles.jpg" >
  <cl-transformation width="1000" crop="scale">
  </cl-transformation>
  <cl-transformation overlay="torn-paper" width="1.0" height="1.0" flags={{["relative", "cutter"]}}>
  </cl-transformation>
  <cl-transformation overlay="torn-paper" width="1.0" height="1.0" flags="relative" opacity="40">
  </cl-transformation>
  <cl-transformation effect="sepia">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(1000).Crop("scale").Chain()
  .Overlay(new Layer().PublicId("torn-paper")).Width(1.0).Height(1.0).Flags("relative", "cutter").Chain()
  .Overlay(new Layer().PublicId("torn-paper")).Width(1.0).Height(1.0).Flags("relative").Opacity(40).Chain()
  .Effect("sepia")).BuildImageTag("mac-bubbles.jpg")
Android:
MediaManager.get().url().transformation(new Transformation()
  .width(1000).crop("scale").chain()
  .overlay(new Layer().publicId("torn-paper")).width(1.0).height(1.0).flags("relative", "cutter").chain()
  .overlay(new Layer().publicId("torn-paper")).width(1.0).height(1.0).flags("relative").opacity(40).chain()
  .effect("sepia")).generate("mac-bubbles.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(1000).setCrop("scale").chain()
  .setOverlay("torn-paper").setWidth(1.0).setHeight(1.0).setFlags("relative", "cutter").chain()
  .setOverlay("torn-paper").setWidth(1.0).setHeight(1.0).setFlags("relative").setOpacity(40).chain()
  .setEffect("sepia")).generate("mac-bubbles.jpg")!, cloudinary: cloudinary)
Old timey photograph

We'll start with two images to work off of:

A picture of a baby with some bubbles:

URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/w_1000/mac-bubbles.jpg
Ruby:
cl_image_tag("mac-bubbles.jpg", :width=>1000, :crop=>"scale")
PHP:
cl_image_tag("mac-bubbles.jpg", array("width"=>1000, "crop"=>"scale"))
Python:
CloudinaryImage("mac-bubbles.jpg").image(width=1000, crop="scale")
Node.js:
cloudinary.image("mac-bubbles.jpg", {width: 1000, crop: "scale"})
Java:
cloudinary.url().transformation(new Transformation().width(1000).crop("scale")).imageTag("mac-bubbles.jpg");
JS:
cloudinary.imageTag('mac-bubbles.jpg', {width: 1000, crop: "scale"}).toHtml();
jQuery:
$.cloudinary.image("mac-bubbles.jpg", {width: 1000, crop: "scale"})
React:
<Image publicId="mac-bubbles.jpg" >
  <Transformation width="1000" crop="scale" />
</Image>
Angular:
<cl-image public-id="mac-bubbles.jpg" >
  <cl-transformation width="1000" crop="scale">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(1000).Crop("scale")).BuildImageTag("mac-bubbles.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().width(1000).crop("scale")).generate("mac-bubbles.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(1000).setCrop("scale")).generate("mac-bubbles.jpg")!, cloudinary: cloudinary)
Baby with bubbles picture

An old piece of parchment:

URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/torn-paper.png
Ruby:
cl_image_tag("torn-paper.png")
PHP:
cl_image_tag("torn-paper.png")
Python:
CloudinaryImage("torn-paper.png").image()
Node.js:
cloudinary.image("torn-paper.png")
Java:
cloudinary.url().imageTag("torn-paper.png");
JS:
cloudinary.imageTag('torn-paper.png').toHtml();
jQuery:
$.cloudinary.image("torn-paper.png")
React:
<Image publicId="torn-paper.png" >

</Image>
Angular:
<cl-image public-id="torn-paper.png" >

</cl-image>
.Net:
cloudinary.Api.UrlImgUp.BuildImageTag("torn-paper.png")
Android:
MediaManager.get().url().generate("torn-paper.png");
iOS:
imageView.cldSetImage(cloudinary.createUrl().generate("torn-paper.png")!, cloudinary: cloudinary)
Old piece of parchment

First, we'll use the parchment image as a mask to crop the baby picture (more information here: https://cloudinary.com/cookbook/customshapescropping). Note that we're also resizing the parchment mask to match the width an height of the baby picture.

URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/w_1000/l_torn-paper,w_1.0,h_1.0,fl_relative,fl_cutter/mac-bubbles.jpg
Ruby:
cl_image_tag("mac-bubbles.jpg", :transformation=>[
  {:width=>1000, :crop=>"scale"},
  {:overlay=>"torn-paper", :width=>1.0, :height=>1.0, :flags=>["relative", "cutter"]}
  ])
PHP:
cl_image_tag("mac-bubbles.jpg", array("transformation"=>array(
  array("width"=>1000, "crop"=>"scale"),
  array("overlay"=>"torn-paper", "width"=>1.0, "height"=>1.0, "flags"=>array("relative", "cutter"))
  )))
Python:
CloudinaryImage("mac-bubbles.jpg").image(transformation=[
  {'width': 1000, 'crop': "scale"},
  {'overlay': "torn-paper", 'width': 1.0, 'height': 1.0, 'flags': ["relative", "cutter"]}
  ])
Node.js:
cloudinary.image("mac-bubbles.jpg", {transformation: [
  {width: 1000, crop: "scale"},
  {overlay: "torn-paper", width: "1.0", height: "1.0", flags: ["relative", "cutter"]}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
  .width(1000).crop("scale").chain()
  .overlay(new Layer().publicId("torn-paper")).width(1.0).height(1.0).flags("relative", "cutter")).imageTag("mac-bubbles.jpg");
JS:
cloudinary.imageTag('mac-bubbles.jpg', {transformation: [
  {width: 1000, crop: "scale"},
  {overlay: new cloudinary.Layer().publicId("torn-paper"), width: "1.0", height: "1.0", flags: ["relative", "cutter"]}
  ]}).toHtml();
jQuery:
$.cloudinary.image("mac-bubbles.jpg", {transformation: [
  {width: 1000, crop: "scale"},
  {overlay: new cloudinary.Layer().publicId("torn-paper"), width: "1.0", height: "1.0", flags: ["relative", "cutter"]}
  ]})
React:
<Image publicId="mac-bubbles.jpg" >
  <Transformation width="1000" crop="scale" />
  <Transformation overlay="torn-paper" width="1.0" height="1.0" flags={["relative", "cutter"]} />
</Image>
Angular:
<cl-image public-id="mac-bubbles.jpg" >
  <cl-transformation width="1000" crop="scale">
  </cl-transformation>
  <cl-transformation overlay="torn-paper" width="1.0" height="1.0" flags={{["relative", "cutter"]}}>
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(1000).Crop("scale").Chain()
  .Overlay(new Layer().PublicId("torn-paper")).Width(1.0).Height(1.0).Flags("relative", "cutter")).BuildImageTag("mac-bubbles.jpg")
Android:
MediaManager.get().url().transformation(new Transformation()
  .width(1000).crop("scale").chain()
  .overlay(new Layer().publicId("torn-paper")).width(1.0).height(1.0).flags("relative", "cutter")).generate("mac-bubbles.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(1000).setCrop("scale").chain()
  .setOverlay("torn-paper").setWidth(1.0).setHeight(1.0).setFlags("relative", "cutter")).generate("mac-bubbles.jpg")!, cloudinary: cloudinary)
Custom shape cropping

Next, we'll overlay the parchment on the entire image, making it semi transparent. This will transfer the weathered look over to the image:

URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/w_1000/l_torn-paper,w_1.0,h_1.0,fl_relative,fl_cutter/l_torn-paper,w_1.0,h_1.0,fl_relative,o_40/mac-bubbles.jpg
Ruby:
cl_image_tag("mac-bubbles.jpg", :transformation=>[
  {:width=>1000, :crop=>"scale"},
  {:overlay=>"torn-paper", :width=>1.0, :height=>1.0, :flags=>["relative", "cutter"]},
  {:overlay=>"torn-paper", :width=>1.0, :height=>1.0, :flags=>"relative", :opacity=>40}
  ])
PHP:
cl_image_tag("mac-bubbles.jpg", array("transformation"=>array(
  array("width"=>1000, "crop"=>"scale"),
  array("overlay"=>"torn-paper", "width"=>1.0, "height"=>1.0, "flags"=>array("relative", "cutter")),
  array("overlay"=>"torn-paper", "width"=>1.0, "height"=>1.0, "flags"=>"relative", "opacity"=>40)
  )))
Python:
CloudinaryImage("mac-bubbles.jpg").image(transformation=[
  {'width': 1000, 'crop': "scale"},
  {'overlay': "torn-paper", 'width': 1.0, 'height': 1.0, 'flags': ["relative", "cutter"]},
  {'overlay': "torn-paper", 'width': 1.0, 'height': 1.0, 'flags': "relative", 'opacity': 40}
  ])
Node.js:
cloudinary.image("mac-bubbles.jpg", {transformation: [
  {width: 1000, crop: "scale"},
  {overlay: "torn-paper", width: "1.0", height: "1.0", flags: ["relative", "cutter"]},
  {overlay: "torn-paper", width: "1.0", height: "1.0", flags: "relative", opacity: 40}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
  .width(1000).crop("scale").chain()
  .overlay(new Layer().publicId("torn-paper")).width(1.0).height(1.0).flags("relative", "cutter").chain()
  .overlay(new Layer().publicId("torn-paper")).width(1.0).height(1.0).flags("relative").opacity(40)).imageTag("mac-bubbles.jpg");
JS:
cloudinary.imageTag('mac-bubbles.jpg', {transformation: [
  {width: 1000, crop: "scale"},
  {overlay: new cloudinary.Layer().publicId("torn-paper"), width: "1.0", height: "1.0", flags: ["relative", "cutter"]},
  {overlay: new cloudinary.Layer().publicId("torn-paper"), width: "1.0", height: "1.0", flags: "relative", opacity: 40}
  ]}).toHtml();
jQuery:
$.cloudinary.image("mac-bubbles.jpg", {transformation: [
  {width: 1000, crop: "scale"},
  {overlay: new cloudinary.Layer().publicId("torn-paper"), width: "1.0", height: "1.0", flags: ["relative", "cutter"]},
  {overlay: new cloudinary.Layer().publicId("torn-paper"), width: "1.0", height: "1.0", flags: "relative", opacity: 40}
  ]})
React:
<Image publicId="mac-bubbles.jpg" >
  <Transformation width="1000" crop="scale" />
  <Transformation overlay="torn-paper" width="1.0" height="1.0" flags={["relative", "cutter"]} />
  <Transformation overlay="torn-paper" width="1.0" height="1.0" flags="relative" opacity="40" />
</Image>
Angular:
<cl-image public-id="mac-bubbles.jpg" >
  <cl-transformation width="1000" crop="scale">
  </cl-transformation>
  <cl-transformation overlay="torn-paper" width="1.0" height="1.0" flags={{["relative", "cutter"]}}>
  </cl-transformation>
  <cl-transformation overlay="torn-paper" width="1.0" height="1.0" flags="relative" opacity="40">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(1000).Crop("scale").Chain()
  .Overlay(new Layer().PublicId("torn-paper")).Width(1.0).Height(1.0).Flags("relative", "cutter").Chain()
  .Overlay(new Layer().PublicId("torn-paper")).Width(1.0).Height(1.0).Flags("relative").Opacity(40)).BuildImageTag("mac-bubbles.jpg")
Android:
MediaManager.get().url().transformation(new Transformation()
  .width(1000).crop("scale").chain()
  .overlay(new Layer().publicId("torn-paper")).width(1.0).height(1.0).flags("relative", "cutter").chain()
  .overlay(new Layer().publicId("torn-paper")).width(1.0).height(1.0).flags("relative").opacity(40)).generate("mac-bubbles.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(1000).setCrop("scale").chain()
  .setOverlay("torn-paper").setWidth(1.0).setHeight(1.0).setFlags("relative", "cutter").chain()
  .setOverlay("torn-paper").setWidth(1.0).setHeight(1.0).setFlags("relative").setOpacity(40)).generate("mac-bubbles.jpg")!, cloudinary: cloudinary)
Adding the weathered look back to the image

Finally, we can add an effect to the end product to give it an enhanced feel (in this case, we'll apply the Sepia effect, giving the image a much more aged look):

URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/w_1000/l_torn-paper,w_1.0,h_1.0,fl_relative,fl_cutter/l_torn-paper,w_1.0,h_1.0,fl_relative,o_40/e_sepia/mac-bubbles.jpg
Ruby:
cl_image_tag("mac-bubbles.jpg", :transformation=>[
  {:width=>1000, :crop=>"scale"},
  {:overlay=>"torn-paper", :width=>1.0, :height=>1.0, :flags=>["relative", "cutter"]},
  {:overlay=>"torn-paper", :width=>1.0, :height=>1.0, :flags=>"relative", :opacity=>40},
  {:effect=>"sepia"}
  ])
PHP:
cl_image_tag("mac-bubbles.jpg", array("transformation"=>array(
  array("width"=>1000, "crop"=>"scale"),
  array("overlay"=>"torn-paper", "width"=>1.0, "height"=>1.0, "flags"=>array("relative", "cutter")),
  array("overlay"=>"torn-paper", "width"=>1.0, "height"=>1.0, "flags"=>"relative", "opacity"=>40),
  array("effect"=>"sepia")
  )))
Python:
CloudinaryImage("mac-bubbles.jpg").image(transformation=[
  {'width': 1000, 'crop': "scale"},
  {'overlay': "torn-paper", 'width': 1.0, 'height': 1.0, 'flags': ["relative", "cutter"]},
  {'overlay': "torn-paper", 'width': 1.0, 'height': 1.0, 'flags': "relative", 'opacity': 40},
  {'effect': "sepia"}
  ])
Node.js:
cloudinary.image("mac-bubbles.jpg", {transformation: [
  {width: 1000, crop: "scale"},
  {overlay: "torn-paper", width: "1.0", height: "1.0", flags: ["relative", "cutter"]},
  {overlay: "torn-paper", width: "1.0", height: "1.0", flags: "relative", opacity: 40},
  {effect: "sepia"}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
  .width(1000).crop("scale").chain()
  .overlay(new Layer().publicId("torn-paper")).width(1.0).height(1.0).flags("relative", "cutter").chain()
  .overlay(new Layer().publicId("torn-paper")).width(1.0).height(1.0).flags("relative").opacity(40).chain()
  .effect("sepia")).imageTag("mac-bubbles.jpg");
JS:
cloudinary.imageTag('mac-bubbles.jpg', {transformation: [
  {width: 1000, crop: "scale"},
  {overlay: new cloudinary.Layer().publicId("torn-paper"), width: "1.0", height: "1.0", flags: ["relative", "cutter"]},
  {overlay: new cloudinary.Layer().publicId("torn-paper"), width: "1.0", height: "1.0", flags: "relative", opacity: 40},
  {effect: "sepia"}
  ]}).toHtml();
jQuery:
$.cloudinary.image("mac-bubbles.jpg", {transformation: [
  {width: 1000, crop: "scale"},
  {overlay: new cloudinary.Layer().publicId("torn-paper"), width: "1.0", height: "1.0", flags: ["relative", "cutter"]},
  {overlay: new cloudinary.Layer().publicId("torn-paper"), width: "1.0", height: "1.0", flags: "relative", opacity: 40},
  {effect: "sepia"}
  ]})
React:
<Image publicId="mac-bubbles.jpg" >
  <Transformation width="1000" crop="scale" />
  <Transformation overlay="torn-paper" width="1.0" height="1.0" flags={["relative", "cutter"]} />
  <Transformation overlay="torn-paper" width="1.0" height="1.0" flags="relative" opacity="40" />
  <Transformation effect="sepia" />
</Image>
Angular:
<cl-image public-id="mac-bubbles.jpg" >
  <cl-transformation width="1000" crop="scale">
  </cl-transformation>
  <cl-transformation overlay="torn-paper" width="1.0" height="1.0" flags={{["relative", "cutter"]}}>
  </cl-transformation>
  <cl-transformation overlay="torn-paper" width="1.0" height="1.0" flags="relative" opacity="40">
  </cl-transformation>
  <cl-transformation effect="sepia">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(1000).Crop("scale").Chain()
  .Overlay(new Layer().PublicId("torn-paper")).Width(1.0).Height(1.0).Flags("relative", "cutter").Chain()
  .Overlay(new Layer().PublicId("torn-paper")).Width(1.0).Height(1.0).Flags("relative").Opacity(40).Chain()
  .Effect("sepia")).BuildImageTag("mac-bubbles.jpg")
Android:
MediaManager.get().url().transformation(new Transformation()
  .width(1000).crop("scale").chain()
  .overlay(new Layer().publicId("torn-paper")).width(1.0).height(1.0).flags("relative", "cutter").chain()
  .overlay(new Layer().publicId("torn-paper")).width(1.0).height(1.0).flags("relative").opacity(40).chain()
  .effect("sepia")).generate("mac-bubbles.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(1000).setCrop("scale").chain()
  .setOverlay("torn-paper").setWidth(1.0).setHeight(1.0).setFlags("relative", "cutter").chain()
  .setOverlay("torn-paper").setWidth(1.0).setHeight(1.0).setFlags("relative").setOpacity(40).chain()
  .setEffect("sepia")).generate("mac-bubbles.jpg")!, cloudinary: cloudinary)
Sepia effect applied

Try using a combination of these effects to create a wide variety of styles:

Changed to grayscale to make it look like it was taken from a newspaper article:

URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/w_1000/l_torn-paper,w_1.0,h_1.0,fl_relative,fl_cutter/l_torn-paper,w_1.0,h_1.0,fl_relative,o_40/e_grayscale/mac-bubbles.jpg
Ruby:
cl_image_tag("mac-bubbles.jpg", :transformation=>[
  {:width=>1000, :crop=>"scale"},
  {:overlay=>"torn-paper", :width=>1.0, :height=>1.0, :flags=>["relative", "cutter"]},
  {:overlay=>"torn-paper", :width=>1.0, :height=>1.0, :flags=>"relative", :opacity=>40},
  {:effect=>"grayscale"}
  ])
PHP:
cl_image_tag("mac-bubbles.jpg", array("transformation"=>array(
  array("width"=>1000, "crop"=>"scale"),
  array("overlay"=>"torn-paper", "width"=>1.0, "height"=>1.0, "flags"=>array("relative", "cutter")),
  array("overlay"=>"torn-paper", "width"=>1.0, "height"=>1.0, "flags"=>"relative", "opacity"=>40),
  array("effect"=>"grayscale")
  )))
Python:
CloudinaryImage("mac-bubbles.jpg").image(transformation=[
  {'width': 1000, 'crop': "scale"},
  {'overlay': "torn-paper", 'width': 1.0, 'height': 1.0, 'flags': ["relative", "cutter"]},
  {'overlay': "torn-paper", 'width': 1.0, 'height': 1.0, 'flags': "relative", 'opacity': 40},
  {'effect': "grayscale"}
  ])
Node.js:
cloudinary.image("mac-bubbles.jpg", {transformation: [
  {width: 1000, crop: "scale"},
  {overlay: "torn-paper", width: "1.0", height: "1.0", flags: ["relative", "cutter"]},
  {overlay: "torn-paper", width: "1.0", height: "1.0", flags: "relative", opacity: 40},
  {effect: "grayscale"}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
  .width(1000).crop("scale").chain()
  .overlay(new Layer().publicId("torn-paper")).width(1.0).height(1.0).flags("relative", "cutter").chain()
  .overlay(new Layer().publicId("torn-paper")).width(1.0).height(1.0).flags("relative").opacity(40).chain()
  .effect("grayscale")).imageTag("mac-bubbles.jpg");
JS:
cloudinary.imageTag('mac-bubbles.jpg', {transformation: [
  {width: 1000, crop: "scale"},
  {overlay: new cloudinary.Layer().publicId("torn-paper"), width: "1.0", height: "1.0", flags: ["relative", "cutter"]},
  {overlay: new cloudinary.Layer().publicId("torn-paper"), width: "1.0", height: "1.0", flags: "relative", opacity: 40},
  {effect: "grayscale"}
  ]}).toHtml();
jQuery:
$.cloudinary.image("mac-bubbles.jpg", {transformation: [
  {width: 1000, crop: "scale"},
  {overlay: new cloudinary.Layer().publicId("torn-paper"), width: "1.0", height: "1.0", flags: ["relative", "cutter"]},
  {overlay: new cloudinary.Layer().publicId("torn-paper"), width: "1.0", height: "1.0", flags: "relative", opacity: 40},
  {effect: "grayscale"}
  ]})
React:
<Image publicId="mac-bubbles.jpg" >
  <Transformation width="1000" crop="scale" />
  <Transformation overlay="torn-paper" width="1.0" height="1.0" flags={["relative", "cutter"]} />
  <Transformation overlay="torn-paper" width="1.0" height="1.0" flags="relative" opacity="40" />
  <Transformation effect="grayscale" />
</Image>
Angular:
<cl-image public-id="mac-bubbles.jpg" >
  <cl-transformation width="1000" crop="scale">
  </cl-transformation>
  <cl-transformation overlay="torn-paper" width="1.0" height="1.0" flags={{["relative", "cutter"]}}>
  </cl-transformation>
  <cl-transformation overlay="torn-paper" width="1.0" height="1.0" flags="relative" opacity="40">
  </cl-transformation>
  <cl-transformation effect="grayscale">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(1000).Crop("scale").Chain()
  .Overlay(new Layer().PublicId("torn-paper")).Width(1.0).Height(1.0).Flags("relative", "cutter").Chain()
  .Overlay(new Layer().PublicId("torn-paper")).Width(1.0).Height(1.0).Flags("relative").Opacity(40).Chain()
  .Effect("grayscale")).BuildImageTag("mac-bubbles.jpg")
Android:
MediaManager.get().url().transformation(new Transformation()
  .width(1000).crop("scale").chain()
  .overlay(new Layer().publicId("torn-paper")).width(1.0).height(1.0).flags("relative", "cutter").chain()
  .overlay(new Layer().publicId("torn-paper")).width(1.0).height(1.0).flags("relative").opacity(40).chain()
  .effect("grayscale")).generate("mac-bubbles.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(1000).setCrop("scale").chain()
  .setOverlay("torn-paper").setWidth(1.0).setHeight(1.0).setFlags("relative", "cutter").chain()
  .setOverlay("torn-paper").setWidth(1.0).setHeight(1.0).setFlags("relative").setOpacity(40).chain()
  .setEffect("grayscale")).generate("mac-bubbles.jpg")!, cloudinary: cloudinary)
Grayscale

Adding some overlayed text:

URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidiOSAll
URL:
https://res.cloudinary.com/demo/image/upload/w_1000/l_torn-paper,w_1.0,h_1.0,fl_relative,fl_cutter/l_torn-paper,w_1.0,h_1.0,fl_relative,o_40/o_80,b_white/e_sepia/l_text:Cedarville Cursive_50_bold_stroke:"Mad Dog" Mac,g_south_west,x_60,y_120,o_70,a_10/l_text:Cedarville Cursive_50_bold_stroke:South Dakota 1890,g_south_west,x_60,y_90,o_70,a_10/mac-bubbles.jpg
Ruby:
cl_image_tag("mac-bubbles.jpg", :transformation=>[
  {:width=>1000, :crop=>"scale"},
  {:overlay=>"torn-paper", :width=>1.0, :height=>1.0, :flags=>["relative", "cutter"]},
  {:overlay=>"torn-paper", :width=>1.0, :height=>1.0, :flags=>"relative", :opacity=>40},
  {:opacity=>80, :background=>"white"},
  {:effect=>"sepia"},
  {:overlay=>{:font_family=>"Cursive", :font_size=>50, :font_weight=>"bold", :stroke=>"stroke", :text=>"%22Mad%20Dog%22%20Mac"}, :gravity=>"south_west", :x=>60, :y=>120, :opacity=>70, :angle=>10},
  {:overlay=>{:font_family=>"Cursive", :font_size=>50, :font_weight=>"bold", :stroke=>"stroke", :text=>"South%20Dakota%201890"}, :gravity=>"south_west", :x=>60, :y=>90, :opacity=>70, :angle=>10}
  ])
PHP:
cl_image_tag("mac-bubbles.jpg", array("transformation"=>array(
  array("width"=>1000, "crop"=>"scale"),
  array("overlay"=>"torn-paper", "width"=>1.0, "height"=>1.0, "flags"=>array("relative", "cutter")),
  array("overlay"=>"torn-paper", "width"=>1.0, "height"=>1.0, "flags"=>"relative", "opacity"=>40),
  array("opacity"=>80, "background"=>"white"),
  array("effect"=>"sepia"),
  array("overlay"=>array("font_family"=>"Cursive", "font_size"=>50, "font_weight"=>"bold", "stroke"=>"stroke", "text"=>"%22Mad%20Dog%22%20Mac"), "gravity"=>"south_west", "x"=>60, "y"=>120, "opacity"=>70, "angle"=>10),
  array("overlay"=>array("font_family"=>"Cursive", "font_size"=>50, "font_weight"=>"bold", "stroke"=>"stroke", "text"=>"South%20Dakota%201890"), "gravity"=>"south_west", "x"=>60, "y"=>90, "opacity"=>70, "angle"=>10)
  )))
Python:
CloudinaryImage("mac-bubbles.jpg").image(transformation=[
  {'width': 1000, 'crop': "scale"},
  {'overlay': "torn-paper", 'width': 1.0, 'height': 1.0, 'flags': ["relative", "cutter"]},
  {'overlay': "torn-paper", 'width': 1.0, 'height': 1.0, 'flags': "relative", 'opacity': 40},
  {'opacity': 80, 'background': "white"},
  {'effect': "sepia"},
  {'overlay': {'font_family': "Cursive", 'font_size': 50, 'font_weight': "bold", 'stroke': "stroke", 'text': "%22Mad%20Dog%22%20Mac"}, 'gravity': "south_west", 'x': 60, 'y': 120, 'opacity': 70, 'angle': 10},
  {'overlay': {'font_family': "Cursive", 'font_size': 50, 'font_weight': "bold", 'stroke': "stroke", 'text': "South%20Dakota%201890"}, 'gravity': "south_west", 'x': 60, 'y': 90, 'opacity': 70, 'angle': 10}
  ])
Node.js:
cloudinary.image("mac-bubbles.jpg", {transformation: [
  {width: 1000, crop: "scale"},
  {overlay: "torn-paper", width: "1.0", height: "1.0", flags: ["relative", "cutter"]},
  {overlay: "torn-paper", width: "1.0", height: "1.0", flags: "relative", opacity: 40},
  {opacity: 80, background: "white"},
  {effect: "sepia"},
  {overlay: {font_family: "Cursive", font_size: 50, font_weight: "bold", stroke: "stroke", text: "%22Mad%20Dog%22%20Mac"}, gravity: "south_west", x: 60, y: 120, opacity: 70, angle: 10},
  {overlay: {font_family: "Cursive", font_size: 50, font_weight: "bold", stroke: "stroke", text: "South%20Dakota%201890"}, gravity: "south_west", x: 60, y: 90, opacity: 70, angle: 10}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
  .width(1000).crop("scale").chain()
  .overlay(new Layer().publicId("torn-paper")).width(1.0).height(1.0).flags("relative", "cutter").chain()
  .overlay(new Layer().publicId("torn-paper")).width(1.0).height(1.0).flags("relative").opacity(40).chain()
  .opacity(80).background("white").chain()
  .effect("sepia").chain()
  .overlay(new TextLayer().fontFamily("Cursive").fontSize(50).fontWeight("bold").stroke("stroke").text("%22Mad%20Dog%22%20Mac")).gravity("south_west").x(60).y(120).opacity(70).angle(10).chain()
  .overlay(new TextLayer().fontFamily("Cursive").fontSize(50).fontWeight("bold").stroke("stroke").text("South%20Dakota%201890")).gravity("south_west").x(60).y(90).opacity(70).angle(10)).imageTag("mac-bubbles.jpg");
JS:
cloudinary.imageTag('mac-bubbles.jpg', {transformation: [
  {width: 1000, crop: "scale"},
  {overlay: new cloudinary.Layer().publicId("torn-paper"), width: "1.0", height: "1.0", flags: ["relative", "cutter"]},
  {overlay: new cloudinary.Layer().publicId("torn-paper"), width: "1.0", height: "1.0", flags: "relative", opacity: 40},
  {opacity: 80, background: "white"},
  {effect: "sepia"},
  {overlay: new cloudinary.TextLayer().fontFamily("Cursive").fontSize(50).fontWeight("bold").stroke("stroke").text("%22Mad%20Dog%22%20Mac"), gravity: "south_west", x: 60, y: 120, opacity: 70, angle: 10},
  {overlay: new cloudinary.TextLayer().fontFamily("Cursive").fontSize(50).fontWeight("bold").stroke("stroke").text("South%20Dakota%201890"), gravity: "south_west", x: 60, y: 90, opacity: 70, angle: 10}
  ]}).toHtml();
jQuery:
$.cloudinary.image("mac-bubbles.jpg", {transformation: [
  {width: 1000, crop: "scale"},
  {overlay: new cloudinary.Layer().publicId("torn-paper"), width: "1.0", height: "1.0", flags: ["relative", "cutter"]},
  {overlay: new cloudinary.Layer().publicId("torn-paper"), width: "1.0", height: "1.0", flags: "relative", opacity: 40},
  {opacity: 80, background: "white"},
  {effect: "sepia"},
  {overlay: new cloudinary.TextLayer().fontFamily("Cursive").fontSize(50).fontWeight("bold").stroke("stroke").text("%22Mad%20Dog%22%20Mac"), gravity: "south_west", x: 60, y: 120, opacity: 70, angle: 10},
  {overlay: new cloudinary.TextLayer().fontFamily("Cursive").fontSize(50).fontWeight("bold").stroke("stroke").text("South%20Dakota%201890"), gravity: "south_west", x: 60, y: 90, opacity: 70, angle: 10}
  ]})
React:
<Image publicId="mac-bubbles.jpg" >
  <Transformation width="1000" crop="scale" />
  <Transformation overlay="torn-paper" width="1.0" height="1.0" flags={["relative", "cutter"]} />
  <Transformation overlay="torn-paper" width="1.0" height="1.0" flags="relative" opacity="40" />
  <Transformation opacity="80" background="white" />
  <Transformation effect="sepia" />
  <Transformation overlay={{fontFamily: "Cursive", fontSize: 50, fontWeight: "bold", stroke: "stroke", text: "%22Mad%20Dog%22%20Mac"}} gravity="south_west" x="60" y="120" opacity="70" angle="10" />
  <Transformation overlay={{fontFamily: "Cursive", fontSize: 50, fontWeight: "bold", stroke: "stroke", text: "South%20Dakota%201890"}} gravity="south_west" x="60" y="90" opacity="70" angle="10" />
</Image>
Angular:
<cl-image public-id="mac-bubbles.jpg" >
  <cl-transformation width="1000" crop="scale">
  </cl-transformation>
  <cl-transformation overlay="torn-paper" width="1.0" height="1.0" flags={{["relative", "cutter"]}}>
  </cl-transformation>
  <cl-transformation overlay="torn-paper" width="1.0" height="1.0" flags="relative" opacity="40">
  </cl-transformation>
  <cl-transformation opacity="80" background="white">
  </cl-transformation>
  <cl-transformation effect="sepia">
  </cl-transformation>
  <cl-transformation overlay="text:Cedarville%20Cursive_50_bold_stroke:%22Mad%20Dog%22%20Mac" gravity="south_west" x="60" y="120" opacity="70" angle="10">
  </cl-transformation>
  <cl-transformation overlay="text:Cedarville%20Cursive_50_bold_stroke:South%20Dakota%201890" gravity="south_west" x="60" y="90" opacity="70" angle="10">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(1000).Crop("scale").Chain()
  .Overlay(new Layer().PublicId("torn-paper")).Width(1.0).Height(1.0).Flags("relative", "cutter").Chain()
  .Overlay(new Layer().PublicId("torn-paper")).Width(1.0).Height(1.0).Flags("relative").Opacity(40).Chain()
  .Opacity(80).Background("white").Chain()
  .Effect("sepia").Chain()
  .Overlay(new TextLayer().FontFamily("Cursive").FontSize(50).FontWeight("bold").Stroke("stroke").Text("%22Mad%20Dog%22%20Mac")).Gravity("south_west").X(60).Y(120).Opacity(70).Angle(10).Chain()
  .Overlay(new TextLayer().FontFamily("Cursive").FontSize(50).FontWeight("bold").Stroke("stroke").Text("South%20Dakota%201890")).Gravity("south_west").X(60).Y(90).Opacity(70).Angle(10)).BuildImageTag("mac-bubbles.jpg")
Android:
MediaManager.get().url().transformation(new Transformation()
  .width(1000).crop("scale").chain()
  .overlay(new Layer().publicId("torn-paper")).width(1.0).height(1.0).flags("relative", "cutter").chain()
  .overlay(new Layer().publicId("torn-paper")).width(1.0).height(1.0).flags("relative").opacity(40).chain()
  .opacity(80).background("white").chain()
  .effect("sepia").chain()
  .overlay(new TextLayer().fontFamily("Cursive").fontSize(50).fontWeight("bold").stroke("stroke").text("%22Mad%20Dog%22%20Mac")).gravity("south_west").x(60).y(120).opacity(70).angle(10).chain()
  .overlay(new TextLayer().fontFamily("Cursive").fontSize(50).fontWeight("bold").stroke("stroke").text("South%20Dakota%201890")).gravity("south_west").x(60).y(90).opacity(70).angle(10)).generate("mac-bubbles.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(1000).setCrop("scale").chain()
  .setOverlay("torn-paper").setWidth(1.0).setHeight(1.0).setFlags("relative", "cutter").chain()
  .setOverlay("torn-paper").setWidth(1.0).setHeight(1.0).setFlags("relative").setOpacity(40).chain()
  .setOpacity(80).setBackground("white").chain()
  .setEffect("sepia").chain()
  .setOverlay("text:Cedarville%20Cursive_50_bold_stroke:%22Mad%20Dog%22%20Mac").setGravity("south_west").setX(60).setY(120).setOpacity(70).setAngle(10).chain()
  .setOverlay("text:Cedarville%20Cursive_50_bold_stroke:South%20Dakota%201890").setGravity("south_west").setX(60).setY(90).setOpacity(70).setAngle(10)).generate("mac-bubbles.jpg")!, cloudinary: cloudinary)
Font overlay

Post some of your variations!

by Josh Slivken
Tags: