색(color)에 관한 글

블렌드 모드(Blend Mode)-Lighten-스크린-컬러 닷지-선형 닷지

moodyblues 2022. 4. 24. 15:31

1. Blend Mode(블렌드 모드, 혼합 모드)의 6개 그룹

블렌드 모드는 색을 혼합하는 방식이다.

Blend Mode(블렌드 모드)

  • Normal 그룹 : Opacity 값으로 레이어를 혼합한다.
  • Darken 그룹 : 두 레이어의 색상을 비교하여 RGB채널별로 어두운 값을 적용한다.(밝은 값은 버림)
  • Lithen 그룹 : 두 레이어를 합성하여 결괏값을 밝은 쪽으로 되게 한다.
  • Contrast 그룹 : 두 레이어를 대비시켜서 합성한다.
  • Inversion 그룹 : 두 레이어를 반전시켜서 합성한다.
  • Component 그룹 : 두 레이어의 색상 및 채도를 조정하여 합성한다.

1) Normal 그룹

Opacity 값만으로 조절한다. 그러므로 Opacity 값을 100으로 하면 아래 이미지는 전혀 보이지 않고 위의 이미지만 보인다. 즉 아무런 조정이 되지 않는다(= 아무런 합성이 되지 않는다)

아래 두 이미지 Layer 1, Layer 2를 예로 들어 다음과 같다.

Normal, Dessolve(디졸브)
Normal, Dessolve(디졸브)
상위 레이어(레이어2)와 하위 레이어(레이어 1)
상위 레이어(레이어2)와 하위 레이어(레이어 1)

(1) Normal

레이어 2를 상위 이미지로 두고 불투명도 100% 적용
레이어 2를 상위 이미지로 두고 불투명도 100% 적용
레이어 2를 상위 이미지로 두고 불투명도 50% 적용
레이어 2를 상위 이미지로 두고 불투명도 50% 적용
레이어 1을 상위 이미지로 두고 불투명도 50% 적용
레이어 1을 상위 이미지로 두고 불투명도 50% 적용

(2) 디졸브(Dessolve)

레이어 2를 상위 이미지로 두고 불투명도 100% 적용
레이어 2를 상위 이미지로 두고 불투명도 100% 적용
레이어 2를 상위 이미지로 두고 불투명도 50% 적용
레이어 2를 상위 이미지로 두고 불투명도 50% 적용
레이어 1을 상위 이미지로 두고 불투명도 50% 적용
레이어 1을 상위 이미지로 두고 불투명도 50% 적용

2) Darken 그룹

(1) Darken

두 레이어의 색상을 비교하여 RGB채널별로 밝은 값은 버리고 어두운 값이 적용된다.

Darken - 어둡게 하기
Darken - 어둡게 하기

색상 왼쪽 값(회색) 오른쪽 값(빨간색) Darken 혼합 값
R 130 255 두 색상 중 어두운 값 = 130
G 130 0 두 색상 중 어두운 값 = 0
B 130 0 두 색상 중 어두운 값 = 0
RGB RGB(130,130,130) RGB(255,0,0) = RGB(130,0,0)

 

RGB 각 채널별로 밝은 값은 버리고 어두운 값이 적용 전
RGB 각 채널별로 밝은 값은 버리고 어두운 값이 적용 전

위의 두 레이어의 색상을 비교하여 RGB 각 채널별로 밝은 값은 버리고 어두운 값이 적용된다.

위 녹색 RGB(255,0,0)과 회색 단계별 레이어를 합성했을 때 50% 밝기 영역을 기준으로 이보다 밝은 영역은 단색 그대로 보이고 더 어두운 영역은 어둡게 보이는 결과가 나타난다.

RGB 각 채널별로 밝은 값은 버리고 어두운 값이 적용 후 1
RGB 각 채널별로 밝은 값은 버리고 어두운 값이 적용 후 1
RGB 각 채널별로 밝은 값은 버리고 어두운 값이 적용 후 2
RGB 각 채널별로 밝은 값은 버리고 어두운 값이 적용 후 2

두 채널 중 어두운 값을 결괏값으로 표현된다.
픽셀이 혼합되는 것은 아니다.
레이어 순서는 상관없다.

2) Multiply : 곱하기

두 채널 값을 곱하여 표현하는 기법이다.
곱하는 숫자는 다음의 방법으로 산출된다.

Multiply : 곱하기
Multiply : 곱하기
Multiply : 곱하기 사례2

블렌딩 모드에서 사용하는 표준화 값 산출 방법 0~1
100% 검은색의 경우 0/255= 0
50% 검은색의 경우 127/255= 약 0.5 수준
100% 흰색의 경우 255/255= 1

검은색 영역의 값은 0이므로 0을 곱하면 항상 0이 된다.

흰색 영역의 값은 1이므로 1을 곱하면 다음과 같다.

블렌드 레이어 × 1 = 블렌드 레이어의 값

두 레이어 중 하나가 검은색 값을 가지면 결괏값은 항상 검은색이고,
두 레이어 중 하나가 흰색 값을 가지게 되면 결괏값은 블렌드 레이어 색상이 된다.

흰색 값은 표시되지 않는다.(= 블렌드 레이어의 색상만 표시된다)

그 중간 값은 소수점 숫자로 곱하여 어두운 정도가 산출된다.

흰색 배경의 소스파일을 혼합에 유용하다.

(3) Color Burn

하위 레이어(Base Layer)가 상위 레이어(Blend Layer) 위 색을 반사시켜 색을 혼합한다.

그러므로 가장 어둡거나 밝은 부분(100% black, white)에서는 변화가 없다. 
중간톤을 줄임으로써 대비가 매우 강하게 되다.

곱하기(멀티플라이) 보다 어둡다

Color Burn
Color Burn
Color Burn(색상 번) 사례 2

(4) Linear Burn

상위(블렌드) 레이어의 값을 기준으로 하위(베이스) 레이어의 명도를 감소시키는 기능을 한다.

 

Linear Burn
Linear Burn
선형 번 - Linear Burn
선형 번 - Linear Burn

컬러 번에 비해 채도는 낮다.

선형 번 - Linear Burn 적용 후
선형 번 - Linear Burn 적용 후

(5) Darker Color

Darken 모드와의 차이점은 Darken 모드의 경우 R, G, B 채널 각각의 어두운 값을 추출하고, Darken color 모드의 경우는 R, G, B를 합친 값(RGB채널)으로 어두운 값을 추출한다는 점이다.

2) Lighten 그룹

Lighten 그룹
Lighten 그룹

블렌드 모드 중 밝은 값을 표현하는 기능 = 결괏값이 밝게 표현된다.
Darken 그룹과 정반대이며, Lighten, Screen, Color Dodge, Linear Dodge, Lighter Color 등 5개의 모드가 있다.

Darken 그룹과 정반대
Darken 그룹과 정반대

(1) Lighten Mode

두 레이어의 색상을 비교하여 RGB채널별로 어두운 값은 버리고 밝은 값이 적용된다.

Lighten Mode
Lighten Mode
Lighten Mode(밝게 하기)
Lighten Mode(밝게 하기)

색상 왼쪽 값(회색) 오른쪽 값(빨간색) Lighten 혼합 값
R 130 255 두 색상 중 어두운 값 = 255
G 130 0 두 색상 중 어두운 값 = 130
B 130 0 두 색상 중 어두운 값 = 130
RGB RGB(130,130,130) RGB(255,0,0) = RGB(255,130,130)

위의 표에 나온 것처럼 두 레이어의 색상을 R, G, B 채널별로 분석하여 더 밝은 값을 표현한다.

즉, Darken 그룹의 Darken 모드와 정 반대이다.

Lighten Mode(밝게 하기) 적용 전
Lighten Mode(밝게 하기) 적용 전
Lighten Mode(밝게 하기) 적용 후

(2) Screen 모드

즉, Darken 그룹의 Multiply 모드와 정반대이다.

그러나 Multiply 모드에서는 검은색의 경우 0, 흰색의 경우 1을 곱하지만 스크린 모드에서는 그 역수를 곱한다.

즉 검은색의 경우 표준화 전체 값인 1 - 0 =1을 적용하고(즉 블랙은 표현되지 않는다),
흰색은 1-1= 0을 적용한다

그러므로 검은색의 경우 블렌드 레이어의 값이 표시되고 흰색의 경우 흰색으로 표시된다.

Screen 모드
Screen 모드
Screen 모드 결괏값

스크린 모드는 이미지를 밝게 하거나, 빛 또는 하이라이트를 추가하는데 유용한 모드이다.

(3) Color Dodge

두 레이어의 대비를 줄여서 밝은 부분은 더 밝게 표현한다.
검은색과 흰색 영역은 변화가 없다.(아래 그림)

Color Dodge
Color Dodge
Color Dodge(색상 닷지) 결과 값

컬러 번과 반대로 채도가 감소한다.

(4) Linear Dodge

스크린, 컬러 닷지와 유사하게 보이지만 좀 더 강한 결괏값을 나타낸다.
블랙에도 영향을 미친다.

Linear Dodge 모드
Linear Dodge 모드
Linear Dodge
Linear Dodge

(5) Lighter Color

두 레이어를 비교하여 더 밝은 색상값을 반영한다.

Lighter Color
Lighter Color
Lighter Color 결괏값

Lighten 모드가 R, G, B, 각각의 채널을 분석하여 더 밝은 값을 표현하는데 비해, Lighter Color 각각의 채널 값이 아닌 전체 RGB 값을 기준으로 더 밝은 색상을 표현한다.