描画モード

デザイン豆知識①:Illustrator&Photoshopの描画モードって何?

上記ソフトの使用者なら必ずぶち当たるこの壁!

使ってみてはいるけど、このモードを選択するとどうなるか、イメージはわいていても根本はわからないから何となく…
という方は非常に多いのではないでしょうか?

私も当初はそうでした…

結局これって何なの?

どのモードがどんな処理をしているかわかっていると、困ったときに非常に便利に使えます。

  • 画像の上の文字が、画像の色の配置の関係で一部だけ見にくい…
  • 画像に半分テキストを載せたいけど、自然と視認性を高めたい!

さりげなくこんな機会って多いと思います。

そんなときに是非ここの内容を思い出して使ってみてください!
とても綺麗に配置することができるようになります。

描画モード

まず、基本は以下のような構成を大前提として考えています。

レイヤーイメージ

以下説明の中では上位レイヤー、下位レイヤーに該当するのは以下の通りです。

  • 上位レイヤー=HN.Desgin
  • 下位レイヤー=右半分の色付きオブジェクト

また、今回は使用頻度の高い項目に絞ってご説明いたします。

因果関係

そもそもそれぞれの描画モードには対称となっているモードが存在しています。
まずはそこから理解していきましょう。

比較(暗)↔︎ 比較(明)

乗算(暗)↔︎ スクリーン(明)

焼き込みカラー(暗)↔︎ 覆い焼きカラー(明)

まずは上記3点が、相対する関係性であることを理解しておいてください。

また、今回の内容はRGBよりもCMYK説明した方がわかりやすいので、後者にて説明をします。
RGBは数値が大きいほど明るく(薄く)、CMYKは数値が大きいほど暗く(濃く)なるので、数値の見方としてはRGBの場合、逆の原理だと認識していただいて結構です。

比較

比較(暗)

「下位レイヤー」と「上位レイヤー」のどちらかの、暗い方を最終カラーとして表示します。

各「C=シアン」「M=マゼンタ」「Y=イエロー」「K=ブラック」の各数値の大きい方が適用されます。

比較暗イメージ
右上の数値が重なっている箇所のCMYK数値

この場合は上位レイヤー色(文字色)の方が各数値で大きいため、色に変化はありません。

逆に「比較(明)」で見てみましょう。

比較(明)

「下位レイヤー」と「上位レイヤー」のどちらかの、明るい方を最終カラーとして表示します。

各「C=シアン」「M=マゼンタ」「Y=イエロー」「K=ブラック」の各数値の小さい方が適用されます。

右上の数値が重なっている箇所のCMYK数値

つまり、上記画像をご覧の通り、「M=マゼンタ」「Y=イエロー」が下位レイヤーのCMYKの方が数値が小さいため、そちらにひっぱられます。

それにより、下位レイヤーの「M」「Y」の数値が優先された結果、「C」「K」が同じ数値なので下位レイヤーと同色になってしまったのです。

(「比較(明)」の例)
上位レイヤー(C:30 M:30 Y:30 K:30) 下位レイヤー(C:20 M:40 Y: 10 K:60)の場合、
打ち出されるカラーは
C:30 > 20
M:30 < 40
Y:30 > 10
K:30 < 60
(C:20 M:30 Y:10 K:30)の色となります。

掛け合わせ

乗算

「下位レイヤー」の色数値に、「上位レイヤー」の色数値を掛け合わせます。

乗算イメージ
右上の数値が重なっている箇所のCMYK数値

掛け合わせるので、重なっている箇所の色は常に暗くなります。

但し、ブラックを掛け合わせると「K=100%」なので常にブラックとなります。
また、ホワイトの場合は全ての数値が0%となるため、背景そのままの色になりホワイトの上位レイヤーは目には見えません。

スクリーン

「下位レイヤー」と「上位レイヤー」の色数値を反転して掛け合わせます。

スクリーンイメージ
右上の数値が重なっている箇所のCMYK数値

反転させた上で掛け合わせるため、常に色は明るくなります。

「下位レイヤー」C:25 ×「上位レイヤーカラー」C:40 = 25×40% = 10
「下位レイヤー」M:25 ×「上位レイヤーカラー」M:30 = 25×30% = 7.5
「下位レイヤー」Y:25 ×「上位レイヤーカラー」Y:20 = 25×20% = 5
「下位レイヤー」K:25 ×「上位レイヤーカラー」K:10 = 25×10% = 2.5
※出てきた最終値の繰り上げ繰り下げの関係性はわかりませんが、色がどう変化するかの理解があれば問題ないレベルかと思います!

反映

焼き込みカラー

「下位レイヤー」カラーを暗くして「上位レイヤー」カラーに反映させます。

焼き込みカラーイメージ
右上の数値が重なっている箇所のCMYK数値

一応計算式はあるようなのですが、非常に複雑なのでここでは割愛します。
そもそも「焼き込み」とは何だろう?と考えてみると理解しやすいと思います。

プリントで、露出オーバーの部分に対して、よぶんな露出を与えることで、その部分を 適正露出 にすること。この逆が「覆い焼き」で、露出アンダーの部分を黒い紙などで覆って露出を少なくし、適正露出にする。最近では、 フォトレタッチ の加工のひとつとして似たような効果の得られるツールとしても登場する言葉だ。

引用:コトバンク(https://kotobank.jp/word/%E7%84%BC%E3%81%8D%E8%BE%BC%E3%81%BF-758958)

上記で名前が出ていますが、ここで対象となるのが「覆い焼きカラー」です。

覆い焼きカラー

「下位レイヤー」カラーを明るくして「上位レイヤー」カラーに反映させます。

覆い焼きカラーイメージ
右上の数値が重なっている箇所のCMYK数値

こちらも計算式、あります。が、あまりに複雑です…
なので、こちらも「覆い焼き」の意味を理解していただくだけでも問題ないかと思います。

写真で、陰画露出不足の部分に対し、などで覆って露光時間を短くすることで適正露出にすること。パソコンフォトレタッチソフトでデジタル画像の一部を明るくする処理のことも指す。

引用:コトバンク(https://kotobank.jp/word/%E8%A6%86%E3%81%84%E7%84%BC%E3%81%8D-449545)

下位レイヤーに応じた重ね合わせ

オーバーレイ

下位レイヤーカラーに応じて、乗算、或いはスクリーンを適用します。

下位レイヤーカラーのハイライトと影を保持しながら、上位レイヤーカラーを既存の下位レイヤーに重ね合わせます。
但し、これまでの描画モードと違い、ベースカラーは置き換えられません
上位レイヤーカラーと混ぜ合わされますが、下位レイヤーのカラーの明るさもしっかり反映されます。

オーバーレイイメージ
右上の数値が重なっている箇所のCMYK数値

ソフトライト

上位レイヤーカラーに応じて、カラーの明さを変化させます。※オーバーレイよりも薄い反映値となります

上位レイヤーカラーの明るい光源が50%グレーより明るい場合、下位レイヤーは明るくなります。
上位レイヤーカラーが50%グレーより暗い場合、下位レイヤーは暗くなります。
「K:100」や「ホワイト」を重ねるとその部分の明暗はわかりやすくはなりますが、そのままの黒白にはなりません。

ソフトライトイメージ
右上の数値が重なっている箇所のCMYK数値

ハードライト

上位レイヤーカラーに応じて、乗算かスクリーンを適用します。
※強いスポットライトを当て、色飛びしたようなイメージになります

上位レイヤーカラーの明るい光源が50%グレーより明るい場合、下位レイヤーカラーはスクリーンを適用したように明るくなります。
このモードは、アートワークにハイライトを追加するときに便利です。
上位レイヤーカラーが50%グレーより暗い場合、下位レイヤーカラーは乗算を適用したように暗くなります。
このモードは、下位レイヤーカラーに影を追加するときに便利です。
「K:100」や「ホワイト」を重ねるとその部分のそのままの色になります。

ハードライトイメージ
右上の数値が重なっている箇所のCMYK数値

まとめ

如何でしたでしょうか?

私も何となく使用していた描画モードでしたが、こういった仕組みや原理を理解したところ、様々なところで使えるようになりました!

これらを使いこなすことで、少しスタイリッシュな表現やかっこいい加工ができるようになります。

設定を変えるのは簡単なので、色々と試してみて体でも覚えてみると良いかもしれません♪

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です