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.

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("torn-paper").width(1.0).height(1.0).flags("relative", "cutter").chain()
  .overlay("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: "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"}
  ]}).toHtml();
jQuery:
$.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"}
  ]})
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("torn-paper").Width(1.0).Height(1.0).Flags("relative", "cutter").Chain()
  .Overlay("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("torn-paper").width(1.0).height(1.0).flags("relative", "cutter").chain()
  .overlay("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:

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:

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.

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("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: "torn-paper", width: "1.0", height: "1.0", flags: ["relative", "cutter"]}
  ]}).toHtml();
jQuery:
$.cloudinary.image("mac-bubbles.jpg", {transformation: [
  {width: 1000, crop: "scale"},
  {overlay: "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("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("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:

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("torn-paper").width(1.0).height(1.0).flags("relative", "cutter").chain()
  .overlay("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: "torn-paper", width: "1.0", height: "1.0", flags: ["relative", "cutter"]},
  {overlay: "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: "torn-paper", width: "1.0", height: "1.0", flags: ["relative", "cutter"]},
  {overlay: "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("torn-paper").Width(1.0).Height(1.0).Flags("relative", "cutter").Chain()
  .Overlay("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("torn-paper").width(1.0).height(1.0).flags("relative", "cutter").chain()
  .overlay("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):

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("torn-paper").width(1.0).height(1.0).flags("relative", "cutter").chain()
  .overlay("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: "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"}
  ]}).toHtml();
jQuery:
$.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"}
  ]})
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("torn-paper").Width(1.0).Height(1.0).Flags("relative", "cutter").Chain()
  .Overlay("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("torn-paper").width(1.0).height(1.0).flags("relative", "cutter").chain()
  .overlay("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:

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("torn-paper").width(1.0).height(1.0).flags("relative", "cutter").chain()
  .overlay("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: "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"}
  ]}).toHtml();
jQuery:
$.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"}
  ]})
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("torn-paper").Width(1.0).Height(1.0).Flags("relative", "cutter").Chain()
  .Overlay("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("torn-paper").width(1.0).height(1.0).flags("relative", "cutter").chain()
  .overlay("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:

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=>"text:Cedarville%20Cursive_50_bold_stroke:%22Mad%20Dog%22%20Mac", :gravity=>"south_west", :x=>60, :y=>120, :opacity=>70, :angle=>10},
  {:overlay=>"text:Cedarville%20Cursive_50_bold_stroke: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"=>"text:Cedarville%20Cursive_50_bold_stroke:%22Mad%20Dog%22%20Mac", "gravity"=>"south_west", "x"=>60, "y"=>120, "opacity"=>70, "angle"=>10),
  array("overlay"=>"text:Cedarville%20Cursive_50_bold_stroke: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": "text:Cedarville%20Cursive_50_bold_stroke:%22Mad%20Dog%22%20Mac", "gravity": "south_west", "x": 60, "y": 120, "opacity": 70, "angle": 10},
  {"overlay": "text:Cedarville%20Cursive_50_bold_stroke: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: "text:Cedarville%20Cursive_50_bold_stroke:%22Mad%20Dog%22%20Mac", gravity: "south_west", x: 60, y: 120, opacity: 70, angle: 10},
  {overlay: "text:Cedarville%20Cursive_50_bold_stroke: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("torn-paper").width(1.0).height(1.0).flags("relative", "cutter").chain()
  .overlay("torn-paper").width(1.0).height(1.0).flags("relative").opacity(40).chain()
  .opacity(80).background("white").chain()
  .effect("sepia").chain()
  .overlay("text:Cedarville%20Cursive_50_bold_stroke:%22Mad%20Dog%22%20Mac").gravity("south_west").x(60).y(120).opacity(70).angle(10).chain()
  .overlay("text:Cedarville%20Cursive_50_bold_stroke: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: "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: "text:Cedarville%20Cursive_50_bold_stroke:%22Mad%20Dog%22%20Mac", gravity: "south_west", x: 60, y: 120, opacity: 70, angle: 10},
  {overlay: "text:Cedarville%20Cursive_50_bold_stroke: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: "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: "text:Cedarville%20Cursive_50_bold_stroke:%22Mad%20Dog%22%20Mac", gravity: "south_west", x: 60, y: 120, opacity: 70, angle: 10},
  {overlay: "text:Cedarville%20Cursive_50_bold_stroke: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="text:Cedarville%20Cursive_50_bold_stroke:%22Mad%20Dog%22%20Mac" gravity="south_west" x="60" y="120" opacity="70" angle="10" />
  <Transformation overlay="text:Cedarville%20Cursive_50_bold_stroke: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("torn-paper").Width(1.0).Height(1.0).Flags("relative", "cutter").Chain()
  .Overlay("torn-paper").Width(1.0).Height(1.0).Flags("relative").Opacity(40).Chain()
  .Opacity(80).Background("white").Chain()
  .Effect("sepia").Chain()
  .Overlay("text:Cedarville%20Cursive_50_bold_stroke:%22Mad%20Dog%22%20Mac").Gravity("south_west").X(60).Y(120).Opacity(70).Angle(10).Chain()
  .Overlay("text:Cedarville%20Cursive_50_bold_stroke: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("torn-paper").width(1.0).height(1.0).flags("relative", "cutter").chain()
  .overlay("torn-paper").width(1.0).height(1.0).flags("relative").opacity(40).chain()
  .opacity(80).background("white").chain()
  .effect("sepia").chain()
  .overlay("text:Cedarville%20Cursive_50_bold_stroke:%22Mad%20Dog%22%20Mac").gravity("south_west").x(60).y(120).opacity(70).angle(10).chain()
  .overlay("text:Cedarville%20Cursive_50_bold_stroke: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: