{{위키데이터 속성 추적}}
'''블렌드 모드''' (또는 믹싱 모드<ref>{{웹 인용 |url=http://www.northlite.net/ps/blend.htm |제목=보관된 사본 |확인날짜=2014년 8월 27일 |보존url=https://web.archive.org/web/20140818041229/http://www.northlite.net/ps/blend.htm |보존날짜=2014년 8월 18일 |url-status=dead }}</ref>)는 디지털 [[:en:Image_editing|이미지 편집]]에서 두 개의 서로 다른 [[Layers (digital image editing)|레이어]]가 혼합되는 방식을 결정한다. 대부분의 응용 프로그램에서 기본 블렌드 모드는 낮은 레이어를 높은 레이어로 가려서 단순히 가장 위에 있는 레이어를 보여준다. 그러나 각 픽셀은 수학적으로 표현되기 때문에, 두 개의 레이어를 다양한 방법으로 표현할 수 있다. 응용 프로그램(이를테면 [[어도비 포토샵|포토샵]])에서 가장 위에 보이는 레이어는 꼭 "레이어" 라고 부를 필요는 없고 툴마다 다르게 적용될 수 있다.

[[어도비 포토샵]]과 [[김프]]같은 [[그래픽 편집 프로그램]]은 유저에게 다양한 블렌드 모드를 제공한다. 예를 들면 각각의 레이어에 서로 다른 투명도를 적용할 수 있다.

이 페이지에 나오는 수식은 0.0을 검정, 1.0을 흰색이라고 표시한다.

== 일반(노말) 블렌드 모드 ==
이것은 최상위 레이어만을 사용하는 표준 블렌드 모드로써 하위 레이어와 색상을 섞지 않는다.
: <math>f(a, b) = b</math>
하위 레이어에 존재하는 [[:en:Channel_(digital_image)|색 채널]]의 값이 ''a,'' 상위 계층의 색상 값이 ''b''에 해당한다. 하위 레이어를 합성하기 위해 가장 전형적으로 사용되는 방법은 간단한 [[알파 채널|알파 합성]](실제 공식은 <math>f(a, b) = alpha(b, a)</math>)이지만, Porter-Duff 합성도 가능하다.<ref name="w3c-blending-compositing">{{웹 인용|title=W3C: Compositing and Blending 1.0|url=http://www.w3.org/TR/compositing/|accessdate=9 November 2012}}</ref> 하위 레이어들로부터 합성된 결과물이 최상위 레이어에 알파 채널로 정의된다.

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

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

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

<math>f(a,b) = ab</math>에서, ''a''는 하위 레이어의 값, ''b''는 상위 레이어의 값이다

이 모드는 두 레이어를 교환하더라도 결과값이 변하지 않는 ''대칭'' 모드이다. 만약 두 레이어가 동일한 사진일 경우에는, 블렌드 모드가 이차 곡선 혹은 γ=2 인 [[감마 보정]]을 따른다. ( 이미지 편집을 할 때에는 곡선 모양을 부드럽게 조절할 수 있는 커브 편집기를 이용하는 편이 더 수월하다. 혹은 레벨 편집기를 사용할 수도 있다 — 가운데 숫자는 일반적으로 1/γ, 이므로, 0.5를 입력하면 된다. )

만약 한 레이어가 회색(0.8,0.8,0.8)과 같은 세가지 색상값이 동일한 무채색을 포함하고 있을 경우, 멀티플라이 블렌드 모드는 단순하게 직선 커브를 따른다. 이것은 또한 검은 바닥 레이어를 바닥에 두고 노말 모드 블렌딩을 사용하여 투명도를 조절했을때와 같은 결과를 보인다.

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

<math>f(a,b) = 1 - (1 - a)(1 - b)</math>에서 ''a''는 하위 레이어의 값, ''b''는 상위 레이어의 값이다.

이 모드는 두 레이어를 교환하더라도 결과값이 변하지 않는 대칭 모드이다. 한 레이어가 회색과 같은 무채색을 포함하고 있을 때 스크린 블렌드의 결과는 노말 모드 블렌드에서 상위 레이어에 하얀색 사진을 올려두고 투명도를 조절한 것과 같은 결과를 보인다.<gallery>
파일:Blend modes 1.-top-layer.jpg|Example top layer
파일:Blend modes 2.-bottom-layer.jpg|Example bottom layer
파일:Blend modes 4.-multiply.jpg|Multiply blend mode applied to the example pictures
파일:Blend modes 5.-screen.jpg|Screen blend mode applied to the example pictures
</gallery>

=== Overlay ===
<span id="Overlay" contenteditable="false"></span>오버레이는 멀티플라이와 스크린 블렌드 모드를 혼합한 모드이다.<ref name="pegtop-overlay">{{웹 인용|title=Pegtop: overlay blend mode|url=http://www.pegtop.net/delphi/articles/blendmodes/overlay.htm|accessdate=3 November 2012}}</ref> 하위 레이어가 밝을 때에 상위 레이어는 더 밝아지고, 하위 레이어가 어두울 때에 상위 레이어는 더 어두워진다. 같은 사진의 오버레이는 S-curve와 같이 보여진다.

<math> f(a,b) =
    \begin{cases}
      2 a b,           &\mbox{if } a < 0.5 \\
      1 - 2 ( 1 - a ) ( 1 - b ), &\mbox{otherwise}
    \end{cases}</math>

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

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

=== 하드 라이트 ===
멀티플라이와 스크린 블렌드 모드를 조합한 형태이다. 오버레이와 같지만 상위 레이어와 하위 레이어가 바뀌었다.

=== 소프트 라이트 ===
하드라이트의 부드러운 버전이다. 완전히 검은색 혹은 완전히 흰색에 적용하면 결과가 달라진다.

소프트 라이트 블렌드를 적용하는 데에는 여러 가지 방법이 있다.<ref>{{웹 인용 |url=http://gimp.1065349.n5.nabble.com/Image-processing-algorithms-resources-td34204.html |제목=보관된 사본 |확인날짜=2016-05-20 |archive-date=2016-06-17 |archive-url=https://web.archive.org/web/20160617162930/http://gimp.1065349.n5.nabble.com/Image-processing-algorithms-resources-td34204.html |url-status=dead }}</ref> 최상위 레이어가 완전한 검은색일 때 결과물은 항상 같다; 완전한 회색일 때도 같다. Photoshop과 illusions.hu는 최상위 레이어가 흰색일 때에도 같은 결과를 보인다(이러한 차이점은 세가지 결과를 어떻게 보간하는지에 달려있다).

== 같이 보기 ==
* [[알파 채널|Alpha 합성]]
* [[래스터 그래픽스|래스터 그래픽]]
* [[영상 처리|이미지 처리]]

== 각주 ==
{{각주}}
* Paul R. Dunn, [http://dunnbypaul.net/blends/ “Insight into Photoshop 7.0 Blending Modes”]
* [http://mouaif.wordpress.com/2009/01/05/photoshop-math-with-glsl-shaders/ “Photoshop math with GLSL shaders”]
* [http://stackoverflow.com/q/5919663/610692 “Photoshop Blend Mode Math”], includes C code.
* Ron Bigelow, [https://web.archive.org/web/20080319141653/http://ronbigelow.com/articles/blend1/blend1.htm “Using Blend Modes in Photoshop – Part I”], a tutorial
* [http://docs.gimp.org/en/gimp-tool-curves.html The gimp manual]
* [https://web.archive.org/web/20110707085010/http://livedocs.adobe.com/flash/9.0/UsingFlash/help.html?content=WSd60f23110762d6b883b18f10cb1fe1af6-7d5a.html Adobe's website on blend modes]
* [http://www.adobe.com/designcenter/indesign/articles/idsn3kbtrans/idsn3kbtrans.pdf Adobe ''Master transparency and blends'' pdf file]
* Gimp and Photoshop Blending Modes visually explained and compared, parts [http://emptyeasel.com/2008/10/31/explaining-blending-modes-in-photoshop-and-gimp-multiply-divide-overlay-screen/ one], [http://emptyeasel.com/2008/11/07/how-blending-modes-work-part-two-dodge-burn-soft-light-and-hard-light/ two], [http://emptyeasel.com/2008/11/14/layer-modes-part-three-difference-addition-subtraction-darken-lighten/ three], and [http://emptyeasel.com/2008/11/21/gimp-and-photoshop-layer-modes-part-four-hue-saturation-color-and-value/ four]
* [http://homepages.inf.ed.ac.uk/rbf/HIPR2/blenddemo.htm JAVA demo on the image blending operator], an interactive JAVA-based image blending demo
* [http://www.w3.org/TR/SVGCompositing/ All the math behind photoshop compositing] (including math for using alpha in complex compositions like softlight)
* [https://web.archive.org/web/20120721041549/http://jswidget.com/blog/2011/03/11/image-blending-algorithmpart-ii/ Image Blending Algorithm]

[[분류:영상 처리]]