これでもうPhotoshopの描画モードに迷わない! 「乗算」「焼き込みカラー」など、各描画モードがどのように機能するか解説
Post on:2022年11月10日
Photoshopなどのデザインソフトにある「乗算」「スクリーン」「焼き込みカラー」「覆い焼きカラー」など、各描画モードがどのように機能するかを解説します。
それぞれの違いがよく分からない、どんな効果があるのか分からないという人に、これを読めば描画モードでどれを使うか迷うことはなくなります。

Blending Modes
by Dan Hollick (@DanHollick)
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。
はじめに
見た目が思い通りになるまで、描画モードをいろいろ試していませんか?

描画モードの種類
この記事を読んでもあまり変わらないかもしれませんが、少なくとも「比較(明)」や「比較(暗)」を使用することはなくなるでしょう。
この記事はブックマークして、参考資料にすることをお勧めします。
描画(ブレンディング)モードとは
描画モードとは簡単に言うと、入力色に基づいて新しい色を作成する方法です。
入力色は背景色と前景色の2つに分割され、新しい色を作成するにはこの階層が重要です。背景色はベース(Base)、前景色はブレンド(Blend)と呼ばれます。

元の入力色は背景色と前景色に分割される
各描画(ブレンディング)モードについて解説
まずは、「比較(暗)」と「比較(明)」から始めてみましょう。

左: 「比較(暗)」、右: 「比較(明)」
「比較(暗)」と「比較(明)」の2つはもっとも単純な描画モードで、予測可能な暗さと明るさを作り出します。

この2つはもっとも単純な描画モード
「比較(暗)」は背景色と前景色のRGB値を比較し、もっとも暗い値を選択し、新しい色を作成します。

RGB値を比較し、もっとも暗い値を選択
「比較(明)」も同じことをしますが、もっとも明るい値を選択します。

RGB値を比較し、もっとも明るい値を選択
次に「乗算」と「スクリーン」を見てましょう。
どちらも似たような結果を作成しますが、「比較(暗)」と「比較(明)」をよりエレガントにしたバージョンで、コントラストが少し強いと覚えておくとよいでしょう。

左: 「乗算」、右: 「スクリーン」
つまり、「乗算」と「スクリーン」がある場合は、「比較(暗)」と「比較(明)」を使用する理由はないということです。

「乗算」と「スクリーン」は、「比較(暗)」と「比較(明)」をよりエレガントにしたバージョン
「乗算」はあなたが思っているとおり、各チャンネルを単純に乗算したものです。
値は0から1までの間で正規化されるため、作成される色は常にオリジナルより暗くなります。

各チャンネルを乗算するので、暗くなる
「スクリーン」は「乗算」に似ていますが、入力と結果の両方を反転させるので、結果は常にオリジナルより明るくなります。
「乗算」と同様に0から1までの間で正規化されます。

各チャンネルを乗算して反転するので、明るくなる
暗くする・明るくするの最後のペアは「焼き込みカラー」と「覆い焼きカラー」です。

左:「焼き込みカラー」、右:「覆い焼きカラー」
この2つはステップが顕著なので、これまでのモードと比べるとかなり荒々しい結果になることがあります。

この2つは荒々しい結果になるモード
「焼き込みカラー」は背景を反転させ、それを前景で割って、その結果を反転させて色を作成します。

背景を反転させ、前景で割って、その結果を反転
「覆い焼きカラー」も同様の仕組みで、前景を反転させて背景で割って、その結果を反転させて色を作成します。

前景を反転させ、背景で割って、その結果を反転
「オーバーレイ」「ソフトライト」「ハードライト」は明るい部分をより明るく、暗い部分をより暗くするため、コントラストの描画モードと呼ばれています。

左:「オーバーレイ」、中:「ソフトライト」、右:「ハードライト」
これら3つは特に、画像に対してもっとも汎用性の高い描画モードです。

これら3つは、画像に対してもっとも汎用性が高い
「オーバーレイ」は、興味深いモードです。
背景の値が明るい場合(127.5以上)は、半分の強度でスクリーンを適用し前景を明るくします。背景の値が暗い場合は半分の強度で乗算を適用し前景が暗くなります。

背景が明るい場合はスクリーンを適用、乗算を適用
「ハードライト」は前景を使用する以外は「オーバーレイ」と全く同じです。
前景の値が明るい場合(127.5以上)は半分の強度でスクリーンを適用し、前景の値が暗い場合は半分の強度で乗算を適用します。

前景が明るい場合はスクリーンを適用、乗算を適用
「ソフトライト」は標準の描画モードの中でもっとも複雑です。
「オーバーレイ」と似たような結果が得られますが、より繊細です。反転した前景に二乗した背景を乗算し、前景と背景の積の2倍に加算します。

「オーバーレイ」に似てるけど、より繊細
「差の絶対値」「除外」は、入力とほぼ反対の色を作成するため、反転モードとして知られています。

左:「差の絶対値」、右:「除外」

この2つは、反転モードと呼ばれている
「差の絶対値」はその名の通り、入力色の中間色を見つけます。
前景の色から背景の色を引きます。負の値はすべて正の値になります。

前景の色から背景の色を引いた中間の色
「除外」も似たような結果が得られますが、はるかに複雑な方法です。
各チャンネルの合計から各チャンネルの積を2倍して引き算します。そして値は0から1までの間で正規化されます。

「差の絶対値」に似ているけど、はるかに複雑
「色相」「彩度」「カラー」「輝度」は他のモードとは異なり、RGB値ではなく、色相・彩度・明度のコンポーネントを操作します。
これらのモードは2つの入力されたHSL値を組み合わせて、新しい色を作成します。

左上から順に「色相」「彩度」「カラー」「輝度」
「色相」「彩度」「カラー」「輝度」は、コンポーネントモードと呼ばれます。

コンポーネントモードと呼ばれる
「色相」は前景から色相(H)値を、背景から彩度(S)と輝度(L)の値を取得して新しい色を作成します。

前景から色相(H)値、背景から彩度(S)と輝度(L)の値
「彩度」は前景から彩度(S)値を、背景から色相(H)と輝度(L)の値を取得して新しい色を作成します。

前景から彩度(S)値、背景から色相(H)と輝度(L)の値
「カラー」は前景から彩度(S)と色相(H)の値を、背景から輝度(L)の値を取得して新しい色を作成します。

前景から彩度(S)と色相(H)の値、背景から輝度(L)の値
「輝度」は前景から輝度(L))値を、背景から色相(H)と彩度(S)の値を取得して新しい色を作成します。

前景から輝度(L))値、背景から色相(H)と彩度(S)の値
sponsors