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(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:

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(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:

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):

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:

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:

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: