7 ms·

Blending Modes

239 points by clairity 4y ago

throw_m239339 4y ago
> Do you just click different blending modes until it sort of looks right? Yes, guilty as charged when I work with Blender's mix color shader node...
- Etherlord87 4y ago
  You might be interested in this great post by Marty Fouts: https://blender.stackexchange.com/questions/253936/what-does-the-mixrgb-or-mix-shader-node-factor-do-exactly/253944#253944 https://blender.stackexchange.com/questions/253936/what-does...
adzm 4y ago
Good explanation of these things really. Would have loved more examples or some interactivity though.
- clairity 4y ago
  yes, i was excited about finding this explanatory article because i knew there was a mathematical basis behind the scenes for these blend modes, but it's not obvious from the names. just the grouping of the modes should help with recall in the future.
panzerboiler 4y ago
To integrate the article with Creative Commons implementations in glsl: - [Photoshop blends by ben](https://www.shadertoy.com/view/XdS3RW https://www.shadertoy.com/view/XdS3RW) - [Photoshop Blends Branchless by poljere](https://www.shadertoy.com/view/Md3GzX https://www.shadertoy.com/view/Md3GzX)
petethepig 4y ago
Great article and all but there's no way I'm going to remember any of it. I think I'm going to stick to "click different blending modes until it sort of looks right".
- capableweb 4y ago
  Unfortunately, seems the author already thought about you. > Do you just click different blending modes until it sort of looks right? > Well, that probably won't change after you read this but at least you probably won't use Lighten or Darken again.
- youssefabdelm 4y ago
  Exactly, also I typically layer a ton of different colored gradients on top of each other while clicking through each blending mode for each layer. There's no way I'm going to compute in my head "Well this gradient with three colors is going to look like this after I mix it on top of these 3 bottom gradients each with different colors, oh and an image underneath" Clicking a button beats computing an image in my head in terms of mental energy cost. Speaking of energy, a physical dial, or scroll control, would be nice to cycle through quickly. Edit: I do really admire this author's technical deep dives though, very beautifully made
  - k__ 4y ago
    In my few journeys into image manipulation, I played around the first tries and then settled for specific blend modes for specific results. I mean, I didn't calculate what I wanted, but I built a mental model of what each mode does and when to choose which later.
  - kqr 4y ago
    At least in some versions of Adobe software, on some platforms (was years since I used Adobe so I can't remember if it was on Windows or OS X), once you've selected one blending mode, the drop-down control is still in focus so you can use the scrollwheel on your mouse to cycle through them.
    - KineticLensman 4y ago
      Mouse scrolling through the blending dropdown is still a thing in Photoshop CC. It sometimes catches me out when I want to mouse-zoom the window immediately after choosing a blending mode
andybak 4y ago
Seeing this just allowed me to connect two mild obsessions from different stages of my life: Conway operators are blending modes for geometry. I need to go away and think about this some more...
- cmason 4y ago
  This sounds like a really cool interactive demo/tutorial. :)
- Etherlord87 4y ago
  Blend modes are methods to combine two inputs into one output. Conway operators to my understanding are procedures to transform an input to something else (an output).
  - loa_in_ 4y ago
    If you start with an initial (blank) canvas, each layer blending can be thought of as transforming that canvas into new state, making this a monad, and blending an unitary operation within that monad
Etherlord87 4y ago
If you wonder how the `opacity` and `fill` in Photoshop layers differ (other than `fill` not affecting layer effects like shadow): the color of the layer is multiplied by the `fill`, then the result + color of the layer below are used to calculate the color based on blend mode, and then opacity lerps between the result of this calculation and the layer below. Lerp is simply linear interpolation TOP × OPACITY + BOTTOM × (1-OPACITY).
aimor 4y ago
I learned all about blending modes and filters this past week figuring out how to split an image into its CMYK components using just HTML and CSS. It was not straightforward, but I did finally get it right. https://deepf.art/cmyk.html https://deepf.art/cmyk.html Two things of interest: I saw some weird off-by-1 errors between the expected color and what Firefox's inspector measured even with pretty simple filters like invert(). I'd like to dig into that more. And I had precision issues with how much grayscale() would scale the blue channel, especially since the color channels are 8 bit, which I improved by using luminance() instead. The MDN and the CSS spec was a great resource for figuring out exactly what calculation each blend mode and filter was doing.
- JKCalhoun 4y ago
  Interesting. I'll just mention, perhaps you knew, that CMYK is a little tricky since it is a little over-specified: 100% CMY the same as 100% ... in theory. What is it called, undercolor removal? (Yeah: [1]) Grayscale could be weird if gamma is taken into account. (I recall that there are blending modes at least that assume you convert to a 1.0 gamma, do the blend, then convert back to the original gamma.) [1] http://printwiki.org/Undercolor_Removal http://printwiki.org/Undercolor_Removal
  - JusticeJuice 4y ago
    >100% CMY the same as 100% ... in theory. Isn't this just rich black? I thought the result also differed depending on the printing medium (due to just more ink and different absorbency of the medium) https://en.wikipedia.org/wiki/Rich_black https://en.wikipedia.org/wiki/Rich_black
  - aimor 4y ago
    Thanks for mentioning it, I'm not familiar with the printing process in general. I learned CMYK is always used in the context of printing, and RGB doesn't have a defined transformation to CMYK, but because I was displaying this digitally I chose to ignore a lot of details. But I definitely wanted to mimic the undercolor removal, which to me meant making the CMY channels as light as possible. I didn't think about gamma at all, there's no CSS filter for it.
mortenjorck 4y ago
This is a great technical explainer on the blend modes, but it makes me want to go deeper: Where did the canonical 18 blending algorithms that we take for granted today originate? Was it a brainstorming session between John and Thomas Knoll in 1992? A paper by Ed Catmull in 1979? Did Adobe invent them, or merely popularize them? Somewhere, there’s an oral history of blending modes waiting to be told, and I can’t wait to read it.
- recuter 4y ago
  https://en.wikipedia.org/wiki/Darkroom_manipulation https://en.wikipedia.org/wiki/Darkroom_manipulation https://en.wikipedia.org/wiki/Dodging_and_burning https://en.wikipedia.org/wiki/Dodging_and_burning
  - mark-r 4y ago
    That's only a small part of the available blend modes. I've always wondered how the digital versions of dodge and burn compare to the darkroom versions.
- stoeckley 4y ago
  They are typically referred to as Porter Duff blend modes, so I assume that these algorithms were invented mainly by those guys. (by Thomas Porter and Tom Duff)
  - mortenjorck 4y ago
    This set me on an interesting trail. I haven’t found anything yet that links Porter and Duff to the modern blend modes as we know them, but I did find this 1984 SIGGRAPH paper they authored that appears to have laid much of the groundwork! https://graphics.pixar.com/library/Compositing/paper.pdf https://graphics.pixar.com/library/Compositing/paper.pdf
    - stoeckley 4y ago
      I don't know the history, but there is supposedly a fixed set of Porter Duff blend modes, specific algorithms. For example, this C++ library: > Blend2D supports all Porter & Duff compositing operators https://blend2d.com/ https://blend2d.com/ Also, the link shared by one of the sibling comments can be searched for "Porter" to see how they are referenced: https://drafts.fxtf.org/compositing/ https://drafts.fxtf.org/compositing/
cercatrova 4y ago
Typefully is a great app by the way, I use it often to compose and schedule Twitter threads.
mark-r 4y ago
This is a great writeup, but it's the simplified view. The hard part comes when you need to consider pixels that aren't 100% opaque.
- jbverschoor 4y ago
  It's probably better to fiddle around with some OpenGL / WebGL blendmode tool and see what's actually happening, and why you'd use certain modes in certain cases
lmc 4y ago
Looks like a nice article, but can't read it on my phone because zoom is disabled and i can't read the text in the images :-(
trymas 4y ago
I always used this, on rare times I need a layered image editor: https://en.wikipedia.org/wiki/Blend_modes https://en.wikipedia.org/wiki/Blend_modes Informative article, but non-zoomable interface with tiny images on mobile is not great.
chrismorgan 4y ago
> When you have Screen and Multiply, there is no good reason to use Lighten or Darken. reMarkable uses the darken blend mode very successfully in its monochrome and colour renderings of highlighter strokes. Multiply would make the strokes darker the more you drew (and there is a separate highlighter colour that uses multiply for this effect), but darken gets just one level of darkening however many times you draw over it, which is normally what you want, and achieving that result by any other means would be much, much more effort, especially once you get to overlapping highlighter and non-highlighter strokes of various colours of each.
- rebuilder 4y ago
  And in digital painting, these are very useful. Darken, for example is great for tweaking values without changing your shadow intensity.
mtrycz2 4y ago
Is it really that difficult to add just the tiniest bit of context to let me know what the article is about? As is, it could be any of: * Kitchen appliances * Urban stealth * Image processing * Fashion contagion * Music and rhythm * ...
- throwamon 4y ago
  So you're telling me you don't run an ML text classification model on it like we all do here? The second easiest way is to read the comments before the post.
  - mtrycz2 4y ago
    I clicked the article and got the context, but it did take a click and couple of lines of text to "get". I complain because I come here for news, not for riddles.
- deleted 4y ago
  [deleted]
dirtyid 4y ago
I cannot believe how many creative professionals I know that uses blending modes for a living, still just flips through them one by one to see which one looks good.

239 points by clairity 4y ago

> Do you just click different blending modes until it sort of looks right? Yes, guilty as charged when I work with Blender's mix color shader node...

Etherlord87 4y ago
You might be interested in this great post by Marty Fouts: https://blender.stackexchange.com/questions/253936/what-does-the-mixrgb-or-mix-shader-node-factor-do-exactly/253944#253944 https://blender.stackexchange.com/questions/253936/what-does...

adzm 4y ago

Good explanation of these things really. Would have loved more examples or some interactivity though.

clairity 4y ago
yes, i was excited about finding this explanatory article because i knew there was a mathematical basis behind the scenes for these blend modes, but it's not obvious from the names. just the grouping of the modes should help with recall in the future.

panzerboiler 4y ago

To integrate the article with Creative Commons implementations in glsl: - [Photoshop blends by ben](https://www.shadertoy.com/view/XdS3RW https://www.shadertoy.com/view/XdS3RW) - [Photoshop Blends Branchless by poljere](https://www.shadertoy.com/view/Md3GzX https://www.shadertoy.com/view/Md3GzX)

petethepig 4y ago

Great article and all but there's no way I'm going to remember any of it. I think I'm going to stick to "click different blending modes until it sort of looks right".

capableweb 4y ago
Unfortunately, seems the author already thought about you. > Do you just click different blending modes until it sort of looks right? > Well, that probably won't change after you read this but at least you probably won't use Lighten or Darken again.
youssefabdelm 4y ago
Exactly, also I typically layer a ton of different colored gradients on top of each other while clicking through each blending mode for each layer. There's no way I'm going to compute in my head "Well this gradient with three colors is going to look like this after I mix it on top of these 3 bottom gradients each with different colors, oh and an image underneath" Clicking a button beats computing an image in my head in terms of mental energy cost. Speaking of energy, a physical dial, or scroll control, would be nice to cycle through quickly. Edit: I do really admire this author's technical deep dives though, very beautifully made
- k__ 4y ago
  In my few journeys into image manipulation, I played around the first tries and then settled for specific blend modes for specific results. I mean, I didn't calculate what I wanted, but I built a mental model of what each mode does and when to choose which later.
- kqr 4y ago
  At least in some versions of Adobe software, on some platforms (was years since I used Adobe so I can't remember if it was on Windows or OS X), once you've selected one blending mode, the drop-down control is still in focus so you can use the scrollwheel on your mouse to cycle through them.
  - KineticLensman 4y ago
    Mouse scrolling through the blending dropdown is still a thing in Photoshop CC. It sometimes catches me out when I want to mouse-zoom the window immediately after choosing a blending mode

andybak 4y ago

Seeing this just allowed me to connect two mild obsessions from different stages of my life: Conway operators are blending modes for geometry. I need to go away and think about this some more...

cmason 4y ago
This sounds like a really cool interactive demo/tutorial. :)
Etherlord87 4y ago
Blend modes are methods to combine two inputs into one output. Conway operators to my understanding are procedures to transform an input to something else (an output).
- loa_in_ 4y ago
  If you start with an initial (blank) canvas, each layer blending can be thought of as transforming that canvas into new state, making this a monad, and blending an unitary operation within that monad

Etherlord87 4y ago

If you wonder how the `opacity` and `fill` in Photoshop layers differ (other than `fill` not affecting layer effects like shadow): the color of the layer is multiplied by the `fill`, then the result + color of the layer below are used to calculate the color based on blend mode, and then opacity lerps between the result of this calculation and the layer below. Lerp is simply linear interpolation TOP × OPACITY + BOTTOM × (1-OPACITY).

aimor 4y ago

I learned all about blending modes and filters this past week figuring out how to split an image into its CMYK components using just HTML and CSS. It was not straightforward, but I did finally get it right. https://deepf.art/cmyk.html https://deepf.art/cmyk.html Two things of interest: I saw some weird off-by-1 errors between the expected color and what Firefox's inspector measured even with pretty simple filters like invert(). I'd like to dig into that more. And I had precision issues with how much grayscale() would scale the blue channel, especially since the color channels are 8 bit, which I improved by using luminance() instead. The MDN and the CSS spec was a great resource for figuring out exactly what calculation each blend mode and filter was doing.

JKCalhoun 4y ago
Interesting. I'll just mention, perhaps you knew, that CMYK is a little tricky since it is a little over-specified: 100% CMY the same as 100% ... in theory. What is it called, undercolor removal? (Yeah: [1]) Grayscale could be weird if gamma is taken into account. (I recall that there are blending modes at least that assume you convert to a 1.0 gamma, do the blend, then convert back to the original gamma.) [1] http://printwiki.org/Undercolor_Removal http://printwiki.org/Undercolor_Removal
- JusticeJuice 4y ago
  >100% CMY the same as 100% ... in theory. Isn't this just rich black? I thought the result also differed depending on the printing medium (due to just more ink and different absorbency of the medium) https://en.wikipedia.org/wiki/Rich_black https://en.wikipedia.org/wiki/Rich_black
- aimor 4y ago
  Thanks for mentioning it, I'm not familiar with the printing process in general. I learned CMYK is always used in the context of printing, and RGB doesn't have a defined transformation to CMYK, but because I was displaying this digitally I chose to ignore a lot of details. But I definitely wanted to mimic the undercolor removal, which to me meant making the CMY channels as light as possible. I didn't think about gamma at all, there's no CSS filter for it.

mortenjorck 4y ago

This is a great technical explainer on the blend modes, but it makes me want to go deeper: Where did the canonical 18 blending algorithms that we take for granted today originate? Was it a brainstorming session between John and Thomas Knoll in 1992? A paper by Ed Catmull in 1979? Did Adobe invent them, or merely popularize them? Somewhere, there’s an oral history of blending modes waiting to be told, and I can’t wait to read it.

recuter 4y ago
https://en.wikipedia.org/wiki/Darkroom_manipulation https://en.wikipedia.org/wiki/Darkroom_manipulation https://en.wikipedia.org/wiki/Dodging_and_burning https://en.wikipedia.org/wiki/Dodging_and_burning
- mark-r 4y ago
  That's only a small part of the available blend modes. I've always wondered how the digital versions of dodge and burn compare to the darkroom versions.
stoeckley 4y ago
They are typically referred to as Porter Duff blend modes, so I assume that these algorithms were invented mainly by those guys. (by Thomas Porter and Tom Duff)
- mortenjorck 4y ago
  This set me on an interesting trail. I haven’t found anything yet that links Porter and Duff to the modern blend modes as we know them, but I did find this 1984 SIGGRAPH paper they authored that appears to have laid much of the groundwork! https://graphics.pixar.com/library/Compositing/paper.pdf https://graphics.pixar.com/library/Compositing/paper.pdf
  - stoeckley 4y ago
    I don't know the history, but there is supposedly a fixed set of Porter Duff blend modes, specific algorithms. For example, this C++ library: > Blend2D supports all Porter & Duff compositing operators https://blend2d.com/ https://blend2d.com/ Also, the link shared by one of the sibling comments can be searched for "Porter" to see how they are referenced: https://drafts.fxtf.org/compositing/ https://drafts.fxtf.org/compositing/

cercatrova 4y ago

Typefully is a great app by the way, I use it often to compose and schedule Twitter threads.

mark-r 4y ago

This is a great writeup, but it's the simplified view. The hard part comes when you need to consider pixels that aren't 100% opaque.

jbverschoor 4y ago
It's probably better to fiddle around with some OpenGL / WebGL blendmode tool and see what's actually happening, and why you'd use certain modes in certain cases

lmc 4y ago

Looks like a nice article, but can't read it on my phone because zoom is disabled and i can't read the text in the images :-(

trymas 4y ago

I always used this, on rare times I need a layered image editor: https://en.wikipedia.org/wiki/Blend_modes https://en.wikipedia.org/wiki/Blend_modes Informative article, but non-zoomable interface with tiny images on mobile is not great.

chrismorgan 4y ago

> When you have Screen and Multiply, there is no good reason to use Lighten or Darken. reMarkable uses the darken blend mode very successfully in its monochrome and colour renderings of highlighter strokes. Multiply would make the strokes darker the more you drew (and there is a separate highlighter colour that uses multiply for this effect), but darken gets just one level of darkening however many times you draw over it, which is normally what you want, and achieving that result by any other means would be much, much more effort, especially once you get to overlapping highlighter and non-highlighter strokes of various colours of each.

rebuilder 4y ago
And in digital painting, these are very useful. Darken, for example is great for tweaking values without changing your shadow intensity.

mtrycz2 4y ago

Is it really that difficult to add just the tiniest bit of context to let me know what the article is about? As is, it could be any of: * Kitchen appliances * Urban stealth * Image processing * Fashion contagion * Music and rhythm * ...

throwamon 4y ago
So you're telling me you don't run an ML text classification model on it like we all do here? The second easiest way is to read the comments before the post.
- mtrycz2 4y ago
  I clicked the article and got the context, but it did take a click and couple of lines of text to "get". I complain because I come here for news, not for riddles.
deleted 4y ago
[deleted]

dirtyid 4y ago

I cannot believe how many creative professionals I know that uses blending modes for a living, still just flips through them one by one to see which one looks good.