One photo can morph into a thousand photos through a simple application of bits and pieces of transformation effects. A few examples of the common effects are Black and White, Duotone, Blurs and Fades, Cartoonification, and Color Pop.
Given the wide use of the Color Pop effect on Google Photos, you can show off your photos on social media after applying that effect. No kidding: I’ve seen that several times and absolutely love those photos every time they pop on my timeline on Facebook, Twitter, or Instagram.
In this article, I’ll show you how we can re-create the Color Pop effect on Google photos.
Cloudinary’s many transformation capabilities can turn out stupendous effects. For example, these two steps generate the image below:
- Upload a photo to Cloudinary twice, once with the original and then again with the background removed from the photo. Both versions have separate public IDs.
- Reference the original photo with the grayscale effect and overlay it with the background-removed version.
Ruby:
cl_image_tag("mac-frog-original.jpg", :transformation=>[
{:effect=>"grayscale"},
{:overlay=>"mac-frog-cloudinary-bg-ai"}
])
PHP:
cl_image_tag("mac-frog-original.jpg", array("transformation"=>array(
array("effect"=>"grayscale"),
array("overlay"=>"mac-frog-cloudinary-bg-ai")
)))
Python:
CloudinaryImage("mac-frog-original.jpg").image(transformation=[
{'effect': "grayscale"},
{'overlay': "mac-frog-cloudinary-bg-ai"}
])
Node.js:
cloudinary.image("mac-frog-original.jpg", {transformation: [
{effect: "grayscale"},
{overlay: "mac-frog-cloudinary-bg-ai"}
]})
Java:
cloudinary.url().transformation(new Transformation()
.effect("grayscale").chain()
.overlay(new Layer().publicId("mac-frog-cloudinary-bg-ai"))).imageTag("mac-frog-original.jpg");
JS:
cloudinary.imageTag('mac-frog-original.jpg', {transformation: [
{effect: "grayscale"},
{overlay: new cloudinary.Layer().publicId("mac-frog-cloudinary-bg-ai")}
]}).toHtml();
jQuery:
$.cloudinary.image("mac-frog-original.jpg", {transformation: [
{effect: "grayscale"},
{overlay: new cloudinary.Layer().publicId("mac-frog-cloudinary-bg-ai")}
]})
React:
<Image publicId="mac-frog-original.jpg" >
<Transformation effect="grayscale" />
<Transformation overlay="mac-frog-cloudinary-bg-ai" />
</Image>
Vue.js:
<cld-image publicId="mac-frog-original.jpg" >
<cld-transformation effect="grayscale" />
<cld-transformation overlay="mac-frog-cloudinary-bg-ai" />
</cld-image>
Angular:
<cl-image public-id="mac-frog-original.jpg" >
<cl-transformation effect="grayscale">
</cl-transformation>
<cl-transformation overlay="mac-frog-cloudinary-bg-ai">
</cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation()
.Effect("grayscale").Chain()
.Overlay(new Layer().PublicId("mac-frog-cloudinary-bg-ai"))).BuildImageTag("mac-frog-original.jpg")
Android:
MediaManager.get().url().transformation(new Transformation()
.effect("grayscale").chain()
.overlay(new Layer().publicId("mac-frog-cloudinary-bg-ai"))).generate("mac-frog-original.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
.setEffect("grayscale").chain()
.setOverlay("mac-frog-cloudinary-bg-ai")).generate("mac-frog-original.jpg")!, cloudinary: cloudinary)

That’s similar to this photo, which resulted from an application of Google Photo's Color Pop effect:
Ruby:
cl_image_tag("mac-frog-color-pop.jpg")
PHP:
cl_image_tag("mac-frog-color-pop.jpg")
Python:
CloudinaryImage("mac-frog-color-pop.jpg").image()
Node.js:
cloudinary.image("mac-frog-color-pop.jpg")
Java:
cloudinary.url().imageTag("mac-frog-color-pop.jpg");
JS:
cloudinary.imageTag('mac-frog-color-pop.jpg').toHtml();
jQuery:
$.cloudinary.image("mac-frog-color-pop.jpg")
React:
<Image publicId="mac-frog-color-pop.jpg" >
</Image>
Vue.js:
<cld-image publicId="mac-frog-color-pop.jpg" >
</cld-image>
Angular:
<cl-image public-id="mac-frog-color-pop.jpg" >
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.BuildImageTag("mac-frog-color-pop.jpg")
Android:
MediaManager.get().url().generate("mac-frog-color-pop.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().generate("mac-frog-color-pop.jpg")!, cloudinary: cloudinary)

Here’s a detailed rundown on how to re-create the Color Pop effect:
Start with the original and a version with the background removed.
To remove the background, leverage Cloudinary’s AI feature or, manually, with an image-editing tool, such as Pixelz or Adobe Photoshop.
Ruby:
cl_image_tag("mac-frog-original.jpg")
PHP:
cl_image_tag("mac-frog-original.jpg")
Python:
CloudinaryImage("mac-frog-original.jpg").image()
Node.js:
cloudinary.image("mac-frog-original.jpg")
Java:
cloudinary.url().imageTag("mac-frog-original.jpg");
JS:
cloudinary.imageTag('mac-frog-original.jpg').toHtml();
jQuery:
$.cloudinary.image("mac-frog-original.jpg")
React:
<Image publicId="mac-frog-original.jpg" >
</Image>
Vue.js:
<cld-image publicId="mac-frog-original.jpg" >
</cld-image>
Angular:
<cl-image public-id="mac-frog-original.jpg" >
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.BuildImageTag("mac-frog-original.jpg")
Android:
MediaManager.get().url().generate("mac-frog-original.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().generate("mac-frog-original.jpg")!, cloudinary: cloudinary)

Ruby:
cl_image_tag("mac-frog-cloudinary-bg-ai.jpg")
PHP:
cl_image_tag("mac-frog-cloudinary-bg-ai.jpg")
Python:
CloudinaryImage("mac-frog-cloudinary-bg-ai.jpg").image()
Node.js:
cloudinary.image("mac-frog-cloudinary-bg-ai.jpg")
Java:
cloudinary.url().imageTag("mac-frog-cloudinary-bg-ai.jpg");
JS:
cloudinary.imageTag('mac-frog-cloudinary-bg-ai.jpg').toHtml();
jQuery:
$.cloudinary.image("mac-frog-cloudinary-bg-ai.jpg")
React:
<Image publicId="mac-frog-cloudinary-bg-ai.jpg" >
</Image>
Vue.js:
<cld-image publicId="mac-frog-cloudinary-bg-ai.jpg" >
</cld-image>
Angular:
<cl-image public-id="mac-frog-cloudinary-bg-ai.jpg" >
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.BuildImageTag("mac-frog-cloudinary-bg-ai.jpg")
Android:
MediaManager.get().url().generate("mac-frog-cloudinary-bg-ai.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().generate("mac-frog-cloudinary-bg-ai.jpg")!, cloudinary: cloudinary)

Overlay the background-removed version on top of the original.
If the new version looks different from the original, ensure that the image dimensions match and that no other cropping occurred.
Ruby:
cl_image_tag("mac-frog-original.jpg", :overlay=>"mac-frog-cloudinary-bg-ai")
PHP:
cl_image_tag("mac-frog-original.jpg", array("overlay"=>"mac-frog-cloudinary-bg-ai"))
Python:
CloudinaryImage("mac-frog-original.jpg").image(overlay="mac-frog-cloudinary-bg-ai")
Node.js:
cloudinary.image("mac-frog-original.jpg", {overlay: "mac-frog-cloudinary-bg-ai"})
Java:
cloudinary.url().transformation(new Transformation().overlay(new Layer().publicId("mac-frog-cloudinary-bg-ai"))).imageTag("mac-frog-original.jpg");
JS:
cloudinary.imageTag('mac-frog-original.jpg', {overlay: new cloudinary.Layer().publicId("mac-frog-cloudinary-bg-ai")}).toHtml();
jQuery:
$.cloudinary.image("mac-frog-original.jpg", {overlay: new cloudinary.Layer().publicId("mac-frog-cloudinary-bg-ai")})
React:
<Image publicId="mac-frog-original.jpg" >
<Transformation overlay="mac-frog-cloudinary-bg-ai" />
</Image>
Vue.js:
<cld-image publicId="mac-frog-original.jpg" >
<cld-transformation overlay="mac-frog-cloudinary-bg-ai" />
</cld-image>
Angular:
<cl-image public-id="mac-frog-original.jpg" >
<cl-transformation overlay="mac-frog-cloudinary-bg-ai">
</cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay(new Layer().PublicId("mac-frog-cloudinary-bg-ai"))).BuildImageTag("mac-frog-original.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().overlay(new Layer().publicId("mac-frog-cloudinary-bg-ai"))).generate("mac-frog-original.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOverlay("mac-frog-cloudinary-bg-ai")).generate("mac-frog-original.jpg")!, cloudinary: cloudinary)

Apply effects, such as grayscale as in this example, to the original layer.
Ruby:
cl_image_tag("mac-frog-original.jpg", :transformation=>[
{:effect=>"grayscale"},
{:overlay=>"mac-frog-cloudinary-bg-ai"}
])
PHP:
cl_image_tag("mac-frog-original.jpg", array("transformation"=>array(
array("effect"=>"grayscale"),
array("overlay"=>"mac-frog-cloudinary-bg-ai")
)))
Python:
CloudinaryImage("mac-frog-original.jpg").image(transformation=[
{'effect': "grayscale"},
{'overlay': "mac-frog-cloudinary-bg-ai"}
])
Node.js:
cloudinary.image("mac-frog-original.jpg", {transformation: [
{effect: "grayscale"},
{overlay: "mac-frog-cloudinary-bg-ai"}
]})
Java:
cloudinary.url().transformation(new Transformation()
.effect("grayscale").chain()
.overlay(new Layer().publicId("mac-frog-cloudinary-bg-ai"))).imageTag("mac-frog-original.jpg");
JS:
cloudinary.imageTag('mac-frog-original.jpg', {transformation: [
{effect: "grayscale"},
{overlay: new cloudinary.Layer().publicId("mac-frog-cloudinary-bg-ai")}
]}).toHtml();
jQuery:
$.cloudinary.image("mac-frog-original.jpg", {transformation: [
{effect: "grayscale"},
{overlay: new cloudinary.Layer().publicId("mac-frog-cloudinary-bg-ai")}
]})
React:
<Image publicId="mac-frog-original.jpg" >
<Transformation effect="grayscale" />
<Transformation overlay="mac-frog-cloudinary-bg-ai" />
</Image>
Vue.js:
<cld-image publicId="mac-frog-original.jpg" >
<cld-transformation effect="grayscale" />
<cld-transformation overlay="mac-frog-cloudinary-bg-ai" />
</cld-image>
Angular:
<cl-image public-id="mac-frog-original.jpg" >
<cl-transformation effect="grayscale">
</cl-transformation>
<cl-transformation overlay="mac-frog-cloudinary-bg-ai">
</cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation()
.Effect("grayscale").Chain()
.Overlay(new Layer().PublicId("mac-frog-cloudinary-bg-ai"))).BuildImageTag("mac-frog-original.jpg")
Android:
MediaManager.get().url().transformation(new Transformation()
.effect("grayscale").chain()
.overlay(new Layer().publicId("mac-frog-cloudinary-bg-ai"))).generate("mac-frog-original.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
.setEffect("grayscale").chain()
.setOverlay("mac-frog-cloudinary-bg-ai")).generate("mac-frog-original.jpg")!, cloudinary: cloudinary)

That technique can produce a wealth of fun effects, such as bokeh. Simply blur the original:
Ruby:
cl_image_tag("mac-frog-original.jpg", :transformation=>[
{:effect=>"blur:400"},
{:overlay=>"mac-frog-cloudinary-bg-ai"}
])
PHP:
cl_image_tag("mac-frog-original.jpg", array("transformation"=>array(
array("effect"=>"blur:400"),
array("overlay"=>"mac-frog-cloudinary-bg-ai")
)))
Python:
CloudinaryImage("mac-frog-original.jpg").image(transformation=[
{'effect': "blur:400"},
{'overlay': "mac-frog-cloudinary-bg-ai"}
])
Node.js:
cloudinary.image("mac-frog-original.jpg", {transformation: [
{effect: "blur:400"},
{overlay: "mac-frog-cloudinary-bg-ai"}
]})
Java:
cloudinary.url().transformation(new Transformation()
.effect("blur:400").chain()
.overlay(new Layer().publicId("mac-frog-cloudinary-bg-ai"))).imageTag("mac-frog-original.jpg");
JS:
cloudinary.imageTag('mac-frog-original.jpg', {transformation: [
{effect: "blur:400"},
{overlay: new cloudinary.Layer().publicId("mac-frog-cloudinary-bg-ai")}
]}).toHtml();
jQuery:
$.cloudinary.image("mac-frog-original.jpg", {transformation: [
{effect: "blur:400"},
{overlay: new cloudinary.Layer().publicId("mac-frog-cloudinary-bg-ai")}
]})
React:
<Image publicId="mac-frog-original.jpg" >
<Transformation effect="blur:400" />
<Transformation overlay="mac-frog-cloudinary-bg-ai" />
</Image>
Vue.js:
<cld-image publicId="mac-frog-original.jpg" >
<cld-transformation effect="blur:400" />
<cld-transformation overlay="mac-frog-cloudinary-bg-ai" />
</cld-image>
Angular:
<cl-image public-id="mac-frog-original.jpg" >
<cl-transformation effect="blur:400">
</cl-transformation>
<cl-transformation overlay="mac-frog-cloudinary-bg-ai">
</cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation()
.Effect("blur:400").Chain()
.Overlay(new Layer().PublicId("mac-frog-cloudinary-bg-ai"))).BuildImageTag("mac-frog-original.jpg")
Android:
MediaManager.get().url().transformation(new Transformation()
.effect("blur:400").chain()
.overlay(new Layer().publicId("mac-frog-cloudinary-bg-ai"))).generate("mac-frog-original.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
.setEffect("blur:400").chain()
.setOverlay("mac-frog-cloudinary-bg-ai")).generate("mac-frog-original.jpg")!, cloudinary: cloudinary)

Talk about fun! Try it for yourself by signing up for FREE today.
Cloudinary provides easy-to-use, cloud-based media management solutions for the world’s top brands. With offices in the US, UK and Israel, Cloudinary has quickly become the de facto solution used by developers and marketers at major companies around the world to streamline rich media management and deliver optimal end-user experiences.
For more information, visit www.cloudinary.com or follow us on Twitter.