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.
+