Does it blend? | nilshendriks.com

nils hendriks

Design System

Does it blend?

Published on:

I created a proof of concept to see how far I could go in recreating Edenspiekermann’s Utrecht City Theatre logo’s blending effects (like an image editor’s layer blend mode).

Updated: 2014-12-29

It makes use of a proposed new feature: photoshop like blending modes. It’s not exactly the same as the original work (as that uses a custom-made typeface) but the idea behind it works. Alignment of the characters (with their flipped versions) is rather tricky. It also depends on what font is used and the colour of the background.

More about the custom typeface on fontfeed. It also explains this effect wasn’t as much about blending as it was about different superimposed shapes.

In an image editor (Photoshop, Acorn, Pixelmator etc) I could recreate this using 2 layers of the text:

  1. The brownish version that is flipped vertically
  2. The white layer on top with layer blending mode set to linear dodge

Now, linear dodge is one of those modes that have been left out of the CSS blending mode ‘spec’. To recreate the effect though, I needed 3 layers (not counting the background):

  1. the brownish mirrored (or 180 degrees rotated) text
  2. the semi transparent grey version of the text
  3. the blended layer showing the overlapping parts of the other 2 layers by mix-blend-mode set to ‘overlay’

Example

stadsschouwburg

stadsschouwburg

stadsschouwburg

stadsschouwburg

stadsschouwburg

stadsschouwburg

stadsschouwburg

stadsschouwburg

stadsschouwburg