Cloudinary Blog

Re-creating the Color Pop Effect on Google Photos With Cloudinary

By Joshua Slivken Nov 25, 2019

Creating Color Pop Effect on Google Photos With Cloudinary

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.

Webinar

5 Visual Engagement Tactics That Convert Online Buyers

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.

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/e_grayscale/l_mac-frog-cloudinary-bg-ai/mac-frog-original.jpg

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:

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/mac-frog-color-pop.jpg

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.

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/mac-frog-original.jpg

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)

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/mac-frog-cloudinary-bg-ai.jpg

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.

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/l_mac-frog-cloudinary-bg-ai/mac-frog-original.jpg

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.

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/e_grayscale/l_mac-frog-cloudinary-bg-ai/mac-frog-original.jpg

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:

URL Ruby PHP Python Node.js Java JS jQuery React Vue.js Angular .Net Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/e_blur:400/l_mac-frog-cloudinary-bg-ai/mac-frog-original.jpg

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.

About Cloudinary

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.

Recent Blog Posts

Cloudinary’s Automation Frees Up PetRescue’s Staff to Help Pets Find Their Forever Homes

By Juli Greenwood Oct 21, 2020

Automation Frees Up PetRescue’s Staff to Help Pets Find Their Forever Homes

As we spend more time at home, many of us are adopting pets for the joy, companionship and a surprising range of health benefits. In Australia, where our nonprofit customer PetRescue is located, there’s a shortage of pets to adopt. Last August, the Guardian reported that dog shelters in Australia emptied and adoption fees for puppies were running as high as $AUS1800.

By Kobi Schwarts Oct 20, 2020

Cloudinary and Contentful Make Modern Content Management Easier

I am pleased to share that Cloudinary and Contentful have joined forces to further streamline the creation, processing, and delivery of online content through Cloudinary’s digital asset management (DAM) solution and advanced transformation and delivery capabilities for images and video. What’s more, the partnership delivers a headless approach to DAM. By leveraging APIs for media management tasks, marketers and developers alike benefit from an integrated stack of optimized assets for optimization and automation. As a result, page loads are fast and beautiful, and at scale—with less overhead and effort.

By Maya Shavin Oct 19, 2020

Since its initial release in October 2016 by the Chopin brothers as a server-side framework that runs on top of Vue.js, Nuxt (aka Nuxt.js) has gained prominence in both intuitiveness and performance. The framework offers numerous built-in features based on a modular architecture, bringing ease and simplicity to web development. Not surprisingly, Nuxt.js has seen remarkable growth in adoption by the developer community along with accolades galore. At this writing, Nuxt has earned over 30K stars on GitHub and 96 active modules with over a million downloads per month. And the upward trend is ongoing.

By Caroline Levison Oct 15, 2020

How Quality and Quantity can go Hand in Hand

When it comes to quality versus quantity, you’ll often hear people say, “It’s the quality that counts, not the quantity”. While that’s true in many situations, there are also cases where you want both quality and quantity. You may have thousands of images on your website and you want them all to look great. This is especially important if your website allows users to upload their own content, for example, to sell their own products or services. You don't want their poor quality images to reflect badly on your brand.

By Alok Shah Oct 14, 2020

On the business side, Bombas is investing heavily in wholesale and e-commerce, having selected the Cloudinary platform on which to redesign the Bombas site for an optimal user experience that works equally well in all viewing devices—known as responsive delivery.

By Mickey Aharony Oct 12, 2020

Product Videos 101: What Makes Them Great?

A product’s benefits and usage, including its value proposition, features, and instructive details, are best demonstrated through video. Product-video types vary, depending on the funnel, channel, and audience, the most popular ones being demos, reviews, installation, and how-tos.