Cloudinary Blog

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

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:

  1. 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.
  2. Reference the original photo with the grayscale effect and overlay it with the background-removed version.

Ruby:
Copy to clipboard
cl_image_tag("mac-frog-original.jpg", :transformation=>[
  {:effect=>"grayscale"},
  {:overlay=>"mac-frog-cloudinary-bg-ai"}
  ])
PHP v1:
Copy to clipboard
cl_image_tag("mac-frog-original.jpg", array("transformation"=>array(
  array("effect"=>"grayscale"),
  array("overlay"=>"mac-frog-cloudinary-bg-ai")
  )))
PHP v2:
Copy to clipboard
(new ImageTag('mac-frog-original.jpg'))
  ->effect(Effect::grayscale())
  ->overlay(Overlay::source(Source::image('mac-frog-cloudinary-bg-ai')));
Python:
Copy to clipboard
CloudinaryImage("mac-frog-original.jpg").image(transformation=[
  {'effect': "grayscale"},
  {'overlay': "mac-frog-cloudinary-bg-ai"}
  ])
Node.js:
Copy to clipboard
cloudinary.image("mac-frog-original.jpg", {transformation: [
  {effect: "grayscale"},
  {overlay: "mac-frog-cloudinary-bg-ai"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .effect("grayscale").chain()
  .overlay(new Layer().publicId("mac-frog-cloudinary-bg-ai"))).imageTag("mac-frog-original.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('mac-frog-original.jpg', {transformation: [
  {effect: "grayscale"},
  {overlay: new cloudinary.Layer().publicId("mac-frog-cloudinary-bg-ai")}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("mac-frog-original.jpg", {transformation: [
  {effect: "grayscale"},
  {overlay: new cloudinary.Layer().publicId("mac-frog-cloudinary-bg-ai")}
  ]})
React:
Copy to clipboard
<Image publicId="mac-frog-original.jpg" >
  <Transformation effect="grayscale" />
  <Transformation overlay="mac-frog-cloudinary-bg-ai" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="mac-frog-original.jpg" >
  <cld-transformation effect="grayscale" />
  <cld-transformation :overlay="mac-frog-cloudinary-bg-ai" />
</cld-image>
Angular:
Copy to clipboard
<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:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Effect("grayscale").Chain()
  .Overlay(new Layer().PublicId("mac-frog-cloudinary-bg-ai"))).BuildImageTag("mac-frog-original.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .effect("grayscale").chain()
  .overlay(new Layer().publicId("mac-frog-cloudinary-bg-ai"))).generate("mac-frog-original.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setEffect("grayscale").chain()
  .setOverlay("mac-frog-cloudinary-bg-ai")).generate("mac-frog-original.jpg")!, cloudinary: cloudinary)
Cloudinary re-creating Color Pop

That’s similar to this photo, which resulted from an application of Google Photo's Color Pop effect:

Ruby:
Copy to clipboard
cl_image_tag("mac-frog-color-pop.jpg")
PHP v1:
Copy to clipboard
cl_image_tag("mac-frog-color-pop.jpg")
PHP v2:
Copy to clipboard
(new ImageTag('mac-frog-color-pop.jpg'));
Python:
Copy to clipboard
CloudinaryImage("mac-frog-color-pop.jpg").image()
Node.js:
Copy to clipboard
cloudinary.image("mac-frog-color-pop.jpg")
Java:
Copy to clipboard
cloudinary.url().imageTag("mac-frog-color-pop.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('mac-frog-color-pop.jpg').toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("mac-frog-color-pop.jpg")
React:
Copy to clipboard
<Image publicId="mac-frog-color-pop.jpg" >

</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="mac-frog-color-pop.jpg" >

</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="mac-frog-color-pop.jpg" >

</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.BuildImageTag("mac-frog-color-pop.jpg")
Android:
Copy to clipboard
MediaManager.get().url().generate("mac-frog-color-pop.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().generate("mac-frog-color-pop.jpg")!, cloudinary: cloudinary)
Color Pop Example

Here’s a detailed rundown on how to re-create the Color Pop effect:

  1. 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:
    Copy to clipboard
    cl_image_tag("mac-frog-original.jpg")
    PHP v1:
    Copy to clipboard
    cl_image_tag("mac-frog-original.jpg")
    PHP v2:
    Copy to clipboard
    (new ImageTag('mac-frog-original.jpg'));
    Python:
    Copy to clipboard
    CloudinaryImage("mac-frog-original.jpg").image()
    Node.js:
    Copy to clipboard
    cloudinary.image("mac-frog-original.jpg")
    Java:
    Copy to clipboard
    cloudinary.url().imageTag("mac-frog-original.jpg");
    JS:
    Copy to clipboard
    cloudinary.imageTag('mac-frog-original.jpg').toHtml();
    jQuery:
    Copy to clipboard
    $.cloudinary.image("mac-frog-original.jpg")
    React:
    Copy to clipboard
    <Image publicId="mac-frog-original.jpg" >
    
    </Image>
    Vue.js:
    Copy to clipboard
    <cld-image publicId="mac-frog-original.jpg" >
    
    </cld-image>
    Angular:
    Copy to clipboard
    <cl-image public-id="mac-frog-original.jpg" >
    
    </cl-image>
    .NET:
    Copy to clipboard
    cloudinary.Api.UrlImgUp.BuildImageTag("mac-frog-original.jpg")
    Android:
    Copy to clipboard
    MediaManager.get().url().generate("mac-frog-original.jpg");
    iOS:
    Copy to clipboard
    imageView.cldSetImage(cloudinary.createUrl().generate("mac-frog-original.jpg")!, cloudinary: cloudinary)
    Original

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

  2. 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:
    Copy to clipboard
    cl_image_tag("mac-frog-original.jpg", :overlay=>"mac-frog-cloudinary-bg-ai")
    PHP v1:
    Copy to clipboard
    cl_image_tag("mac-frog-original.jpg", array("overlay"=>"mac-frog-cloudinary-bg-ai"))
    PHP v2:
    Copy to clipboard
    (new ImageTag('mac-frog-original.jpg'))
      ->overlay(Overlay::source(Source::image('mac-frog-cloudinary-bg-ai')));
    Python:
    Copy to clipboard
    CloudinaryImage("mac-frog-original.jpg").image(overlay="mac-frog-cloudinary-bg-ai")
    Node.js:
    Copy to clipboard
    cloudinary.image("mac-frog-original.jpg", {overlay: "mac-frog-cloudinary-bg-ai"})
    Java:
    Copy to clipboard
    cloudinary.url().transformation(new Transformation().overlay(new Layer().publicId("mac-frog-cloudinary-bg-ai"))).imageTag("mac-frog-original.jpg");
    JS:
    Copy to clipboard
    cloudinary.imageTag('mac-frog-original.jpg', {overlay: new cloudinary.Layer().publicId("mac-frog-cloudinary-bg-ai")}).toHtml();
    jQuery:
    Copy to clipboard
    $.cloudinary.image("mac-frog-original.jpg", {overlay: new cloudinary.Layer().publicId("mac-frog-cloudinary-bg-ai")})
    React:
    Copy to clipboard
    <Image publicId="mac-frog-original.jpg" >
      <Transformation overlay="mac-frog-cloudinary-bg-ai" />
    </Image>
    Vue.js:
    Copy to clipboard
    <cld-image publicId="mac-frog-original.jpg" >
      <cld-transformation :overlay="mac-frog-cloudinary-bg-ai" />
    </cld-image>
    Angular:
    Copy to clipboard
    <cl-image public-id="mac-frog-original.jpg" >
      <cl-transformation overlay="mac-frog-cloudinary-bg-ai">
      </cl-transformation>
    </cl-image>
    .NET:
    Copy to clipboard
    cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay(new Layer().PublicId("mac-frog-cloudinary-bg-ai"))).BuildImageTag("mac-frog-original.jpg")
    Android:
    Copy to clipboard
    MediaManager.get().url().transformation(new Transformation().overlay(new Layer().publicId("mac-frog-cloudinary-bg-ai"))).generate("mac-frog-original.jpg");
    iOS:
    Copy to clipboard
    imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOverlay("mac-frog-cloudinary-bg-ai")).generate("mac-frog-original.jpg")!, cloudinary: cloudinary)
    Overlayed

  3. Apply effects, such as grayscale as in this example, to the original layer.

    Ruby:
    Copy to clipboard
    cl_image_tag("mac-frog-original.jpg", :transformation=>[
      {:effect=>"grayscale"},
      {:overlay=>"mac-frog-cloudinary-bg-ai"}
      ])
    PHP v1:
    Copy to clipboard
    cl_image_tag("mac-frog-original.jpg", array("transformation"=>array(
      array("effect"=>"grayscale"),
      array("overlay"=>"mac-frog-cloudinary-bg-ai")
      )))
    PHP v2:
    Copy to clipboard
    (new ImageTag('mac-frog-original.jpg'))
      ->effect(Effect::grayscale())
      ->overlay(Overlay::source(Source::image('mac-frog-cloudinary-bg-ai')));
    Python:
    Copy to clipboard
    CloudinaryImage("mac-frog-original.jpg").image(transformation=[
      {'effect': "grayscale"},
      {'overlay': "mac-frog-cloudinary-bg-ai"}
      ])
    Node.js:
    Copy to clipboard
    cloudinary.image("mac-frog-original.jpg", {transformation: [
      {effect: "grayscale"},
      {overlay: "mac-frog-cloudinary-bg-ai"}
      ]})
    Java:
    Copy to clipboard
    cloudinary.url().transformation(new Transformation()
      .effect("grayscale").chain()
      .overlay(new Layer().publicId("mac-frog-cloudinary-bg-ai"))).imageTag("mac-frog-original.jpg");
    JS:
    Copy to clipboard
    cloudinary.imageTag('mac-frog-original.jpg', {transformation: [
      {effect: "grayscale"},
      {overlay: new cloudinary.Layer().publicId("mac-frog-cloudinary-bg-ai")}
      ]}).toHtml();
    jQuery:
    Copy to clipboard
    $.cloudinary.image("mac-frog-original.jpg", {transformation: [
      {effect: "grayscale"},
      {overlay: new cloudinary.Layer().publicId("mac-frog-cloudinary-bg-ai")}
      ]})
    React:
    Copy to clipboard
    <Image publicId="mac-frog-original.jpg" >
      <Transformation effect="grayscale" />
      <Transformation overlay="mac-frog-cloudinary-bg-ai" />
    </Image>
    Vue.js:
    Copy to clipboard
    <cld-image publicId="mac-frog-original.jpg" >
      <cld-transformation effect="grayscale" />
      <cld-transformation :overlay="mac-frog-cloudinary-bg-ai" />
    </cld-image>
    Angular:
    Copy to clipboard
    <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:
    Copy to clipboard
    cloudinary.Api.UrlImgUp.Transform(new Transformation()
      .Effect("grayscale").Chain()
      .Overlay(new Layer().PublicId("mac-frog-cloudinary-bg-ai"))).BuildImageTag("mac-frog-original.jpg")
    Android:
    Copy to clipboard
    MediaManager.get().url().transformation(new Transformation()
      .effect("grayscale").chain()
      .overlay(new Layer().publicId("mac-frog-cloudinary-bg-ai"))).generate("mac-frog-original.jpg");
    iOS:
    Copy to clipboard
    imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
      .setEffect("grayscale").chain()
      .setOverlay("mac-frog-cloudinary-bg-ai")).generate("mac-frog-original.jpg")!, cloudinary: cloudinary)
    Cloudinary re-creating Color Pop

That technique can produce a wealth of fun effects, such as bokeh. Simply blur the original:

Ruby:
Copy to clipboard
cl_image_tag("mac-frog-original.jpg", :transformation=>[
  {:effect=>"blur:400"},
  {:overlay=>"mac-frog-cloudinary-bg-ai"}
  ])
PHP v1:
Copy to clipboard
cl_image_tag("mac-frog-original.jpg", array("transformation"=>array(
  array("effect"=>"blur:400"),
  array("overlay"=>"mac-frog-cloudinary-bg-ai")
  )))
PHP v2:
Copy to clipboard
(new ImageTag('mac-frog-original.jpg'))
  ->effect(Effect::blur()->strength(400))
  ->overlay(Overlay::source(Source::image('mac-frog-cloudinary-bg-ai')));
Python:
Copy to clipboard
CloudinaryImage("mac-frog-original.jpg").image(transformation=[
  {'effect': "blur:400"},
  {'overlay': "mac-frog-cloudinary-bg-ai"}
  ])
Node.js:
Copy to clipboard
cloudinary.image("mac-frog-original.jpg", {transformation: [
  {effect: "blur:400"},
  {overlay: "mac-frog-cloudinary-bg-ai"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .effect("blur:400").chain()
  .overlay(new Layer().publicId("mac-frog-cloudinary-bg-ai"))).imageTag("mac-frog-original.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('mac-frog-original.jpg', {transformation: [
  {effect: "blur:400"},
  {overlay: new cloudinary.Layer().publicId("mac-frog-cloudinary-bg-ai")}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("mac-frog-original.jpg", {transformation: [
  {effect: "blur:400"},
  {overlay: new cloudinary.Layer().publicId("mac-frog-cloudinary-bg-ai")}
  ]})
React:
Copy to clipboard
<Image publicId="mac-frog-original.jpg" >
  <Transformation effect="blur:400" />
  <Transformation overlay="mac-frog-cloudinary-bg-ai" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="mac-frog-original.jpg" >
  <cld-transformation effect="blur:400" />
  <cld-transformation :overlay="mac-frog-cloudinary-bg-ai" />
</cld-image>
Angular:
Copy to clipboard
<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:
Copy to clipboard
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:
Copy to clipboard
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:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setEffect("blur:400").chain()
  .setOverlay("mac-frog-cloudinary-bg-ai")).generate("mac-frog-original.jpg")!, cloudinary: cloudinary)
Bokeh effect

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

Why the Future of E-commerce Is Live

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.

Read more
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.

Read more
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.

Read more
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.

Read more