BlendMode

출처 : Color blends are back in fashion, and these 30 will give you a colorgasm

Color Blending이란?

말 그대로 색상 혼합을 의미한다.

 

Slack 로고

이를테면 위의 Slack 로고에는 몇 가지 색상이 있을까?

정답은 총 8가지이다. 기본 색상 4개가 있고, 겹치는 곳에 새로운 색상이 만들어진다. 이처럼 겹치는 색상을 교차하여 Color를 Blend 시키는 것을 의미한다.

 

그럼 BlendMode는 뭘까?

 

BlendMode 란?

블렌드 모드 (또는 믹싱 모드)는 디지털 이미지 편집에서 두 개의 서로 다른 레이어가 혼합되는 방식을 결정한다. 대부분의 응용 프로그램에서 기본 블렌드 모드는 낮은 레이어를 높은 레이어로 가려서 단순히 가장 위에 있는 레이어를 보여준다. 그러나 각 픽셀은 수학적으로 표현되기 때문에, 두 개의 레이어를 다양한 방법으로 표현할 수 있다. 응용 프로그램(이를테면 포토샵)에서 가장 위에 보이는 레이어는 꼭 "레이어" 라고 부를 필요는 없고 툴마다 다르게 적용될 수 있다.
어도비 포토샵과 김프같은 그래픽 편집 프로그램은 유저에게 다양한 블렌드 모드를 제공한다. 예를 들면 각각의 레이어에 서로 다른 투명도를 적용할 수 있다.
이 페이지에 나오는 수식은 0.0을 검정, 1.0을 흰색이라고 표시한다.
출처 : 블렌드 모드

말 그대로 레이어가 혼합되는 방식을 지정하는 것을 BlendMode라고 한다.

여기에서 레이어는 포토샵에서 사용되는 용어이므로, 툴마다 다르게 부르기도 한다.

 

블렌드모드는 방식이 매우 다양하지만 유명한 몇 가지 Mode에 대해 알아보자.

 

Image by Vincent Bidaux, https://twitter.com/vinchubang

 

일반(노말) 블렌드 모드

Normal Blend

이것은 최상위 레이어만을 사용하는 표준 블렌드 모드로 하위 레이어와 색상을 섞지 않는다.

색상을 섞지않고 그대로 겹쳐놓는 것이다.

 

하위 레이어에 존재하는 색 채널의 값이 a, 상위 계층의 색상 값이 b에 해당한다. 하위 레이어를 합성하기 위해 가장 전형적으로 사용되는 방법은 아래의 수식이다.

f(a, b) = b

 

디졸브

Dissolve Blend

디졸브 모드는 두개의 레이어에서 랜덤한 픽셀을 취한다. 투명도가 높으면 상위 레이어, 투명도가 낮으면 하위 레이어에서 대부분의 픽셀을 취한다. anti-aliasing 없이 사용되면 이미지가 거칠고 울퉁불퉁해 보일 수 있다.

 

멀티플라이(곱하기) 와 스크린

멀티플라이와 스크린 블렌드 모드는 각각 이미지를 어둡고 밝게 하기 위한 기본적인 블렌드 모드이다. 두개의 조합에 따라 오버레이, 소프트 라이트, 비비드 라이트, 리니어 라이트, 핀 라이트 등 여러 가지 조합이 있다.

 

멀티플라이(곱하기)

Multiply Blend

멀티플라이 블렌드 모드는 하위 레이어의 픽셀을 상위레이어의 각 픽셀의 숫자에 곱해서 상대적으로 어두운 사진을 만들어낸다.

f(a, b) = ab

에서, a는 하위 레이어의 값, b는 상위 레이어의 값이다

이 모드는 두 레이어를 교환하더라도 결과값이 변하지 않는 대칭 모드이다.

 

스크린

Screen Mode

스크린 블렌드 모드에서는 두 레이어의 픽셀값이 반전되어 곱해진 후 다시 반전된다. 이는 멀티플라이 이펙트와 반대의 결과를 보이며 더 밝은 사진이 된다.

f(a,b)=1-(1-a)(1-b)

에서 a는 하위 레이어의 값, b는 상위 레이어의 값이다.

이 모드는 두 레이어를 교환하더라도 결과값이 변하지 않는 대칭 모드이다. 한 레이어가 회색과 같은 무채색을 포함하고 있을 때 스크린 블렌드의 결과는 노말 모드 블렌드에서 상위 레이어에 하얀색 사진을 올려두고 투명도를 조절한 것과 같은 결과를 보인다.

 

Overlay

Overlay Mode

오버레이는 멀티플라이와 스크린 블렌드 모드를 혼합한 모드이다. 하위 레이어가 밝을 때에 상위 레이어는 더 밝아지고, 하위 레이어가 어두울 때에 상위 레이어는 더 어두워진다. 같은 사진의 오버레이는 S-curve와 같이 보여진다.

a는 하위 레이어의 값, b는 상위 레이어의 값이다.

하위 레이어의 값인 a에 따라서 검은색 (a=0), 상위 레이어 (a=0.5), 흰색 (a=1) 사이를 선형 보간한다.

 

참고자료

https://seokblog.tistory.com/89

https://ko.wikipedia.org/wiki/블렌드_모드

https://www.bwillcreative.com/blending-modes-in-photoshop-explained/