Using blend if for masking

I’m a big fan of exceptionally clean production documents and exceptionally scrappy mockup documents (yes, I keep those tasks separate). Being scrappy frees you to use unconventional, but faster, methods.

Let’s say you’re working on a redesign of an existing app. Rather than recreating everything, it’s easier and more accurate to work with real screenshots. And, if you’re working with real screenshots, you’re working with bitmap images, which can be difficult to edit.

Here’s a screenshot of an icon on a red background. If you wanted to be able to change the icon colour and move it around freely on different backgrounds, how would you do it?

Screen or multiply blend modes can be used in some cases, but that’s not an option here. You could duplicate the green or blue channel, use levels to edit the mask, make a selection, then create a new layer and fill. You could also use the magic wand, but that would likely lead to poor results and require a bit of trial and error to find the correct settings.

All those methods are slow or give average results. We need a better way.

Blend if #

Photoshop’s blend if sliders in the blending options window control how brightness levels of a layer or group are mapped to transparency.

To separate our white icon from its red background, drag the This Layer black point to the right until the red just disappears. Then, hold ⌥ and drag the black point again all the way to the right. This splits it, mapping the red to completely transparent, and white to fully opaque.

The icon is now masked correctly, but the colour information is not what we want — the white icon’s antialiasing still fades to red. Partially transparent areas don’t look as they should.

We can’t colour the icon with a colour overlay layer effect, because blend if is applied after the other layer effects, which results in a solid block of colour, not the icon itself.

It is possible to permanently apply the blend if effect to the layer though. Pressing ⌘G to group, then ⌘E to merge, creates a bitmap layer with the blend if baked in.

Now we can use a colour overlay layer effect to apply a colour to the icon.

In fact, we can even place the same red underneath our new icon and sample some of the partially transparent areas to see how closely they match.

Not bad.

254, 202, and 201 for the original red, green and blue values verses 254, 201, and 201 for the new icon. The single value change for the green channel is due to rounding errors, because we’re only working with 8 bits per channel. Definitely close enough for a mockup and the other possible techniques wouldn’t be any better.

Depending on the situation, you may need to move the white point, instead of the black point. Here’s the blend if settings required to separate the toolbar icons for Dropbox’s iOS app.

And the settings required to separate the toolbar icons for Tweetbot.

Nesting instead of merging #

Rather than merging, it is also possible to control compositing order by nesting groups and applying the appropriate layer effects and blending options to each group. This maintains full editabilty, but it can get a little messy. Here’s a real example I made to process a video layer (and here is the final version).

Blend if, ⌘G, ⌘E #

So, if you find yourself needing to separate an icon from its background, using blend if, then pressing ⌘G and ⌘E is usually quicker and more accurate than the alternatives.

Published 18 July 2016.