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 v1 PHP v2 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 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:

URL Ruby PHP v1 PHP v2 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 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.

URL Ruby PHP v1 PHP v2 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 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)

URL Ruby PHP v1 PHP v2 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 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.

URL Ruby PHP v1 PHP v2 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 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.

URL Ruby PHP v1 PHP v2 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 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:

URL Ruby PHP v1 PHP v2 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 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.

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

Whether Browsing Or Buying, Consumers Love Livestream Shopping

By Amit Erental Jul 28, 2021

In a previous post, I discussed how “going live” is gaining popularity across industries and verticals. What began as a way for gamers to jam together has evolved into a medium for broader entertainment and business purposes. To continue the conversation, this post unpacks the current trends of shoppable live streams to shine a light on how brands are leveraging “lives” to connect with shoppers in new ways.

By Mickey Aharony Jul 26, 2021

Cool Tricks for Resizing Images in JavaScript

Resizing images with JavaScript (JS) creates nifty effects, many of which you cannot do in Cascading Style Sheets (CSS). However, even though you can automate a zoom effect with JS to enable users to zoom in and out of images, limitations abound.

By Mickey Aharony Jul 26, 2021

Basic and Bonus CSS Image-Overlay Effects

CSS image overlays are a common technique for transposing text or images over each other. For example, you can combine images and text on a website when captioning an image, or place a live text element over a button.

By Amit Erental Jul 26, 2021

An Overview of Live-Streaming Video Trends

“Let’s go live.” For decades, that’s what newscasters say as they cut to real-time footage of a colleague reporting in the field. The live-video feed adds visual interest and perspective to a story beyond what can be communicated by someone sitting behind the news desk. In the same way, live-streaming video nowadays adds context to other consumer environments. From gaming and events to shopping and social media, “going live” enhances everyday experiences, and it’s something anyone can do with relative ease.

By Amit Erental Jul 21, 2021

Readying Live Streams for Video on Demand

When planning a live broadcast or stream, companies often overlook the redistribution phase, but live-stream videos are useful well beyond their initial streaming. Why? Because not everyone watches the first run. For a wider audience, it makes sense to repost live content on your website under an “events” tab, on YouTube, and other social sites for video on demand (VOD). However, preparing footage for reposting can be a lot of work.

By Nathan Kelley Jul 20, 2021

Optimize Visual Media for a Fast and Captivating Digital Experience

Did you know that humans process imagery 60,000 times faster than text? In fact, 90% of the information our brains process is visual, which makes it seem a no-brainer—pun intended—that brands are connecting with consumers through visual content online. However, adding media assets like images and videos to websites comes with a tradeoff: the more media, the heavier the site, which results in a noticeable slowdown in page loads and a reduction in content quality.