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 v1:
cl_image_tag("mac-frog-original.jpg", array("transformation"=>array(
array("effect"=>"grayscale"),
array("overlay"=>"mac-frog-cloudinary-bg-ai")
)))
PHP v2:
(new ImageTag('mac-frog-original.jpg'))
->effect(Effect::grayscale())
->overlay(Overlay::source(Source::image('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 v1:
cl_image_tag("mac-frog-color-pop.jpg")
PHP v2:
(new ImageTag('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 v1:
cl_image_tag("mac-frog-original.jpg")
PHP v2:
(new ImageTag('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 v1:
cl_image_tag("mac-frog-cloudinary-bg-ai.jpg")
PHP v2:
(new ImageTag('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 v1:
cl_image_tag("mac-frog-original.jpg", array("overlay"=>"mac-frog-cloudinary-bg-ai"))
PHP v2:
(new ImageTag('mac-frog-original.jpg'))
->overlay(Overlay::source(Source::image('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 v1:
cl_image_tag("mac-frog-original.jpg", array("transformation"=>array(
array("effect"=>"grayscale"),
array("overlay"=>"mac-frog-cloudinary-bg-ai")
)))
PHP v2:
(new ImageTag('mac-frog-original.jpg'))
->effect(Effect::grayscale())
->overlay(Overlay::source(Source::image('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 v1:
cl_image_tag("mac-frog-original.jpg", array("transformation"=>array(
array("effect"=>"blur:400"),
array("overlay"=>"mac-frog-cloudinary-bg-ai")
)))
PHP v2:
(new ImageTag('mac-frog-original.jpg'))
->effect(Effect::blur()->strength(400))
->overlay(Overlay::source(Source::image('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.