A cool new design trend popularized by Shopify is Duotone imagery. There’s a good post on the Shopify blog covering this and some other trends so you can read that there if curious (4 Trendy Visual Design Trends - Shopify Blog). In the spirit of Cloudinary Cookbooks, we’re going to get right down to business.
Here's the original image we’re going to work off:
Ruby:
cl_image_tag("18882410261_e4f9d25780_b_lked9y.jpg", :quality=>"auto", :fetch_format=>:auto)
PHP:
cl_image_tag("18882410261_e4f9d25780_b_lked9y.jpg", array("quality"=>"auto", "fetch_format"=>"auto"))
Python:
CloudinaryImage("18882410261_e4f9d25780_b_lked9y.jpg").image(quality="auto", fetch_format="auto")
Node.js:
cloudinary.image("18882410261_e4f9d25780_b_lked9y.jpg", {quality: "auto", fetch_format: "auto"})
Java:
cloudinary.url().transformation(new Transformation().quality("auto").fetchFormat("auto")).imageTag("18882410261_e4f9d25780_b_lked9y.jpg");
JS:
cloudinary.imageTag('18882410261_e4f9d25780_b_lked9y.jpg', {quality: "auto", fetchFormat: "auto"}).toHtml();
jQuery:
$.cloudinary.image("18882410261_e4f9d25780_b_lked9y.jpg", {quality: "auto", fetch_format: "auto"})
React:
<Image publicId="18882410261_e4f9d25780_b_lked9y.jpg" >
<Transformation quality="auto" fetchFormat="auto" />
</Image>
Vue.js:
<cld-image publicId="18882410261_e4f9d25780_b_lked9y.jpg" >
<cld-transformation quality="auto" fetchFormat="auto" />
</cld-image>
Angular:
<cl-image public-id="18882410261_e4f9d25780_b_lked9y.jpg" >
<cl-transformation quality="auto" fetch-format="auto">
</cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Quality("auto").FetchFormat("auto")).BuildImageTag("18882410261_e4f9d25780_b_lked9y.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().quality("auto").fetchFormat("auto")).generate("18882410261_e4f9d25780_b_lked9y.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setQuality("auto").setFetchFormat("auto")).generate("18882410261_e4f9d25780_b_lked9y.jpg")!, cloudinary: cloudinary)
We need to do two things here, make it grayscale, then apply the duotone using our “tint” effect.
Ruby:
cl_image_tag("18882410261_e4f9d25780_b_lked9y.jpg", :transformation=>[
{:quality=>"auto"},
{:effect=>"grayscale"},
{:effect=>"tint:50:red"}
])
PHP:
cl_image_tag("18882410261_e4f9d25780_b_lked9y.jpg", array("transformation"=>array(
array("quality"=>"auto"),
array("effect"=>"grayscale"),
array("effect"=>"tint:50:red")
)))
Python:
CloudinaryImage("18882410261_e4f9d25780_b_lked9y.jpg").image(transformation=[
{'quality': "auto"},
{'effect': "grayscale"},
{'effect': "tint:50:red"}
])
Node.js:
cloudinary.image("18882410261_e4f9d25780_b_lked9y.jpg", {transformation: [
{quality: "auto"},
{effect: "grayscale"},
{effect: "tint:50:red"}
]})
Java:
cloudinary.url().transformation(new Transformation()
.quality("auto").chain()
.effect("grayscale").chain()
.effect("tint:50:red")).imageTag("18882410261_e4f9d25780_b_lked9y.jpg");
JS:
cloudinary.imageTag('18882410261_e4f9d25780_b_lked9y.jpg', {transformation: [
{quality: "auto"},
{effect: "grayscale"},
{effect: "tint:50:red"}
]}).toHtml();
jQuery:
$.cloudinary.image("18882410261_e4f9d25780_b_lked9y.jpg", {transformation: [
{quality: "auto"},
{effect: "grayscale"},
{effect: "tint:50:red"}
]})
React:
<Image publicId="18882410261_e4f9d25780_b_lked9y.jpg" >
<Transformation quality="auto" />
<Transformation effect="grayscale" />
<Transformation effect="tint:50:red" />
</Image>
Vue.js:
<cld-image publicId="18882410261_e4f9d25780_b_lked9y.jpg" >
<cld-transformation quality="auto" />
<cld-transformation effect="grayscale" />
<cld-transformation effect="tint:50:red" />
</cld-image>
Angular:
<cl-image public-id="18882410261_e4f9d25780_b_lked9y.jpg" >
<cl-transformation quality="auto">
</cl-transformation>
<cl-transformation effect="grayscale">
</cl-transformation>
<cl-transformation effect="tint:50:red">
</cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation()
.Quality("auto").Chain()
.Effect("grayscale").Chain()
.Effect("tint:50:red")).BuildImageTag("18882410261_e4f9d25780_b_lked9y.jpg")
Android:
MediaManager.get().url().transformation(new Transformation()
.quality("auto").chain()
.effect("grayscale").chain()
.effect("tint:50:red")).generate("18882410261_e4f9d25780_b_lked9y.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
.setQuality("auto").chain()
.setEffect("grayscale").chain()
.setEffect("tint:50:red")).generate("18882410261_e4f9d25780_b_lked9y.jpg")!, cloudinary: cloudinary)
You can adjust the color name, use a hex value, change the strength of tinting by changing that “50” number (higher number is stronger), etc., to achieve the desired effect.
You can also specify two different colors, here a blue and a yellow in hex:
Ruby:
cl_image_tag("18882410261_e4f9d25780_b_lked9y.jpg", :transformation=>[
{:quality=>"auto"},
{:effect=>"grayscale"},
{:effect=>"tint:100:0000ff:0p:ffff00:100p"}
])
PHP:
cl_image_tag("18882410261_e4f9d25780_b_lked9y.jpg", array("transformation"=>array(
array("quality"=>"auto"),
array("effect"=>"grayscale"),
array("effect"=>"tint:100:0000ff:0p:ffff00:100p")
)))
Python:
CloudinaryImage("18882410261_e4f9d25780_b_lked9y.jpg").image(transformation=[
{'quality': "auto"},
{'effect': "grayscale"},
{'effect': "tint:100:0000ff:0p:ffff00:100p"}
])
Node.js:
cloudinary.image("18882410261_e4f9d25780_b_lked9y.jpg", {transformation: [
{quality: "auto"},
{effect: "grayscale"},
{effect: "tint:100:0000ff:0p:ffff00:100p"}
]})
Java:
cloudinary.url().transformation(new Transformation()
.quality("auto").chain()
.effect("grayscale").chain()
.effect("tint:100:0000ff:0p:ffff00:100p")).imageTag("18882410261_e4f9d25780_b_lked9y.jpg");
JS:
cloudinary.imageTag('18882410261_e4f9d25780_b_lked9y.jpg', {transformation: [
{quality: "auto"},
{effect: "grayscale"},
{effect: "tint:100:0000ff:0p:ffff00:100p"}
]}).toHtml();
jQuery:
$.cloudinary.image("18882410261_e4f9d25780_b_lked9y.jpg", {transformation: [
{quality: "auto"},
{effect: "grayscale"},
{effect: "tint:100:0000ff:0p:ffff00:100p"}
]})
React:
<Image publicId="18882410261_e4f9d25780_b_lked9y.jpg" >
<Transformation quality="auto" />
<Transformation effect="grayscale" />
<Transformation effect="tint:100:0000ff:0p:ffff00:100p" />
</Image>
Vue.js:
<cld-image publicId="18882410261_e4f9d25780_b_lked9y.jpg" >
<cld-transformation quality="auto" />
<cld-transformation effect="grayscale" />
<cld-transformation effect="tint:100:0000ff:0p:ffff00:100p" />
</cld-image>
Angular:
<cl-image public-id="18882410261_e4f9d25780_b_lked9y.jpg" >
<cl-transformation quality="auto">
</cl-transformation>
<cl-transformation effect="grayscale">
</cl-transformation>
<cl-transformation effect="tint:100:0000ff:0p:ffff00:100p">
</cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation()
.Quality("auto").Chain()
.Effect("grayscale").Chain()
.Effect("tint:100:0000ff:0p:ffff00:100p")).BuildImageTag("18882410261_e4f9d25780_b_lked9y.jpg")
Android:
MediaManager.get().url().transformation(new Transformation()
.quality("auto").chain()
.effect("grayscale").chain()
.effect("tint:100:0000ff:0p:ffff00:100p")).generate("18882410261_e4f9d25780_b_lked9y.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
.setQuality("auto").chain()
.setEffect("grayscale").chain()
.setEffect("tint:100:0000ff:0p:ffff00:100p")).generate("18882410261_e4f9d25780_b_lked9y.jpg")!, cloudinary: cloudinary)
Changing grayscale to black and white creates this effect:
Ruby:
cl_image_tag("18882410261_e4f9d25780_b_lked9y.jpg", :transformation=>[
{:quality=>"auto"},
{:effect=>"blackwhite"},
{:effect=>"tint:100:0000ff:0p:ffff00:100p"}
])
PHP:
cl_image_tag("18882410261_e4f9d25780_b_lked9y.jpg", array("transformation"=>array(
array("quality"=>"auto"),
array("effect"=>"blackwhite"),
array("effect"=>"tint:100:0000ff:0p:ffff00:100p")
)))
Python:
CloudinaryImage("18882410261_e4f9d25780_b_lked9y.jpg").image(transformation=[
{'quality': "auto"},
{'effect': "blackwhite"},
{'effect': "tint:100:0000ff:0p:ffff00:100p"}
])
Node.js:
cloudinary.image("18882410261_e4f9d25780_b_lked9y.jpg", {transformation: [
{quality: "auto"},
{effect: "blackwhite"},
{effect: "tint:100:0000ff:0p:ffff00:100p"}
]})
Java:
cloudinary.url().transformation(new Transformation()
.quality("auto").chain()
.effect("blackwhite").chain()
.effect("tint:100:0000ff:0p:ffff00:100p")).imageTag("18882410261_e4f9d25780_b_lked9y.jpg");
JS:
cloudinary.imageTag('18882410261_e4f9d25780_b_lked9y.jpg', {transformation: [
{quality: "auto"},
{effect: "blackwhite"},
{effect: "tint:100:0000ff:0p:ffff00:100p"}
]}).toHtml();
jQuery:
$.cloudinary.image("18882410261_e4f9d25780_b_lked9y.jpg", {transformation: [
{quality: "auto"},
{effect: "blackwhite"},
{effect: "tint:100:0000ff:0p:ffff00:100p"}
]})
React:
<Image publicId="18882410261_e4f9d25780_b_lked9y.jpg" >
<Transformation quality="auto" />
<Transformation effect="blackwhite" />
<Transformation effect="tint:100:0000ff:0p:ffff00:100p" />
</Image>
Vue.js:
<cld-image publicId="18882410261_e4f9d25780_b_lked9y.jpg" >
<cld-transformation quality="auto" />
<cld-transformation effect="blackwhite" />
<cld-transformation effect="tint:100:0000ff:0p:ffff00:100p" />
</cld-image>
Angular:
<cl-image public-id="18882410261_e4f9d25780_b_lked9y.jpg" >
<cl-transformation quality="auto">
</cl-transformation>
<cl-transformation effect="blackwhite">
</cl-transformation>
<cl-transformation effect="tint:100:0000ff:0p:ffff00:100p">
</cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation()
.Quality("auto").Chain()
.Effect("blackwhite").Chain()
.Effect("tint:100:0000ff:0p:ffff00:100p")).BuildImageTag("18882410261_e4f9d25780_b_lked9y.jpg")
Android:
MediaManager.get().url().transformation(new Transformation()
.quality("auto").chain()
.effect("blackwhite").chain()
.effect("tint:100:0000ff:0p:ffff00:100p")).generate("18882410261_e4f9d25780_b_lked9y.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
.setQuality("auto").chain()
.setEffect("blackwhite").chain()
.setEffect("tint:100:0000ff:0p:ffff00:100p")).generate("18882410261_e4f9d25780_b_lked9y.jpg")!, cloudinary: cloudinary)
As is typical with Cloudinary, there’s more than one way to skin a cat. Try to come up with a better Duotone transformation and post it in the comments!
Effects documentation to help you in your endeavor: Cloudinary Effects Cheatsheet