is a blog about design, technology and culture written by Khoi Vinh, and has been more or less continuously published since December 2000 in New York City. Khoi is currently Principal Designer at Adobe. Previously, Khoi was co-founder and CEO of Mixel (acquired in 2013), Design Director of The New York Times Online, and co-founder of the design studio Behavior, LLC. He is the author of “How They Got There: Interviews with Digital Designers About Their Careers”and “Ordering Disorder: Grid Principles for Web Design,” and was named one of Fast Company’s “fifty most influential designers in America.” Khoi lives in Crown Heights, Brooklyn with his wife and three children.
It’s kind of ironic, but one of the things that has made it easier to move away from Photoshop is the immense popularity of some of its very own features. A good example is the program’s blend modes — darken, multiply, color burn, lighten, screen, color dodge, etc. These have become so popular that when other graphics programs like Acorn, Pixelmator and Sketch implement similar functionality, they generally replicate them almost exactly. Switching made simple.
My favorite of these blend modes, by far, is multiply. As the name suggests, this mode gives you the product of two or more layers, multiplying each pixel on the top layer by the pixel or pixels in the layers directly beneath it. The result is a darker image that is usually quite visually rich. I use it all the time.
Multiplication Approximation
While these blend modes, including multiply, are popular in design software, they are not as popular in Web browsers. This is something my friend Matt and I encountered this week while working on a new side project (coming soon!). Though there is apparently a new blend mode specification coming to CSS, wide support is still a ways off.
Here’s what the multiply blend mode looks like in Photoshop. In this example I’ve put a ‘translucent’ red box over a Google map.
The best emulation of that effect that today’s Web browsers can manage is to use simple alpha compositing, which creates the appearance of transparency. The result effectively reduces the strength of the red and turns it into something cloudier, almost pink.
As you can see, the difference between true multiply blending and merely altering opacity is similar to the difference between a sheet of red-colored acetate and a sheet of red-colored tissue paper.
As with every shortcoming on the Web, there is a hack that gets you somewhat close to the desired result, albeit with diminished elegance. Matt found that putting a translucent tiling background image in the red box can achieve something similar. He prepared an image in Photoshop (ironically) by first creating a layer filled with red. On top of that, he added a layer of 100% black, set to about 20% opacity. Then he grouped both of those layers and set the resulting layer group to 80% opacity. He exported the image as a PNG and ran it as a background pattern, and this is what it looks like:
Not perfect, but better — richer, more truly red — than using simple opacity controls.
Anyway, the point of all this is that after working through this exercise, it occurred to me that this is a good proxy for understanding how Photoshop is seeping into the rest of the software ecosystem. We can gauge what I consider to be Photoshop’s inevitable obsolescence by where else its features show up.
So it’s meaningful that competing graphics programs have replicated most of Photoshop’s core features, which is to say that we are on our way to having the best parts of Photoshop available to us in other software. But we’re not there yet. It will be even more meaningful — and potentially a very different world, where we don’t need Photoshop at all — when that functionality makes its way into Web browsers too.
There’s an even better way of faking it, although requires processing on images first.
If you make your images a solid colour, with an alpha channel (which contains a greyscale version of the actual image), you can then place the red block (in this case) underneath, and you get a very very close match to a true multiply.
Of course this means you can only do it with monotone images, so things like multiplying over a Google Map, such as your example, are out of the question.
It’s a trick I used heavily on my wife’s photoblog. (In that case, I’ve leveraged a modified version of phpThumb to process the images into the monotone alpha-channelled PNGs, so she can just upload full colour jpegs and not have to worry about processing herself).
Don’t be afraid to do the blend mode math! It’s always interesting.
S (source) = the color you’re drawing (i.e., your red quad)
D (dest) = the color you’re drawing over (e.g., your map)
O (output) = the result
Sr = red channel of src
Drgb = color of dest
O = (Orgb, Oa)
O = (Or, Og, Ob, Oa)
etc.
Multiply looks like this:
O = S*D
In your first example, S = (1, 0, 0, 1), plus we know Da is 1:
O = (Sr*Dr, Sg*Dg, Sb*Db, Sa*Da)
O = (Dr, 0, 0, 1)
So “multiply” with solid red is just isolating the red channel of your map. Cool!
Alpha compositing looks like this:
O = (Drgb*(1-Sa)+Srgb*Sa, Da*(1-Sa)+Sa)
That is, for colors, use some percentage of the original and some percentage of the new. For alpha, use some percentage of the original and some percentage of 1.
In your second example, S = (1, 0, 0, 0.5), so:
O = (Drgb*(1-Sa)+Srgb*Sa, Da*(1-Sa)+Sa)
O = (Dr/2 + 0.5, Dg/2, Db/2, 1)
So the red channel on your map goes halfway to 1, the others go halfway to 0. Definitely different than example 1, and not as dramatic. Red will end up between 0.5 and 1, and the others will end up between 0 and 0.5.
In your third example, do one alpha composite of (1, 0, 0, 1) and (0, 0, 0, 0.2) to get your intermediate color I:
I = (Drgb*(1-Sa)+Srgb*Sa, Da*(1-Sa)+Sa)
I = (0.8, 0, 0, 1)
Makes sense, that’s just a darker red. Then composite that S = (0.8, 0, 0, 1) to get your final O:
O = (Drgb*(1-Sa)+Srgb*Sa, Da*(1-Sa)+Sa)
O = (Dr/5 + 0.64, Dg/5, Db/5, 1)
That means red gets placed somewhere between 0.64 and 0.84, and the others end up between 0 and 0.2. A tradeoff! The greens and blues are closer to the goal, but the reds get clamped to a smaller range (which you can actually see in your image).
So you can actually see from the math how Ex 3 ends up a little closer to what Ex 1 is. Pretty neat! You can also see how alpha compositing is never going to get you anything near what a true alternative blend mode would get you; trying to get rid of the greens and blues in that equation pushes the reds into a smaller and smaller range up near 1.
The process described to create the transparent PNG (overlay black, increase transparency, export PNG) is the same as adding black or increasing the shade of the base red color. The same effect could be achieved with straight-up RGBA values in the browser…just step down in value from the base.
I guess this is what the comment above is trying to point out…
Nathan: Your wife’s photo blog looks terrific. Thanks for pointing that out.
Mike: Wow. Still a little intimidating, but I appreciate the explanation.
Andrew: I take your point. It certainly would be more technically elegant, but for some reason it feels a little more precise (if manual) to start with the desired color in Photoshop and tweak the transparency settings for the black layer and the layer group.
Heh—thanks, Khoi. The whole reason I came to work at Adobe was my deep frustration with Web design software (theirs & others’). I do my best to improve the tools from within, and I’m glad that others (e.g. Sketch) supply competition from outside. The slog can be long, but I remain amazed & grateful to be part of it.
There’s an even better way of faking it, although requires processing on images first.
If you make your images a solid colour, with an alpha channel (which contains a greyscale version of the actual image), you can then place the red block (in this case) underneath, and you get a very very close match to a true multiply.
Of course this means you can only do it with monotone images, so things like multiplying over a Google Map, such as your example, are out of the question.
It’s a trick I used heavily on my wife’s photoblog. (In that case, I’ve leveraged a modified version of phpThumb to process the images into the monotone alpha-channelled PNGs, so she can just upload full colour jpegs and not have to worry about processing herself).
Don’t be afraid to do the blend mode math! It’s always interesting.
S (source) = the color you’re drawing (i.e., your red quad)
D (dest) = the color you’re drawing over (e.g., your map)
O (output) = the result
Sr = red channel of src
Drgb = color of dest
O = (Orgb, Oa)
O = (Or, Og, Ob, Oa)
etc.
Multiply looks like this:
O = S*D
In your first example, S = (1, 0, 0, 1), plus we know Da is 1:
O = (Sr*Dr, Sg*Dg, Sb*Db, Sa*Da)
O = (Dr, 0, 0, 1)
So “multiply” with solid red is just isolating the red channel of your map. Cool!
Alpha compositing looks like this:
O = (Drgb*(1-Sa)+Srgb*Sa, Da*(1-Sa)+Sa)
That is, for colors, use some percentage of the original and some percentage of the new. For alpha, use some percentage of the original and some percentage of 1.
In your second example, S = (1, 0, 0, 0.5), so:
O = (Drgb*(1-Sa)+Srgb*Sa, Da*(1-Sa)+Sa)
O = (Dr/2 + 0.5, Dg/2, Db/2, 1)
So the red channel on your map goes halfway to 1, the others go halfway to 0. Definitely different than example 1, and not as dramatic. Red will end up between 0.5 and 1, and the others will end up between 0 and 0.5.
In your third example, do one alpha composite of (1, 0, 0, 1) and (0, 0, 0, 0.2) to get your intermediate color I:
I = (Drgb*(1-Sa)+Srgb*Sa, Da*(1-Sa)+Sa)
I = (0.8, 0, 0, 1)
Makes sense, that’s just a darker red. Then composite that S = (0.8, 0, 0, 1) to get your final O:
O = (Drgb*(1-Sa)+Srgb*Sa, Da*(1-Sa)+Sa)
O = (Dr/5 + 0.64, Dg/5, Db/5, 1)
That means red gets placed somewhere between 0.64 and 0.84, and the others end up between 0 and 0.2. A tradeoff! The greens and blues are closer to the goal, but the reds get clamped to a smaller range (which you can actually see in your image).
So overall:
Ex. 1 (multiply): (Dr, 0, 0, 1)
Ex. 2 (bad alpha): (Dr/2 + 0.5, Dg/2, Db/2, 1)
Ex. 3 (better blend): (Dr/5 + 0.64, Dg/5, Db/5, 1)
So you can actually see from the math how Ex 3 ends up a little closer to what Ex 1 is. Pretty neat! You can also see how alpha compositing is never going to get you anything near what a true alternative blend mode would get you; trying to get rid of the greens and blues in that equation pushes the reds into a smaller and smaller range up near 1.
Okay, now go read about the rest of them: Link
The process described to create the transparent PNG (overlay black, increase transparency, export PNG) is the same as adding black or increasing the shade of the base red color. The same effect could be achieved with straight-up RGBA values in the browser…just step down in value from the base.
I guess this is what the comment above is trying to point out…
Nathan: Your wife’s photo blog looks terrific. Thanks for pointing that out.
Mike: Wow. Still a little intimidating, but I appreciate the explanation.
Andrew: I take your point. It certainly would be more technically elegant, but for some reason it feels a little more precise (if manual) to start with the desired color in Photoshop and tweak the transparency settings for the black layer and the layer group.
Khoi: Different processes, I suppose. I work in SASS, so adding black to a base color is simple as calling a color transform function.
This talk that was at CSS Conf last spring shows a great way to do blend modes through Sass – some crazy math involved.
http://timhettler.github.io/cssconf-2013/#!/0
Adobe’s been working hard to bring Photoshop-style blending modes to CSS, and I’m pretty sure it’s not because we believe in “Photoshop’s inevitable obsolescence.” 😉 Rather, it’s because “The better the web, the better tools we can build, and the happier our customers“. See also Adobe’s work on Web typography & graphics (CSS regions & shaders).
John: you are a trooper for taking so much anti-Adobe abuse and still responding so gracefully. Cheers!
Heh—thanks, Khoi. The whole reason I came to work at Adobe was my deep frustration with Web design software (theirs & others’). I do my best to improve the tools from within, and I’m glad that others (e.g. Sketch) supply competition from outside. The slog can be long, but I remain amazed & grateful to be part of it.