Photoshopのブレンドモードがよく分からない人のための手引き その①

Photoshopのブレンドモードがよく分からない人のための手引き その①

こんにちは、@nakafujiです。

この記事を見に来たということは、Photoshopのブレンドモードに困っているに違いない!ということでこの記事がブレンドモードのおさらいになれば幸いです。

ブレンドモードって何ですか

フォトショップにはブレンドモード(描画モード)といって、下にあるレイヤーに対してどういった合成をするかを設定できる機能があります。イラストレーターにも透明パネルの中に同じような機能があるので、覚えておくと色々と使えると思います。ただブレンドモードは種類が多くて、一体どれがどういう効果を発揮するのか・・・ひとつひとつ見比べるのも面倒なので放置気味でした。今回は自分のスキルアップも含めて、全てのブレンドモードについておさらいしてみたいと思います!参考例として色々な写真を使って、それぞれのメニューがどういう効果を出すのか見比べてみたいと思います。ぜひ写真加工やイラスト作成に役立ててくださいー。

で、やり方はどうやるの?

基本的なやり方としては、加工したいレイヤー(写真とかイラストを配置)の上に新規レイヤーを置いて、その新規レイヤーに対してレイヤーパネルの中にブレンドモードのプルダウンメニューがあるので、そこから選んで適用させます。何もしなければ「通常」となっていると思うので、そこを色々変えてみてください。元のレイヤー(画像の場合はレイヤー1)そのものには全く影響を与えないので、やり直しはいくらでも効くのが便利なところですね。ちなみに元のデータを崩さずに変更が可能なことを非破壊編集といいます。

ブレンドモードの使い方

また、元になるレイヤーにある色を基本色、ブレンドモードを適用するレイヤーにある色を合成色と呼びます。

基本色と合成色の関係

では、ひととおりどんな合成が出来るのか見ていきましょう!なお「通常」に関しては、そのまま上にくるものが重なっていくだけなので説明は省略します。

①ディザ合成

「ディザ」というのは少ない色の数で、より多くの色調を表現する手法です。ブレンドメニューのディザ合成は、不透明度に応じて粗い感じになるので不透明度が100%の時は変化がありません。不透明度が低くなるほど密度が低くなり、高くなるほど密度が高くなります。

分かりやすいように、ぼかしを入れた円(周りが徐々に不透明度が低くなる)にディザ合成を適用させてみました。

ディザ合成をするとこうなる

ディザ合成を適用させると、不透明度が低いところが密度が低く粗くなり、不透明度が高いところは密度が高くなっているのが分かると思います。結構Photoshopに使いなれてる人でもディザ合成はあまり使わないという人もいるので、なかなか使いこなすのが難しい感じもしますね。

例えば濃いめの基本色(レイヤー1)に、薄めの色で塗りつぶした合成色(レイヤー2)を置いて、レイヤー2にディザ合成を適用したあとレイヤー2そのものの不透明度を低くすると、こんな風にラメ加工がされたような見た目になります。もうこれはアイデア次第という感じですね。

ディザ合成の参考例

②比較(暗)

比較(暗)と書かれている通り、2つの重なり合う色(基本色と合成色)を比べて、より暗い方の色が適用されます。合成色よりも基本色のほうが暗い場合は、基本色の色がそのまま残るので、色が置き換えられるのは合成色よりも基本色のほうが明るい場合ということです。

下の例をみると分かりやすいと思いますが、黄色に塗ったレイヤー1の上に、白黒のグラデーション(レイヤー2)を重ねた状態で、レイヤー2に対して比較(暗)を適用しています。黒は一番暗い色なので、下にいくにつれてレイヤー2の黒い色が合成されているのが分かると思います。逆に白は一番明るい色なので、下のレイヤー1に対して影響を与えず黄色の色がそのまま残ります(白より明るい色がないので、影響を与えないという意味です)。

比較(暗)の図説

写真に置き換えてみると、レイヤー2の色(合成色)よりも明るい色に対して影響を与えるので、写真の中で光が当たっている部分や、明度の明るい色に対して影響すると覚えておくと分かりやすいと思います。上に重ねる色にあまり派手な色を使ってしまうと、インパクトはありますが元の写真の雰囲気を壊してしまうので使い方が難しいと思います。全体的に暗い写真だと効果が出にくいので、慣れないうちは明るい色が多く使われた写真に対して使うと分かりやすいと思います。

下のサンプルでは、比較的明るい色が多く使われている桜の写真の上に、薄いベージュを塗りつぶしたレイヤーを重ねています。この場合重ねる色をあまり暗いベージュにしてしまうと、全体がベージュ色に変わってしまい写真そのものが何の写真なのか分かりづらくなってしまうので、彩度は低めで明度が高い色を意識すると良いと思います。合成結果を見ながら、何度でも変更が可能なので試してみてください。

比較(暗)のサンプル

③乗算

乗算は「掛ける(×)」という意味なので、色と色が重なる部分に影響します。色の3原色のCMYの特徴を説明すると分かりやすいので、下に図を出してみます。

乗算は色の3原色CMYと同じ仕組み

上の図のように重なっているところに色の変化が出てますよね。絵具を混ぜる感覚で考えると分かりやすいと思います。乗算は色んなチュートリアルにも出てくるので、比較的ブレンドモードの中でも使われやすい項目だと思います。白が基本ということは、白は何もない状態だと考えるので下のレイヤーに対して色の影響を与えないということになります。

サンプルとして、セントラルパークの写真(基本色)の上に、白い色の長方形の上に文字を置いたレイヤー(合成色)を重ねてみます。乗算を適用していない通常の場合はこのようになると思います。※分かりやすいように、上に重ねた長方形には影をつけてます。

乗算適用前

その後、上に重ねたレイヤーに対して乗算を適用するとこうなります。

乗算適用後

最初に説明したように、白い部分は基本色の写真に何も影響を与えていません。文字はピンクなので、背景の草の緑色と合わさって黒に近い色に変わっていると思います。このように白以外の重なる色に対して変化が出るのが乗算の特徴です。ただし黒は重ねても黒のままです(白の逆と考えてもらえれば良いかと)。

④焼き込みカラー

焼き込みカラーは、基本色の色相は保ったまま、重ねた色を暗くします。暗いところはより暗くなるのでコントラストが高くなります。

分かりやすくサンプルとして、2枚の同じ写真を重ねて上のレイヤーに焼き込みカラーを適用してみたいと思います。まず何も適用していない状態が以下の画像です。

焼き込みカラー適用前

そして重なった上のレイヤーに焼き込みカラーを適用するとこうなります。

焼き込みカラー適用後

同じ写真を重ねた状態で、暗い部分はより暗くなりコントラストが高くなっているのが分かると思います。

⑤焼き込み(リニア)

焼き込みカラーと焼き込みリニアは似ていますが、焼き込みカラーがコントラストを強くするのに対して、焼き込みリニアは重なった部分の明るさを落とすので、全体的に暗い印象になります。分かりやすように、焼き込みカラーのサンプルと同じ写真を使ってやってみたいと思います。

焼き込みリニア適用後

ひしゃくや竹の明るい部分も、焼き込みカラーに比べて暗くなっているのが分かると思います。コントラストを強めるのが焼き込みカラーで、より暗くなるのが焼き込み(リニア)と覚えると分かりやすいと思います。

⑥カラー比較(暗)

2で出てきた「比較(暗)」との違いは「各チャンネルの暗い方を適用するか、チャンネルの合計値の暗い方を適用するか」の違いです。2で説明するとややこしくなってくるので、ここでちゃんと違いを説明したいと思います。

ここに2つの色を例に出してみます。2つの色は重なった状態で、カラー比較・比較を適用すると色同士が比較されます。色にはRGBの3つの色の度合いによって複雑な色を表現しているのを頭に置いておいてください。

比較の考え方

比較(暗)の場合、下の図のような方法で色が決まります。

比較(暗)の判断

次にカラー比較(暗)の場合は下の図のような方法で色が決まります。

カラー比較(暗)の判断

比較(暗)はそれぞれの数値の低いほうが適用されているので、掛け合わせる色に応じて新しい色が出来ていますが、カラー比較(色)は合計値なので単純に基本色か合成色のどちらかの色が適用されます。なので見た目で言うとカラー比較(暗)のほうが、どの部分が色が変わったかがハッキリします。なので写真などに使う場合は、「比較」のほうが色がなじみやすいようです。

例えば、こんな花の写真があったとして。

カラー比較(暗)適用前

分かりやすくちょっと暗めのピンクを塗りつぶしたレイヤーを重ねて、カラー比較(暗)を適用するとこうなります。

カラー比較(暗)適用後

比較(暗)と比べて、部分的に重ねたレイヤーの色に変わっていて、それ以外は影響を受けていないことが分かると思います。比較(暗)は全体的に色が変わってしまいがちですが、カラー比較(暗)の場合は適用されるところとされないところがくっきり分かれます

次に行く前に予習

結構ずらずらと色んな項目がありますけど、よくよく見てみると・・・

単純に逆の効果をするだけの項目もちらほら

今までやってきたのは重ねることで暗くなる効果でしたが、今度は逆に重ねることで明るくなります。今までとは逆になると考えてしまえば、結構多い項目でも少し簡単に思えますよね。

⑦比較(明)

ちょっと今まで長々と説明してきましたが、単純に逆になるので写真のサンプルをメインに説明していきたいと思います。比較(明)は比較(暗)の逆なので、重なる2色の色のRGB値のそれぞれ明るい数値が選ばれて合成されます。

比較(明)適用後

重ねる色を極端に明るめにしてしまうと、ほとんどの色味が変わってしまって写真の内容が飛んでしまうので、ちょっと濃いめの色を適用させると分かりやすいです。使い方は色々でしょうけど、あくまでサンプルの1例として。RGB値のそれぞれ明るい数値が適用されていくので、全体的に紫がなじんだ感じになりましたね。

⑧スクリーン

スクリーンは乗算の逆で、重ねれば重ねるほど白に近付きます。ようは重ねれば重ねるほど明るくなりますよってことですね。

猫の写真の上に、新規レイヤーを重ねて黒丸に重なった文字を置いたとします。

スクリーン適用前

この重ねたCAT(黒丸含む)のレイヤーに対して、スクリーンを適用させると・・・

スクリーン適用後

乗算とは逆に、黒い色は背景に影響を与えません。それ以外の重なった色(この場合文字の色)が写真の色に影響を与えていることが分かると思います。乗算は重ねると暗くなって、スクリーンは重ねると明るくなるのがポイントです。

⑨覆い焼きカラー

焼き込みカラーは重なった部分がより暗くなり、明暗がはっきりしてコントラクトが高くなったと思います。覆い焼きカラーはその逆で、明るい部分がより明るくなることでコントラストが高くなります。

ここに、見るのも苦手なバッタの写真を震えながら配置します。

覆い焼きカラー適用前

その上に同じ写真を重ねて、その重ねたレイヤーに対して覆い焼きカラーを適用すると・・・

覆い焼きカラー適用後

明るい部分がより明るくなって、朝日に照らされたバッタのような写真になりました。このように明るいところが更に明るくなり、メリハリが付くのが覆い焼きカラーです。

⑩覆い焼き(リニア)加算

覆い焼き(リニア)加算は、覆い焼きカラーと似ています。これも焼き込み(リニア)の逆と考えて、明るい部分だけでなく暗い部分も明るくなるため全体の明度が上がります

上のバッタを同じように覆い焼き(リニア)を適用させてみると・・・

覆い焼き(リニア)適用後

覆い焼きカラーに比べて暗い部分も明るくなりましたね。比べてみると何が違うのか分かりやすいと思います。

⑪カラー比較(明)

カラー比較(暗)の逆なので、比べる2つの色(基本色と合成色)のRGB合計値のどちらか高いほうが適用されます。

サンプルとして、花の写真の上にオレンジで塗りつぶした新規レイヤーを重ねます。

カラー比較(明)適用前

その後、オレンジで塗りつぶしたレイヤーにカラー比較(明)を適用すると・・・

カラー比較(明)適用後

オレンジより色が濃い部分(写真の場合葉っぱの部分)がオレンジに色が入れ換わっているのが分かると思います。ちなみに他の全ての効果にも言えることですが、レイヤーの不透明度を変えるとまた結果が違ってきます。試しに上に重なったレイヤーを不透明度50%にしてみます。

不透明度を変えてみると結果が違ってきます

不透明度が低くなることによって下にある写真が透過して少し見えるようになり、色にも変化が出ています。このように不透明度を調整して結果に変化を出すこともできます。まずは実際に使ってみて試してみましょう!

ひとまず、お疲れ様でした。その①はここまでです。

次回は続きのオーバーレイからやりたいと思います。長くなりましたけど、なかなか機能を使いこなせなくて困っている人の役に立てたらと思います!結構面倒ですけど、実際に使ってみるとスキルアップにつながると思うのでいくつか試してみるのも良いと思います。それではー!

>>続きのその②はこちら

関連記事を読む

Photoshopのブレンドモードがよく分からない人のための手引き その①

シェア・feed登録もどーぞ!

オンラインでWebの勉強ができるTech Academy

独学で勉強すると細かい部分が分からなかったり、一体何を覚えたらいいのか迷ったりませんか? Tech Academyなら、オンラインスクールだから場所を選ばずWebやプログラミングの勉強ができます。【無料の動画説明会】を一度ご覧ください!

TechAcademy [テックアカデミー]