Jump to content


Photo

The Wonderful World of Gradient Mapping!


  • Please log in to reply
22 replies to this topic

#1 david.atwell

david.atwell

    Former Moderator

  • Members
  • 627 posts
  • LocationIndianapolis, IN (39°46′5.88″N 86°9′29.52″W)
  • Reputation:18

Posted 14 October 2007 - 01:17 AM

This tutorial is all about the marvelous Gradient Mapping plugin, by Pyrochild (available here). Download it first.

So, there's been some confusion as to how this plugin works, as expressed on the PdN chat on dA. Now, I don't claim to be an expert, but I do have a couple days' experience on all of you, so... :-) Here we go, an explanation of Gradient Mapping.

Now, you all know (if you've downloaded this plugin) that the dialog consists of a gradient bar, a drop-down box, and a little bit more that I won't go into here.

Let's start with the drop-down marked "Source." As you may have gleaned from the title, it selects which bits in the color code from each pixel are used as the "source." Got it? No? Well, let's go more in-depth, then.

How about a pretty picture? We might call this "Before." We might. But we won't. ;-)

Posted Image

As you can see, it's a rather understated little .PNG with a white-to-black gradient stretching from left to right. Now, the default in the "Source" box says "Luminosity," no? So maybe we can understand Gradient Mapping better if we examine the luminosity of the gradient.

Well, obviously, the Luminosity of the pixels at the far left is very high. In fact, it's 255. White has the most luminosity possible. On the other hand, Black has very little Luminosity. None, in fact. In numeric form, white's luminosity is 255, while black's is zero. Somewhere in the middle, assuming you have a gradient that spans 256 pixels or more, each value of luminosity is shown at least once. And that means that in the very middle, there's one that equals 126.

Are we clear? (Actually, we'll get to transparency in a second. :-) Okay, bad pun...)

All right, if you follow, let's open Gradient Mapping. It's in the Adjustments menu, which I can't remind you of quite enough.

Posted Image

Beautiful defaults, no? Okay, enough sightseeing. Take a look at that gradient across the top of the dialog. At the far left is a black color, in the center is a red color, and on the right is a white color. Conveniently, that's the same pattern (in reverse) on the live preview behind it! Now, what do we know about the original gradient? And why is it in reverse?

That's right. The luminosity decreases successively from 255 on the left to zero on the right. Somewhere in the middle, it's about 126.
Hmm. Coincidence! The new gradient has a completely white color on the left, a red color in the middle, and a completely black color on the right!

Are the wheels chugging?

That's right! The value of luminosity is "mapped" across that gradient in the dialog box. And wherever in that photo that particular value of luminosity appears, it is replaced with the color that is on the gradient in the dialog!

So the far left of the gradient in the dialog is mapped to the lowest value of luminosity in the picture; that means that the pixels with the lowest luminosity in the image (the black ones) will be changed to the color at the far left of the gradient in the dialog, and the pixels with the highest luminosity in the image (the white ones) will be changed to the color at the far right of the gradient in the dialog.

Posted Image

See what I mean? It takes the values of the selected channel (Luminosity), and "maps" it across the dialog's gradient (0 on the left, 255 on the right). Then it finds each value of that selected channel in the image, and recolors it to the color that's mapped to that number.

Let's look at a couple of other Sources to see more. How about Alpha?

Posted Image

See, the Alpha value of the entire image is 255; it's perfectly opaque. So it recolors every single pixel to the color on the far right, which just happens to be white.

Let's try Key / Black as the source now.

Posted Image

Notice that, in the original image, black was on the far right; but, since we're measuring the amount of Black as the source now, and black is on the left of the dialog gradient, the pixels in the original image that had the least black (Black = 0) get recolored to the color on the far left of the dialog gradient, which happens to be black.

(If you still don't understand, try the image with just white and see what color it turns; then with just black, and then with a shade of gray. You'll see that the white [lowest amount of black] comes out black, the black [highest amount of black] comes out white, and the gray [middle amount of black] comes out red.)

Head still spinning? Try some other Source channels. You'll see that the pixels with the highest value of whatever channel you've selected in the drop-down box will be recolored to whichever color is on the far right of the dialog gradient, and vice versa. Clear?

Let's see a photograph!

Posted Image

Stunning, no? But we're not here to lollygag. Let's mess it up! :-)

Gradient Mapping, with defaults:

Posted Image

Notice that the part with the highest luminosity (the part where the light hits the floor) is recolored to the color on the far right of the dialog gradient. White!

Alpha is completely blank. Nothing to see there. Again, it's entirely opaque, so it turns it completely black.

How about "Key / Black"? This one's fun! :-)

Posted Image

Oooh! See, where the light hits the floor had the lowest amount of black in it (zero), so it recolored it with the color from the Zero end of the dialog gradient!

Ah, we're working up to something here! Let's try different colors. Right click on the left and right sliders and click "Change Color."

Here's what I changed them to, and the result:

Posted Image

See, the parts of the image with the lowest luminosity became the color at the left of the dialog gradient (blue), while the parts of the image with the highest luminosity became the color at the right of the dialog gradient (radioactive green)!

So, how can this work for you (besides cheap parlor tricks with images)?

Multicolor gradients! Let's say you wanted a seven-color gradient; Red, Orange, Yellow, Green, Blue, Indigo, and Violet. Sure, you could use BB and Ilnab's plugin, but why? Just create a black-to-white gradient, like in the first image, and:

Posted Image

(right-click and hit "Spread Colors" to evenly space them)

And theirs can't do this:

Posted Image

(Though that might be a point of pride) Eastertime, anyone?

Anyway, play around with your Gradient Mapping plugin. And share what you do below! (If you like, you can right click and save the .XML file, and post it below with the code tag)

Hope this helped!

For more gradient mapping fun, check out Natjo's tut: viewtopic.php?f=15&t=20738

(And BarkBark's comment is a good one)

Posted Image

The Doctor: There was a goblin, or a trickster, or a warrior... A nameless, terrible thing, soaked in the blood of a billion galaxies. The most feared being in all the cosmos. And nothing could stop it, or hold it, or reason with it. One day it would just drop out of the sky and tear down your world.
Amy: But how did it end up in there?
The Doctor: You know fairy tales. A good wizard tricked it.
River Song: I hate good wizards in fairy tales; they always turn out to be him.


#2 The_Lionhearted

The_Lionhearted
  • Members
  • 2,613 posts
  • LocationSpringfield, MO
  • Reputation:1

Posted 14 October 2007 - 04:13 AM

Thanks for the tut david...enjoyed the knowledge and humor. ;)

#3 verndewd

verndewd
  • Members
  • 609 posts
  • Locationnot here anymore
  • Reputation:0

Posted 14 October 2007 - 05:40 AM

pyro has made some killer plug ins; good chance to appreciate the people that make the plug ins and have made this awesome program. All of you deserve praise and compensation. IMHO.
retired from PDN forums. Later dewds

#4 Myrddin

Myrddin

    Former Moderator

  • Members
  • 4,155 posts
  • LocationSheffield, England.
  • Reputation:2

Posted 14 October 2007 - 03:35 PM

A most helpful tutorial, david. Now I can truly appreciate gradient mapping.

Thanks to both you and, of course, pyrochild for the plugin.

#5 Rostigalen

Rostigalen
  • Members
  • 57 posts
  • Reputation:0

Posted 14 October 2007 - 07:59 PM

Wow, now this is a great tutorial! I really learned a lot :) Thanks!
Posted Image

#6 pyrochild

pyrochild

    Plugin Author of the Year 2012

  • Administrators
  • 11,273 posts
  • LocationColorado
  • Reputation:137

Posted 16 October 2007 - 02:24 AM

excellent :D
sig8.png
[I write plugins and stuff]

If you like a post, upvote it!

#7 david.atwell

david.atwell

    Former Moderator

  • Members
  • 627 posts
  • LocationIndianapolis, IN (39°46′5.88″N 86°9′29.52″W)
  • Reputation:18

Posted 16 October 2007 - 02:28 AM

Thank you, everyone! Especially nice to hear from the creator himself...

Posted Image

The Doctor: There was a goblin, or a trickster, or a warrior... A nameless, terrible thing, soaked in the blood of a billion galaxies. The most feared being in all the cosmos. And nothing could stop it, or hold it, or reason with it. One day it would just drop out of the sky and tear down your world.
Amy: But how did it end up in there?
The Doctor: You know fairy tales. A good wizard tricked it.
River Song: I hate good wizards in fairy tales; they always turn out to be him.


#8 leprickon

leprickon
  • Members
  • 25 posts
  • LocationT-Town, MI
  • Reputation:0

Posted 16 October 2007 - 03:25 AM

Great tut!!

Thanks!!
Posted Image

#9 Deborah

Deborah
  • Members
  • 98 posts
  • LocationVancouver-ish, Canada
  • Reputation:0

Posted 16 October 2007 - 05:18 PM

This is great. I love the light tone of your words - it's nice to see some personality in a tutorial. I even liked the pun (and I usually abhor all punnery :P).


(If you still don't understand, try the image with just white and see what color it turns; then with just black, and then with a shade of gray. You'll see that the white [lowest amount of black] comes out black, the black [highest amount of white] comes out black, and the gray [middle amount of black] comes out red.)

Shouldn't that be switched to "the black [highest amount of black] comes out white"?
Posted Image

#10 david.atwell

david.atwell

    Former Moderator

  • Members
  • 627 posts
  • LocationIndianapolis, IN (39°46′5.88″N 86°9′29.52″W)
  • Reputation:18

Posted 16 October 2007 - 05:25 PM

This is great. I love the light tone of your words - it's nice to see some personality in a tutorial. I even liked the pun (and I usually abhor all punnery :P).


I'm glad you enjoyed it! That's exactly what I was going for: knowledge with fun, just like Bill Nye. :-)

Shouldn't that be switched to "the black [highest amount of black] comes out white"?


You're absolutely right! That's an artifact of an earlier draft, when I was still on Luminosity (before I decided to switch to Key/Black in that example). Thanks for pointing it out! Good catch,...and it's fixed!

Posted Image

The Doctor: There was a goblin, or a trickster, or a warrior... A nameless, terrible thing, soaked in the blood of a billion galaxies. The most feared being in all the cosmos. And nothing could stop it, or hold it, or reason with it. One day it would just drop out of the sky and tear down your world.
Amy: But how did it end up in there?
The Doctor: You know fairy tales. A good wizard tricked it.
River Song: I hate good wizards in fairy tales; they always turn out to be him.


#11 Blooper

Blooper
  • Members
  • 2,102 posts
  • Reputation:0

Posted 20 November 2007 - 11:15 PM

Thanks a bunch. I kind of had an idea of what Luminosity did, but the rest left me wondering :)

#12 RyuinfinityPDN

RyuinfinityPDN
  • Members
  • 395 posts
  • Reputation:0

Posted 23 November 2007 - 08:31 PM

Wow! finally! BTW: Someone should make a rainbow gradient plugin! It would be easy! (I think)

#13 david.atwell

david.atwell

    Former Moderator

  • Members
  • 627 posts
  • LocationIndianapolis, IN (39°46′5.88″N 86°9′29.52″W)
  • Reputation:18

Posted 24 November 2007 - 12:28 AM

Have you read this tutorial? I tell you how to do it above. :-)

Posted Image

The Doctor: There was a goblin, or a trickster, or a warrior... A nameless, terrible thing, soaked in the blood of a billion galaxies. The most feared being in all the cosmos. And nothing could stop it, or hold it, or reason with it. One day it would just drop out of the sky and tear down your world.
Amy: But how did it end up in there?
The Doctor: You know fairy tales. A good wizard tricked it.
River Song: I hate good wizards in fairy tales; they always turn out to be him.


#14 pokemonalexander2

pokemonalexander2
  • Members
  • 20 posts
  • Locationin your dreams lol , hawaii
  • Reputation:0

Posted 09 January 2008 - 04:01 AM

this look oddly familiar to Gimp's gradient maker

#15 pyrochild

pyrochild

    Plugin Author of the Year 2012

  • Administrators
  • 11,273 posts
  • LocationColorado
  • Reputation:137

Posted 09 January 2008 - 04:08 AM

this look oddly familiar to Gimp's gradient maker

ohmaigawdrly?

eat this post.
sig8.png
[I write plugins and stuff]

If you like a post, upvote it!

#16 david.atwell

david.atwell

    Former Moderator

  • Members
  • 627 posts
  • LocationIndianapolis, IN (39°46′5.88″N 86°9′29.52″W)
  • Reputation:18

Posted 09 January 2008 - 04:10 AM

*eats that post*

Posted Image

The Doctor: There was a goblin, or a trickster, or a warrior... A nameless, terrible thing, soaked in the blood of a billion galaxies. The most feared being in all the cosmos. And nothing could stop it, or hold it, or reason with it. One day it would just drop out of the sky and tear down your world.
Amy: But how did it end up in there?
The Doctor: You know fairy tales. A good wizard tricked it.
River Song: I hate good wizards in fairy tales; they always turn out to be him.


#17 pyrochild

pyrochild

    Plugin Author of the Year 2012

  • Administrators
  • 11,273 posts
  • LocationColorado
  • Reputation:137

Posted 09 January 2008 - 04:12 AM

eat, this post -> ingest, this post -> in jest, this post.

yay for really bad puns... :D
sig8.png
[I write plugins and stuff]

If you like a post, upvote it!

#18 david.atwell

david.atwell

    Former Moderator

  • Members
  • 627 posts
  • LocationIndianapolis, IN (39°46′5.88″N 86°9′29.52″W)
  • Reputation:18

Posted 09 January 2008 - 04:16 AM

*eats the bad puns*

Posted Image

The Doctor: There was a goblin, or a trickster, or a warrior... A nameless, terrible thing, soaked in the blood of a billion galaxies. The most feared being in all the cosmos. And nothing could stop it, or hold it, or reason with it. One day it would just drop out of the sky and tear down your world.
Amy: But how did it end up in there?
The Doctor: You know fairy tales. A good wizard tricked it.
River Song: I hate good wizards in fairy tales; they always turn out to be him.


#19 The_Lionhearted

The_Lionhearted
  • Members
  • 2,613 posts
  • LocationSpringfield, MO
  • Reputation:1

Posted 09 January 2008 - 05:22 PM

*dies a little bit inside* :?

;)

#20 cj289

cj289
  • Newbies
  • 2 posts
  • Reputation:0

Posted 06 February 2010 - 02:19 PM

Hey great job thanks.