Hello everyone!
Today, I'm going to talk about blend modes. If you use painting software like Photoshop, you're probably familiar with blend modes already.
But we often end up using them intuitively without really understanding how they work. (That was certainly the case for me!)
So I decided to look into what calculations are actually happening behind the scenes. I won't cover everything, but I'll highlight the features you're likely to use most often!
Common Types of Blend Modes
We can broadly categorize blend modes into 3 types:
1. Lightening Blend Modes → Add, Screen, Color Dodge, Lighten
2. Darkening Blend Modes → Multiply, Color Burn, Linear Burn, Darken
3. Contrast Blend Modes → Overlay, Soft Light, Hard Light, Linear Light, Vivid Light
Thinking about them in these categories makes them easier to use.
What is a "Blend Mode"?
When you place an upper layer (orange) on top of a lower layer (blue), you get a result color (pink). The blend mode is what determines "how these colors will be combined."
From here on, I'll refer to the lower layer color as the "Base Color", the upper layer as the "Blend Color", and the resulting color as the "Result Color".
Explanation of Blend Modes
I'll now explain each blend mode in detail. For each mode, we'll examine four aspects (Layer Structure, Brightness Changes, Calculation Formula, and Scene Application) to help you better understand how blend modes work.
─────────────────────────────────────────────────
1. Lightening Blend Modes
"Add" The RGB values of the blend color and base color are added together for each channel. The maximum value is 255. This creates an effect where the entire image becomes brighter.
"Screen" This is slightly weaker than Add. It feels like it follows a linear curve. It's good to think of it as creating a softer brightness than Add. (The formula is a bit complex because it converts 255 to normalized values (0~1).)
"Color Dodge" The bright areas are the same as Add, but the dark areas of the base color remain dark. Since the dark parts remain, it creates a stronger contrast impression than Add.
"Lighten" Calculations are done for each RGB channel, using the larger value. Rather than adding, it's more like replacing values.
"Lighten Color" Unlike Lighten, this compares the sum of RGB values and uses the larger value. This one can be difficult to use effectively.
─────────────────────────────────────────────────
2. Darkening Blend Modes
"Multiply" This is easiest to understand as the opposite of Screen. The entire image becomes darker.
"Color Burn" Think of this as the opposite of Color Dodge. Bright areas remain bright.
"Linear Burn" Consider this the opposite of Add. It feels like it has slightly stronger contrast than Multiply.
"Darken" Think of this as the opposite of Lighten. It uses the smaller value.
"Darken Color" This is the opposite of Lighten Color. It uses the smaller value.
─────────────────────────────────────────────────
3. Contrast Blend Modes
"Overlay" Calculations are based on the Base color. Comparing the base color and blend color, values above 128 are blended using Screen, while values below use Multiply. So at the middle value of 128, there's no effect. The contrast appears stronger. Effects are applied based on the lower layer (base color). This is effective when you want to preserve black and white colors.
"Soft Light" This feels like a slightly weaker version of Overlay. It has a slightly weaker contrast than Overlay.
"Hard Light" This is similar to Overlay, but the key difference is that calculations are based on the Blend color. It applies Multiply or Screen based on the upper layer (blend color). Unlike Overlay, effects are determined based on the upper layer, so the blend color has more influence.
"Linear Light" Like Hard Light, calculations are based on the Blend color. It applies Add for higher values and Linear Burn for lower values. This creates stronger contrast than Hard Light.
"Vivid Light" Like Linear Light, this compares the base color and blend color. It applies Color Dodge for higher values and Color Burn for lower values.
Summary
Being able to predict the results of these blend modes helps you achieve your desired art style, so it's good to remember these as knowledge. For example, if you think "I want to make this more vibrant," you might use Color Dodge, or if you want to emphasize contrast, you might use Overlay.
A Little Chat
In Shoost, we also have blend modes, but we haven't been able to cover this many blend modes yet. When trying to implement processes beyond Add and Multiply, it can create high processing loads or require complex processing, and although I've tried several times, it just hasn't worked out well...
But I'm still in the middle of trying various approaches to implement them. I'll work hard to develop a system where the blend modes I've explained today can be used!