Advanced Gradient Map Usage

As you can read here, I’ve just open sourced gradientmaps.js, a library that allows you to apply Photoshop-like gradient maps to HTML content in Chrome and Firefox.

Now that the library is out there, let’s have a little fun.

Let me explain how you might use the library with jQuery.  First off of course, you need to include jQuery & gradientmaps.js:

   <script src="jQuery.js"></script>
   <script src="gradientmaps.min.js"></script>

Let’s say we have a DIV and want to apply a gradient map to it when the user clicks on it.

<div id="target"></div>

All we have to do is add the following script:

   /* Set up a click handler on the DIV */
   jQuery('#target').click(function() {
      /* Apply the Gradient Map to 'this', the target element */
      var gradient = "black, orange 50%, green, white";
      GradientMaps.applyGradientMap(this, gradient);

And that’s it.  Here’s a Codepen example:

Check out this Pen!

That’s pretty slick, but we’ve really lost a lot of the original image.  It has been completely remapped and lost some of its original flavor.  Instead, let’s borrow a technique we used for creating soft blur effects. We’ll duplicate the image, put one on top of the other, apply the gradient map to the top image, and make it slightly transparent, just like we would do with layers in Photoshop.

Now take a look at this Codepen example:

Check out this Pen!

You can play around with the opacity of the top layer to create your own effect.  When the top layer is fully transparent, the bottom image without the gradient map shows through.  When the top layer with the gradient map is opaque, you only see the gradient mapped image.  In between you see combinations of the two.

And there you have it, more fun with gradient maps.


Tagged , , . Bookmark the permalink.

One Response to Advanced Gradient Map Usage

  1. Pingback: Practical Gradient Map Use Case - Alan Greenblatt

Leave a Reply

Your email address will not be published. Required fields are marked *