Custom shapes cut out

Cut out any shape from an image. Do this by having your own custom image as the mask for the cutout by setting overlay parameter as your mask image's public ID and chaining a transformation with effect parameter as cut_out and flags parameter as layer_apply (l_<public_id>/e_cut_out,fl_layer_apply in URLs).

Here is the original image:

Ruby:
cl_image_tag("night_sky.jpg")
PHP:
cl_image_tag("night_sky.jpg")
Python:
CloudinaryImage("night_sky.jpg").image()
Node.js:
cloudinary.image("night_sky.jpg")
Java:
cloudinary.url().imageTag("night_sky.jpg");
JS:
cloudinary.imageTag('night_sky.jpg').toHtml();
jQuery:
$.cloudinary.image("night_sky.jpg")
React:
<Image publicId="night_sky.jpg" >

</Image>
Angular:
<cl-image public-id="night_sky.jpg" >

</cl-image>
.Net:
cloudinary.Api.UrlImgUp.BuildImageTag("night_sky.jpg")
Android:
MediaManager.get().url().generate("night_sky.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().generate("night_sky.jpg")!, cloudinary: cloudinary)
Original

The following transparent ring was upload to Cloudinary with the 'ring2' public id:

Ruby:
cl_image_tag("ring2.png")
PHP:
cl_image_tag("ring2.png")
Python:
CloudinaryImage("ring2.png").image()
Node.js:
cloudinary.image("ring2.png")
Java:
cloudinary.url().imageTag("ring2.png");
JS:
cloudinary.imageTag('ring2.png').toHtml();
jQuery:
$.cloudinary.image("ring2.png")
React:
<Image publicId="ring2.png" >

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

</cl-image>
.Net:
cloudinary.Api.UrlImgUp.BuildImageTag("ring2.png")
Android:
MediaManager.get().url().generate("ring2.png");
iOS:
imageView.cldSetImage(cloudinary.createUrl().generate("ring2.png")!, cloudinary: cloudinary)
Original

Now you can use this image with the effect parameter as cut_out. For example, when applying it to an image with the sample public id:

Ruby:
cl_image_tag("night_sky.jpg", :transformation=>[
  {:overlay=>"ring2", :radius=>"max", :width=>200, :height=>200},
  {:effect=>"cut_out", :flags=>"layer_apply"}
  ])
PHP:
cl_image_tag("night_sky.jpg", array("transformation"=>array(
  array("overlay"=>"ring2", "radius"=>"max", "width"=>200, "height"=>200),
  array("effect"=>"cut_out", "flags"=>"layer_apply")
  )))
Python:
CloudinaryImage("night_sky.jpg").image(transformation=[
  {"overlay": "ring2", "radius": "max", "width": 200, "height": 200},
  {"effect": "cut_out", "flags": "layer_apply"}
  ])
Node.js:
cloudinary.image("night_sky.jpg", {transformation: [
  {overlay: "ring2", radius: "max", width: 200, height: 200},
  {effect: "cut_out", flags: "layer_apply"}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
  .overlay("ring2").radius("max").width(200).height(200).chain()
  .effect("cut_out").flags("layer_apply")).imageTag("night_sky.jpg");
JS:
cloudinary.imageTag('night_sky.jpg', {transformation: [
  {overlay: "ring2", radius: "max", width: 200, height: 200},
  {effect: "cut_out", flags: "layer_apply"}
  ]}).toHtml();
jQuery:
$.cloudinary.image("night_sky.jpg", {transformation: [
  {overlay: "ring2", radius: "max", width: 200, height: 200},
  {effect: "cut_out", flags: "layer_apply"}
  ]})
React:
<Image publicId="night_sky.jpg" >
  <Transformation overlay="ring2" radius="max" width="200" height="200" />
  <Transformation effect="cut_out" flags="layer_apply" />
</Image>
Angular:
<cl-image public-id="night_sky.jpg" >
  <cl-transformation overlay="ring2" radius="max" width="200" height="200">
  </cl-transformation>
  <cl-transformation effect="cut_out" flags="layer_apply">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Overlay("ring2").Radius("max").Width(200).Height(200).Chain()
  .Effect("cut_out").Flags("layer_apply")).BuildImageTag("night_sky.jpg")
Android:
MediaManager.get().url().transformation(new Transformation()
  .overlay("ring2").radius("max").width(200).height(200).chain()
  .effect("cut_out").flags("layer_apply")).generate("night_sky.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setOverlay("ring2").setRadius("max").setWidth(200).setHeight(200).chain()
  .setEffect("cut_out").setFlags("layer_apply")).generate("night_sky.jpg")!, cloudinary: cloudinary)
Custom cut out

The mask image can also be a semi-transparent PNG file to make the edges smoother. Here's an example of an uploaded mask:

Ruby:
cl_image_tag("hexagon_feather_sample.png")
PHP:
cl_image_tag("hexagon_feather_sample.png")
Python:
CloudinaryImage("hexagon_feather_sample.png").image()
Node.js:
cloudinary.image("hexagon_feather_sample.png")
Java:
cloudinary.url().imageTag("hexagon_feather_sample.png");
JS:
cloudinary.imageTag('hexagon_feather_sample.png').toHtml();
jQuery:
$.cloudinary.image("hexagon_feather_sample.png")
React:
<Image publicId="hexagon_feather_sample.png" >

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

</cl-image>
.Net:
cloudinary.Api.UrlImgUp.BuildImageTag("hexagon_feather_sample.png")
Android:
MediaManager.get().url().generate("hexagon_feather_sample.png");
iOS:
imageView.cldSetImage(cloudinary.createUrl().generate("hexagon_feather_sample.png")!, cloudinary: cloudinary)
Semi-transparent mask

And here's a sample result:

Ruby:
cl_image_tag("night_sky.jpg", :transformation=>[
  {:width=>200, :height=>220, :overlay=>"hexagon_feather_sample"},
  {:effect=>"cut_out", :flags=>"layer_apply"}
  ])
PHP:
cl_image_tag("night_sky.jpg", array("transformation"=>array(
  array("width"=>200, "height"=>220, "overlay"=>"hexagon_feather_sample"),
  array("effect"=>"cut_out", "flags"=>"layer_apply")
  )))
Python:
CloudinaryImage("night_sky.jpg").image(transformation=[
  {"width": 200, "height": 220, "overlay": "hexagon_feather_sample"},
  {"effect": "cut_out", "flags": "layer_apply"}
  ])
Node.js:
cloudinary.image("night_sky.jpg", {transformation: [
  {width: 200, height: 220, overlay: "hexagon_feather_sample"},
  {effect: "cut_out", flags: "layer_apply"}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
  .width(200).height(220).overlay("hexagon_feather_sample").chain()
  .effect("cut_out").flags("layer_apply")).imageTag("night_sky.jpg");
JS:
cloudinary.imageTag('night_sky.jpg', {transformation: [
  {width: 200, height: 220, overlay: "hexagon_feather_sample"},
  {effect: "cut_out", flags: "layer_apply"}
  ]}).toHtml();
jQuery:
$.cloudinary.image("night_sky.jpg", {transformation: [
  {width: 200, height: 220, overlay: "hexagon_feather_sample"},
  {effect: "cut_out", flags: "layer_apply"}
  ]})
React:
<Image publicId="night_sky.jpg" >
  <Transformation width="200" height="220" overlay="hexagon_feather_sample" />
  <Transformation effect="cut_out" flags="layer_apply" />
</Image>
Angular:
<cl-image public-id="night_sky.jpg" >
  <cl-transformation width="200" height="220" overlay="hexagon_feather_sample">
  </cl-transformation>
  <cl-transformation effect="cut_out" flags="layer_apply">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(200).Height(220).Overlay("hexagon_feather_sample").Chain()
  .Effect("cut_out").Flags("layer_apply")).BuildImageTag("night_sky.jpg")
Android:
MediaManager.get().url().transformation(new Transformation()
  .width(200).height(220).overlay("hexagon_feather_sample").chain()
  .effect("cut_out").flags("layer_apply")).generate("night_sky.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(200).setHeight(220).setOverlay("hexagon_feather_sample").chain()
  .setEffect("cut_out").setFlags("layer_apply")).generate("night_sky.jpg")!, cloudinary: cloudinary)
Semi-transparency

An underlay image can be behind the cut out:

Ruby:
cl_image_tag("night_sky.png", :transformation=>[
  {:width=>500, :overlay=>"cloudinary_icon"},
  {:effect=>"cut_out", :flags=>"layer_apply"},
  {:underlay=>"night_sky", :effect=>"negate"}
  ])
PHP:
cl_image_tag("night_sky.png", array("transformation"=>array(
  array("width"=>500, "overlay"=>"cloudinary_icon"),
  array("effect"=>"cut_out", "flags"=>"layer_apply"),
  array("underlay"=>"night_sky", "effect"=>"negate")
  )))
Python:
CloudinaryImage("night_sky.png").image(transformation=[
  {"width": 500, "overlay": "cloudinary_icon"},
  {"effect": "cut_out", "flags": "layer_apply"},
  {"underlay": "night_sky", "effect": "negate"}
  ])
Node.js:
cloudinary.image("night_sky.png", {transformation: [
  {width: 500, overlay: "cloudinary_icon"},
  {effect: "cut_out", flags: "layer_apply"},
  {underlay: "night_sky", effect: "negate"}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
  .width(500).overlay("cloudinary_icon").chain()
  .effect("cut_out").flags("layer_apply").chain()
  .underlay("night_sky").effect("negate")).imageTag("night_sky.png");
JS:
cloudinary.imageTag('night_sky.png', {transformation: [
  {width: 500, overlay: "cloudinary_icon"},
  {effect: "cut_out", flags: "layer_apply"},
  {underlay: "night_sky", effect: "negate"}
  ]}).toHtml();
jQuery:
$.cloudinary.image("night_sky.png", {transformation: [
  {width: 500, overlay: "cloudinary_icon"},
  {effect: "cut_out", flags: "layer_apply"},
  {underlay: "night_sky", effect: "negate"}
  ]})
React:
<Image publicId="night_sky.png" >
  <Transformation width="500" overlay="cloudinary_icon" />
  <Transformation effect="cut_out" flags="layer_apply" />
  <Transformation underlay="night_sky" effect="negate" />
</Image>
Angular:
<cl-image public-id="night_sky.png" >
  <cl-transformation width="500" overlay="cloudinary_icon">
  </cl-transformation>
  <cl-transformation effect="cut_out" flags="layer_apply">
  </cl-transformation>
  <cl-transformation underlay="night_sky" effect="negate">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(500).Overlay("cloudinary_icon").Chain()
  .Effect("cut_out").Flags("layer_apply").Chain()
  .Underlay("night_sky").Effect("negate")).BuildImageTag("night_sky.png")
Android:
MediaManager.get().url().transformation(new Transformation()
  .width(500).overlay("cloudinary_icon").chain()
  .effect("cut_out").flags("layer_apply").chain()
  .underlay("night_sky").effect("negate")).generate("night_sky.png");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(500).setOverlay("cloudinary_icon").chain()
  .setEffect("cut_out").setFlags("layer_apply").chain()
  .setUnderlay("night_sky").setEffect("negate")).generate("night_sky.png")!, cloudinary: cloudinary)
Underlay Image

by Daniel Mendoza