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.jsJavaJSjQueryReactVue.jsAngular.NetAndroidiOSAll
URL:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
$.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:
Copy to clipboard
<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>
Vue.js:
Copy to clipboard
<cld-image publicId="mac-bubbles.jpg" >
  <cld-transformation width="1000" crop="scale" />
  <cld-transformation overlay="torn-paper" width="1.0" height="1.0" flags={["relative", "cutter"]} />
  <cld-transformation overlay="torn-paper" width="1.0" height="1.0" flags="relative" opacity="40" />
  <cld-transformation effect="sepia" />
</cld-image>
Angular:
Copy to clipboard
<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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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.jsJavaJSjQueryReactVue.jsAngular.NetAndroidiOSAll
URL:
Copy to clipboard
https://res.cloudinary.com/demo/image/upload/w_1000/mac-bubbles.jpg
Ruby:
Copy to clipboard
cl_image_tag("mac-bubbles.jpg", :width=>1000, :crop=>"scale")
PHP:
Copy to clipboard
cl_image_tag("mac-bubbles.jpg", array("width"=>1000, "crop"=>"scale"))
Python:
Copy to clipboard
CloudinaryImage("mac-bubbles.jpg").image(width=1000, crop="scale")
Node.js:
Copy to clipboard
cloudinary.image("mac-bubbles.jpg", {width: 1000, crop: "scale"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().width(1000).crop("scale")).imageTag("mac-bubbles.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('mac-bubbles.jpg', {width: 1000, crop: "scale"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("mac-bubbles.jpg", {width: 1000, crop: "scale"})
React:
Copy to clipboard
<Image publicId="mac-bubbles.jpg" >
  <Transformation width="1000" crop="scale" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="mac-bubbles.jpg" >
  <cld-transformation width="1000" crop="scale" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="mac-bubbles.jpg" >
  <cl-transformation width="1000" crop="scale">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(1000).Crop("scale")).BuildImageTag("mac-bubbles.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().width(1000).crop("scale")).generate("mac-bubbles.jpg");
iOS:
Copy to clipboard
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.jsJavaJSjQueryReactVue.jsAngular.NetAndroidiOSAll
URL:
Copy to clipboard
https://res.cloudinary.com/demo/image/upload/torn-paper.png
Ruby:
Copy to clipboard
cl_image_tag("torn-paper.png")
PHP:
Copy to clipboard
cl_image_tag("torn-paper.png")
Python:
Copy to clipboard
CloudinaryImage("torn-paper.png").image()
Node.js:
Copy to clipboard
cloudinary.image("torn-paper.png")
Java:
Copy to clipboard
cloudinary.url().imageTag("torn-paper.png");
JS:
Copy to clipboard
cloudinary.imageTag('torn-paper.png').toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("torn-paper.png")
React:
Copy to clipboard
<Image publicId="torn-paper.png" >

</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="torn-paper.png" >

</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="torn-paper.png" >

</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.BuildImageTag("torn-paper.png")
Android:
Copy to clipboard
MediaManager.get().url().generate("torn-paper.png");
iOS:
Copy to clipboard
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.jsJavaJSjQueryReactVue.jsAngular.NetAndroidiOSAll
URL:
Copy to clipboard
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:
Copy to clipboard
cl_image_tag("mac-bubbles.jpg", :transformation=>[
  {:width=>1000, :crop=>"scale"},
  {:overlay=>"torn-paper", :width=>1.0, :height=>1.0, :flags=>["relative", "cutter"]}
  ])
PHP:
Copy to clipboard
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:
Copy to clipboard
CloudinaryImage("mac-bubbles.jpg").image(transformation=[
  {'width': 1000, 'crop': "scale"},
  {'overlay': "torn-paper", 'width': 1.0, 'height': 1.0, 'flags': ["relative", "cutter"]}
  ])
Node.js:
Copy to clipboard
cloudinary.image("mac-bubbles.jpg", {transformation: [
  {width: 1000, crop: "scale"},
  {overlay: "torn-paper", width: "1.0", height: "1.0", flags: ["relative", "cutter"]}
  ]})
Java:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
$.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:
Copy to clipboard
<Image publicId="mac-bubbles.jpg" >
  <Transformation width="1000" crop="scale" />
  <Transformation overlay="torn-paper" width="1.0" height="1.0" flags={["relative", "cutter"]} />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="mac-bubbles.jpg" >
  <cld-transformation width="1000" crop="scale" />
  <cld-transformation overlay="torn-paper" width="1.0" height="1.0" flags={["relative", "cutter"]} />
</cld-image>
Angular:
Copy to clipboard
<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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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.jsJavaJSjQueryReactVue.jsAngular.NetAndroidiOSAll
URL:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
$.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:
Copy to clipboard
<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>
Vue.js:
Copy to clipboard
<cld-image publicId="mac-bubbles.jpg" >
  <cld-transformation width="1000" crop="scale" />
  <cld-transformation overlay="torn-paper" width="1.0" height="1.0" flags={["relative", "cutter"]} />
  <cld-transformation overlay="torn-paper" width="1.0" height="1.0" flags="relative" opacity="40" />
</cld-image>
Angular:
Copy to clipboard
<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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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.jsJavaJSjQueryReactVue.jsAngular.NetAndroidiOSAll
URL:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
$.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:
Copy to clipboard
<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>
Vue.js:
Copy to clipboard
<cld-image publicId="mac-bubbles.jpg" >
  <cld-transformation width="1000" crop="scale" />
  <cld-transformation overlay="torn-paper" width="1.0" height="1.0" flags={["relative", "cutter"]} />
  <cld-transformation overlay="torn-paper" width="1.0" height="1.0" flags="relative" opacity="40" />
  <cld-transformation effect="sepia" />
</cld-image>
Angular:
Copy to clipboard
<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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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.jsJavaJSjQueryReactVue.jsAngular.NetAndroidiOSAll
URL:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
$.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:
Copy to clipboard
<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>
Vue.js:
Copy to clipboard
<cld-image publicId="mac-bubbles.jpg" >
  <cld-transformation width="1000" crop="scale" />
  <cld-transformation overlay="torn-paper" width="1.0" height="1.0" flags={["relative", "cutter"]} />
  <cld-transformation overlay="torn-paper" width="1.0" height="1.0" flags="relative" opacity="40" />
  <cld-transformation effect="grayscale" />
</cld-image>
Angular:
Copy to clipboard
<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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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.jsJavaJSjQueryReactVue.jsAngular.NetAndroidiOSAll
URL:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
$.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:
Copy to clipboard
<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>
Vue.js:
Copy to clipboard
<cld-image publicId="mac-bubbles.jpg" >
  <cld-transformation width="1000" crop="scale" />
  <cld-transformation overlay="torn-paper" width="1.0" height="1.0" flags={["relative", "cutter"]} />
  <cld-transformation overlay="torn-paper" width="1.0" height="1.0" flags="relative" opacity="40" />
  <cld-transformation opacity="80" background="white" />
  <cld-transformation effect="sepia" />
  <cld-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" />
  <cld-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" />
</cld-image>
Angular:
Copy to clipboard
<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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
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: