Blend Modes? You're Soaking In It

It turns out that being a freelancer is about twice as much work as you expect.  It’s been fun, but it’s been really busy. So, you’ll forgive me if I’m a little late responding to this awesome post about multi-input shaders on Greg Schechter’s blog.  Did someone say blend modes?

Blend Modes Defined

I’m not an expert here and if you want to know more, then you may want to check out this or this.  My practical understanding, though, is that blend modes give you the ability define how a layer visually interacts with the objects below it.  We’re used to a really simple blend mode (although I’m not sure if it actually counts) when we set the opacity on something and can see the content below it.

When we do that, somewhere some math is done that combines the value of the pixels of the object where set the opacity with the pixels that were below it.  WPF and Silverlight support one version of that math, the “normal” one.  If you’re going to support one, that’s probably the right one.  Photoshop supports something like 25 different ways to do that math and Flash supports a bunch too.  These are blend modes and they have names (like Color Burn, Linear Burn, Overlay, Vivid Light, etc.).

Why Blend Modes Mattter

So what’s the big deal?  For a lot of scenarios, there isn’t one.  Regular transparency blending is often exactly what you’re looking for.  On the other hand, once you start thinking in blend modes they start to pop up every where, much like transparency or rounded corners.  You didn’t think you cared until you had them (or noticed that everyone else was using them).

I have a couple of favorites, but a top pick (at least in Photoshop) is a mode called Linear Burn and I think it has some good application to UI.  First, here’s a simple example of layering an orange square over a paper texture.

Blend Modes Compared

You can see how the best we can do with the standard transparency blending (the Opacity Overlay) has the effect of “evening” out the texture of the paper.  We lose a lot of the contrast information as everything fights to be a little bit orange and a little bit paper.

Check out the Linear Burn, on the other hand.  When we apply that guy, we keep that contrast but do so in an orange kind of way and the result is much more vibrant and a much better texture.

Why Blend Modes Mattter for UI

There are tons of applications to UI, but a semi-geeky one is that this “dimming” effect of regular blending makes it much more difficult to create generic designs that can be colored or manipulated at runtime.  Here’s a concrete example: you’ve probably created a template for a button in the past that uses a gradient to produce some depth on the buttons’ surface.  You might do that with a partially transparent white-to-black gradient on top of the button’s background to produce something like this:

Opacity Overlay

Not bad, but look how dim our vibrant green became.  If the consumer of that button set the background to be a very bright green and ended up with this, he might be disappointed.  (By the way, you would probably work around that by not including any white in your gradient.  Now you would have more vibrant albeit relatively dark button, but at least you could keep the original color).

Linear Burn

Much nicer, right?  Linear Burn is a good one for something like this but theoretically the sky is the limit.

Multi-input Shaders == Blend Modes Potential

And that’s where multi-input shaders come into play.  With more than one input into the shader, you could combine the gradient and green to produce this or any other smart combination that you could think of.  You just do some math to say how the pixels combine.  Forget 25 blend modes Photoshop or Flash, WPF just gave us infiniti (that was for you Scott Barnes).  That’s essentially what Greg did in his post.  Great job WPF team.

So here’s the thing.  The math for blend modes is pretty straightforward.  It’s probably just a weekend for someone to start building some of these for us.  So, any takers?   Oh, and Silverlight…we’re watching you.


Published

Discussion

Previous