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:
Copy to clipboard
cl_image_tag("mac-frog-original.jpg", array("transformation"=>array(
  array("effect"=>"grayscale"),
  array("overlay"=>"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:
Copy to clipboard
cl_image_tag("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:
    Copy to clipboard
    cl_image_tag("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:
    Copy to clipboard
    cl_image_tag("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:
    Copy to clipboard
    cl_image_tag("mac-frog-original.jpg", array("overlay"=>"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:
    Copy to clipboard
    cl_image_tag("mac-frog-original.jpg", array("transformation"=>array(
      array("effect"=>"grayscale"),
      array("overlay"=>"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:
Copy to clipboard
cl_image_tag("mac-frog-original.jpg", array("transformation"=>array(
  array("effect"=>"blur:400"),
  array("overlay"=>"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

 Lazy-Load React to Enhance Page Performance for Your Apps

React is a popular open-source JavaScript library for creating user interfaces (UIs) for single-page web applications, with React Native slated for building mobile apps. Helpfully, React organizes UIs into collections of reusable components, rendering feature management a cakewalk. However, to boost user engagement, conversion, and SEO ranking, you must optimize your app for fast page loads.

Read more
The Hub Helps Creative Talent Win Brand Work with Cloudinary

The Hub is decentralizing the creative process through its two-sided online marketplace that changes the way brands hire creators. The old model of committing all creative resources to one agency of record has proven time-consuming and expensive. Additionally, brands are limited to content that is only as good as the handful of people on that agency’s team.

Read more
A Primer on Microbrowsers

How we browse online in our quest of information has largely been an unknown factor since the Internet became ubiquitous in the mid-1990s. What’s indisputable is that we’re unlikely to type in URLs as a start, especially if we don’t have clues as to which site to visit. Google search revolutionized the ability to find relevant information through keyword entries, leading to the emergence of search-engine optimization (SEO), whereby you as site owners ensure that the popular keywords appear in your content.

Read more
Top 5 Reasons for Attending ImageCon 2020: A Digital Experience

ImageCon, Cloudinary’s annual conference on innovating the Visual Web, will be held digitally between July 27-30 with an agenda that outdoes the past years’, featuring presentations by developers, creatives, and marketing professionals across the globe. Not only will you learn the latest groundbreaking technologies, strategies, and best practices for media management, you’ll also have many opportunities to interact with our speakers and ask them questions live during the live Q&A sessions.

Read more
AI-based Automatic Image Cropping for E-Commerce

If you’ve come across this post and, based on the title, are expecting insights into object-oriented programming languages, then please forgive me for overloading the term object-oriented. I hope you don’t object when you discover that the objects in this post are not so much the instantiated class types, but real-life objects found in images. It is helpful though if you’re familiar with the likes of Java, PHP, Javascript or other popular frameworks, as you’ll be able to implement these automatic image cropping techniques in your code. Anyway, let’s cut to the chase - or should that be crop to the object...?

Read more