The Mathematics of Blend Modes
ฝัง
- เผยแพร่เมื่อ 31 พ.ค. 2024
- Consider supporting us on Patreon! / filmmakeriq
Darken, Lighten, Soft Light - every program has them but do you really know what they all do? We explore the mathematics of blend modes found in After Effects, Photoshop, Premiere Pro, Davinci Resolve and others using 3d visualization to try to gain some insight into what all these modes do.
If you would like to study the graphics further they are available in our course supplemental:
filmmakeriq.com/lessons/blend...
I've been making computer illustrations and graphics for 30 years, thereabouts, and this is by far the best video on blend modes. Some have more math, others show more examples, but this one has just enough of both, and are of good quality, combined with a clear description delivered at just the right speed/cadence. Excellent! All the information, given without wasting time or insulting intelligence!
I need someone like John to explain my whole life to me. Simplifying complex things
The 3d graph of Base-Blend and Luma made it easier to understand visually. No other channel explained it this way.👍👍
give this man an Oscar in teaching. if it doesn't exist, make one and give it to him.
The amount of work demanded in creating so such a video paints pretty much all other videos explaining the same subject as an insult to this one.
Thank you good sir for the amount of thought and effort gone into this rather dige4stable explanation of the blending modes.
It is very much appreciated!
As a teacher of computer graphics, I whole-heartedly approve this video, again. Very well done, great explanations, great examples and visualisations, just all around excellent, as we've all come to expect by now. Great stuff, John!
As a teacher of computer graphics too, I can sign this! Great work :)
This seems like a reasonable place to ask this. I've been digging into this lately but I wanted to confirm from experts whether I was correct. Are the "a" and "b" values the normalized rbg color vectors?
@@aes53 Not really "normalized" in the sense that they would be unit-length, but in the sense that individual R, G and B values from 0 to 1 are used, so multiplications would work out as expected.
@@TehBurek thanks, I appreciate it, you would surprised how hard that information is to find (probably I don’t know where to look for it). I realized after I posted that it probably wouldn’t be normalized but divided through by 255. Thanks again for responding.
@@aes53 Yes, you are correct. 0-1 can be a much nicer range to work with for multiple reasons, including avoiding directly dealing with precision. 255 is very commonly used due to ubiquity of 8-bits-per-channel image formats and display systems, but more and more stuff is moving to 10 or 12 bits or more (due to finer granularity, or HDR or whatever), where it won't be 255 anymore. Unit-length normalization for colors doesn't make much sense anyways, if you think about it, you couldn't have either black or white with it, etc.
Very few educators know how to blend teaching art and science at this level. Thank you for dedicating so much time to this!
Thanks for creating this extensive deep dive into the functioning of Adobe Blend Mode! 🙏 ♥
thank you for this. most videos on blend modes oversimplify it. they don't truly explain what's going on.
This is great. Nuke gives the maths formulas in the tooltip but doesn’t mean a lot on its own. I’ll need to come back to this to fully digest, but I think it’s the only attempt I’ve seen to properly break this information down and make it accessible. Amazing work, thank you
"May I be excused? My brain is full."
"No! You'll just have to empty it into that bucket...."
Fantastic video explaining things in both a simple way, but also diving into the math behind it, and paired with some fantastic samples. Thanks!
Wow, this information is super valuable!! Thank you! "But will it blend?"
I'm so happy that's still a meme. I work a block away from Blendtec
Believe me or not. I have been searching just this, just only this for last 2 months. It's like a gem for me. thank you Sir
for those in web design, some of these blend modes are also available in CSS3
Such a great teacher - making complex concepts understandable.
So much more amazing effort goes into videos on this channel it's lame that the yt algorithm seems to be recommending this channel less that it did a couple years ago. This channel deserves so much more attention and support.
What a great video. Great use of visuals and finally a video that makes a user friendly introduction to the blend modes. Thanks for sharing.
Thank you for this fantastic information. I have been wanting to know more about these functions for awhile. Well done and great graphics.
Thanks for this video. Almost 20 years using Adobe Software and never seen such a deep yet useful explanation of the math behind these.
Do you know, how awesome you are? That's like 10 years of torture by randomly clicking blend modes taken away in 30 minutes. Thanks man!
Formula correction (T=18:42) Pin Light for b>0.5 should be max(a,2(b-0.5)) instead of max(a,2b) -- otherwise it would just be solid white on the b>0.5 side.
I didn't write max(a,2b).
@@FilmmakerIQ sorry if i missed the sarcasm, but I'm referring to the Pin Light formula the video shows as f(a, b) = min(a, 2b) {for b
Oh - for some reason I thought you were on about Vivid Light - not Pin light.
@@FilmmakerIQ no problem. Happy to help.
This is absolutely amazing! Thank you so much! Can't imagine how long this must have taken to make...
Best explanation on blend modes . Great job.
What a wonderful piece of reference material. Thank you.
Really appreciate the hard work put to make this video... I could only 50% of the maths explained but it was totally amazing
Wow. How much information in one video. Great. Thank you.
Thanks so much for this conceptualization. Big fan of your work. Greetings from Chile.
Nice! Really informative. Been using those blend modes for years without knowing what the heck they were actually doing. Thanks for this!
I am currently learning how to write shaders, and this is invaluable to me at the moment. Thank you!
This video is exactly what I was looking for! Very cool!
Blending Modes really don't get talked about enough. When working with color, the color palettes you choose aren't the only important thing, the way the colors blend together can be night and day for the quality and aesthetic of a work.
I think this aspect of color needs to be explored more and have more people experimenting with it.
Glad I found this video, hope this helped make a difference for many armature artists and programmers. I already know a lot about blend modes, but I still learned a lot of useful details I didn't know watching this.
I hope one day I'll learn how the raw code behind these works, but that seems to be pretty advanced. Still though I'd love to be able to program automation in blending modes and make my own engines that use them.
In all the years I've done comps, I've used "source alpha", "multiply" and "add". All the rest seemed useless to me. Now I at least have an idea of when they might come in handy, thanks as always!
it is a base of knowledge that every graphic designer need! thank you .
appreciate your effort in sound design
Wow, this is such an amazing video. The graphical representation of everything couldn't be better. This would have so many more views if more people cared how everything works under the hood. Thank you very much!
Fantastic video, thanks a lot!
Outstanding! Thank you so much.
I expected to see how the Alpha Over (aka Normal) blending mode works, but this is very interesting. Thank you for going deep. I've learned things!
Great video. I finally understand why the blend modes are called as they are.
Thank you. That is all. Soooooo informative. Seriously.
Just the video I dit not know that I wanted today. Thanks, this was so cool.
Very nice work, thanks for going through all the details, the 3D view was especially informative!!
The Luminescent Premultiply mode was only covered briefly. It is pretty cool actually. It can be used to composite layers that have both normal and additive content, in one go. It treats areas with opaque alpha as normal, and areas with transparent alpha as additive. Under the hood, AFAIK, the mode will first subtract the alpha channel from the background RGB, then add the foreground RGB for the whole image, not just opaque areas.
If you want to deliver, say, a logo animation that has a lens flare to a colleague, exporting it to a single file usually does not work well - generally, the logo should be composited in normal mode, and the lens flare in screen or add mode. If you just add an alpha channel for the flare, when you try to put the resulting file on top of a new background, the lens flare will look dull.
Luminescent premultiply to the rescue. When preparing the file, the logo is to be rendered on a black background, with an alpha channel. The lens flare is then composited on top of this in additive mode. It should show on top of the logo as usual, as well as in the transparent area's RGB channels, brightening the black background, without it contributing to the alpha channel in any way.
When the resulting file is composited in Luminescent premultiply mode by your colleague, the areas with opaque alpha will in practice be composited in normal mode (you get a normal looking logo), and the areas with transparent alpha in additive mode (you get properly comped flare). The areas with a semitransparent alpha are obviously a blend of the two.
Voilá, correct results using just a single layer for these two different kinds of blending needs. Nifty.
Thank you John. This was very usefull stuff.
great tutorial
Amazing work sir, SOMEONE FINALLY did this and no better then you sir :) Thank you.
Damn, you're doing God's work here John, haha. That's some extensive explanation. What a great resource of knowledge Filmmaker IQ had become. We're proud of you man.
amazing john!!!!!
I am never going to need this information but for some reason I still enjoyed this.
this is amazing! thank you so much
This is excellent!
Do you think you could also maybe explain the math behind Fill for the special 8 blend modes?
Muito bom. Obrigado!
Great explanations! Question: is there a relationship between the mathematics of these blend modes and the way light works in the physical world (with our eyes or with cameras)? Seems like especially for Screen and Multiply there must be some kind of relationship since they are so good at simulating real-world effects. Do you know?
Great tutorial.
The gradient in Photoshop has linear mode. Just need to Uncheck "Smooth" Option for it to happen .
extremely useful, though a longer workshop would be a nice addendum
Great video btw
Re: The Add blending mode in After Effects: It's the same math, but the opacity of the layer starts to make a difference. Instead of having a white to black blending layer (b), you can have a white to fully transparent gradient instead and the result will be the same.
This is useful if you use feathered masks or even the opacity slider. So I guess it's 9th on that list of the special 8 mentioned(?)
Ahh - so basically Add uses Opacity the same way that Linear Dodge uses the Fill slider
Wow ty so much!
As always, very great video with awesome information for those that want to understand a little BTS the blending modes. Good thing, though, that there aren't any tests or exams on this topic, because even if I'm an aerospace engineer I'd need a little bit more time to actually make the information my own. :P
Parabéns!
Awesomesauce!
John, you are a mad man. Huuuge respect! :>
Nice!
This was super need of the hour
Hard mix blew my mind
Thanks a bundle
best video ever
I don't know about that... I mean this one's pretty good... th-cam.com/video/dQw4w9WgXcQ/w-d-xo.html
Cool... didn’t think I was going to make it!
That "bendy" 3D visualisation, could it be because you used some non-linear color space?
(sRGB most likely, cause that's what most software defaults to)
yep that's probably it.
The blending math pretty much assumes a typical (2.2-ish) gamma. For the contrast modes and such that reference "middle gray", they're actually referencing 0.5. With a linear color space, that's 50% gray -- just one stop below white. At a 2.2-ish gamma (sRGB, Adobe RGB, etc.), 0.5 is about 21.5% gray, much closer to our perception of middle gray. ProPhoto's 1.8 gamma gives a 28.7% middle gray. The modes that mathematically combine the values of the two layers are doing so in the gamma-adjusted space, which will give _somewhat_ different results depending on the gamma. But the big visible difference is in the modes that operate differently above and below 0.5.
I might've just become literate in basic algebra if I had watched this video in pre-school! My math teacher never bothered to mention how Math functions function! :P
great work. Why don't you make a video on green/blue screen shooting?
Thank you for this video! Would you mind if I cited it for one of my upcoming videos?
of course not... cite it all you want
so rgb is brightness in the dark and cmyk is darkness to a bright white background ?
Yes
👏👏👏
Anybody know how to achieve/imitate the TECHNICOLOR look?
More math!
17:00
Way too perfect, but i`ve been wondering to know an important tip about multiply blend mode, my question is long and its impossible to send it in form of text in comment, could i please send it as an short video via email for you?
14:00
Soft light for daaaaayyyyzzzz
Hello, why don't you use a real black/grey backdrop instead of a green screen?
it is less flexible
I honestly had no idea that fill and opacity did different things. Now I feel stupid.
Thanks for unapologetically using math.
• I’ve no darkroom experience, but I think I understand the history of the terms from analog to digital. I don’t understand the image at 10:37, however. Please explain a little bit more if possible.
•
read this en.m.wikipedia.org/wiki/Dodging_and_burning
" Any intelligent fool can make things bigger and more complex... It takes a touch of genius - and a lot of courage to move in the opposite direction." - E. F. Schumacher
This Quote suits you, sir.
John's slowly becoming a Kung Fu sensei.
I love you
I know.
Man, i'm early as hell.
🤯😉
Let me simplify this : Photoshop works on Luminance of a Pixel. And luminance is measured from 0 (Black) to White (1) Grey is middle (0.5). So a pixel between 0 and 0.5 will be measured as .29 ... 0.34... 0.45 ...etc.... and those pizels above 0.5 will be denoted as 0.60 ... 0.70... etc .. til they reach 1 (Pure white).
Now here is the main difference between traditional maths and these standardized luminance values.
When you divide in traditional maths, you will always get a smaller number...but in 'standardized' maths, you will always get a bigger number (quotient)
When you multiply in traditional maths, you will always get a bigger number.. but in 'standardized maths' you will get a smaller number.
That is the reason why a multiply operation results in a darker image.....and a divide operation results in a lighter image in Photoshop (or any other graphic software).
Here is how the multiply blend mode works : luminance of base layer x luminance of top layer (Blend layer) = Resultant luminance values.
Suppose the luminance of base layer is 0.78 (bright value) ... and the luminance of top layer (blend layer) is 0.28.. the result will be 0.78 x 0.28 = 0.21 (darker pixel)
Addition of luminance values and subtraction of luminance values will work just like traditional maths. But its the multiplication and division which is different in 'standardized' luminance values.
Lets take the color burn equation : Base layer luminance is inverted ... then divided by top layer, and the quotient is then inverted.
If this helped, give it a like.
Note : Just because Im from India does not mean that this maths comes naturally to me or makes me a maths genius. I just figured it out too.😊
You didn't simplify it, you made it incorrect. There's nothing new about this kind of math, it's still traditional math. If you multiply a fraction with another fraction you get a smaller fraction - is not backwards from traditional math- it IS traditional math.
@@FilmmakerIQ Perhaps you did not get what I meant. By standardized I mean... constricting luminance values from 0 to 255 to between 0 (pure black) and 1 (pure white).
Just stick to my video, I explain it properly. You're adding needless and incorrect terminology.
This video require too much IQ , but a thump up was gave
Even subscribed, I feel good today
Nice video ! In some softwares like Krita there is even more Blending modes and blending modes types than in Adobe softwares (50+!).
The blending mode I feel after watching is burn(ed)
Am i missing something but on 12:06 to callculate THE blue channel we have to divide by 0
But it is stickly prohibited))))))LoL
Look at the black and white map and you'll see that dividing by zero does create jagged ridges but the programs all have built in things to compensate the mathematical impossibility. But when there's a zero numerator the result is zero.
@@FilmmakerIQ Thanks for explanation
I should be editing, instead im watching these videos ....
good way to spend my time at least
Nice video as always however information overload. I will stick with my wet plate collodion photography.
See, wet plate collodiom sounds super complicated to me, haha
Translite indonesia
Humanity doesn't deserve John Hess.
Are you looking to take on an intern for a short while?
4:05 is where you totally lose me
- why are we plotting in 3 dimensions?
- why are we calling it luma? what does that mean?
- why isn't the gradient linear? what implications does that have on everything else? why does it more accurately represent what is happening?
- "and because 3D Studio Max also added gamma when creating the relief map" why is 3D studio max relevant? what does it mean to add gamma? what's a relief map?
1. X and Y represent the X and Y physical dimension of the black and white gradient. The Z is the luma (brightness).
2. Luma means luminance. The brightness of the pixel from black to white.
3. It's not linear because we're not working in linear light. It has a gamma curve.
4. 3D studio max is what I used to create this type of visualization. Gamma is already present... This type of visualization is called a relief map.