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

Creating an API With Python Flask to Upload Files to Cloudinary

By Rebecca Peltz Apr 19, 2021

Creating an API With Python Flask to Upload Files to Cloudinary

Code

Cloudinary offers SDKs for many programming languages and frameworks. Even though it also offers an Upload API endpoint for both back-end and front-end code, most developers find the SDKs very helpful. If you're working with a powerful back-end framework like Python Flask, you'll be happy to hear that a Python SDK is now available.
This tutorial walks you through the process of building an API to upload images to Cloudinary. You can also upload other file types, including video and even nonmedia files, with the API.

By Meir Feinberg Apr 15, 2021

How to Use the Cloudinary Media Editor Widget

At Cloudinary, we manage the entire pipeline of media assets for thousands of customers of varying sizes from numerous verticals.

As part of our commitment to support the entire flow of media assets, we are now introducing an intuitive media editing widget: an out-of-the-box, interactive UI providing your users with a set of common image editing actions for immediate use on your website or web app. The widget is interactive and simple, built on Cloudinary's transformation capabilities, and requiring only a few lines of code to integrate. Afterwards, you can seamlessly and effortlessly add content to your site or app with no need for in-house image editing capabilities.

From Novel Concept to Natural Shopping Habit: How Shoppable Video is Gaining Ground in E-Commerce

By Amit Erental Apr 14, 2021

Shoppable Video Is Becoming Popular in E-Commerce

As pandemic restrictions necessitated, many shopping trips in 2020 took place outside the traditional brick-and-mortar store, or at least void of the physical aisle-browsing experience. Same-day curbside pickup became a safe and convenient alternative, and e-commerce transactions skyrocketed as consumers shopped online. In fact, Digital Commerce 360 estimates that, compared to 2019, e-commerce transactions grew by more than 40% last year.

Getting Ready for the Return of Travel? Five Ways to Spruce Up Your Travel Site

By Prajanma Singh Apr 12, 2021

Enhance Your Travel Site With Cloudinary in Anticipation of a Return to New Normal

Create a Great E-Commerce Site on Gatsby Along With User-Generated Content

By Dhruv Patel Apr 05, 2021

Create a E-Commerce Site on Gatsby Along With User-Generated Content

Today’s tremendous growth in e-commerce means that competition among businesses is heating up. One way to gain a competitive edge is to boost your product’s authenticity by incorporating user-generated content (UGC) into your product pages.

This tutorial shows you how to do the following:

By Alok Shah Apr 01, 2021

Headless is not a buzzword anymore. In fact, the concept of headless architecture is gaining momentum due to the flexibility it offers for composing new experiences and for tackling the undue complexity of an ever-evolving technology stack. That’s because while the evolution of the martech landscape has enabled disruptive, digital innovations, the approach of buying point solutions for solving specific challenges can expose companies to the complicated nature of new technologies, systems, and platforms.