ブレンドモード 実践編-2 〜 Vectornator スタイルタブその⑥。

オーバレイ〜自然な「色味」を付ける。

なんともムズカシイ計算式が出てきました💧
オーバレイ。これはブレンドモードの中でも「コントラストグループ」に分類されているものです。

結果色の算出方法は、基本色のRGBの各値によって条件分岐されます。

RGB値の範囲は0〜255ですが、基本色がその中間値の128未満の場合、結果色は「乗算」に2を掛けたものとなり、128以上の場合は「スクリーン」に２を掛けたものから255を引いたものが結果色と成増。

これの条件分岐により明るい部分はより明るく、暗い部分はより暗くなるという効果が得られます。「コントラストを上げる」ということですね。

■ コントラストを上げる。

線型グラデーションで塗り潰した長方形。
この上に全く同じものを「オーバレイ」 で重ねてみます。

結果はこのように。長方形１枚だけのときよりもコントラストが上がって鮮やかなグラデーションとなりました。

■ 自然な「色味」を付ける。

「オーバレイ」は画像に自然な「色味」を付けるのにも適しています。
これは不透明度50%のピンクをブレンドモード「通常」で重ねたものですが、上から色をかぶせるとどうしてもその後ろにあるものがぼやけてしまいますね。コントラストが落ちてしまうからです。

今度は右半分にピンクを「オーバレイ」でかぶせました（不透明度は100%にしてあります）。
通常であれば後ろのものがぼやけてしまうのですが、「オーバレイ」を使うとコントラストを落とすことなく自然な「色味」を付けることができます。これは非常に便利というか素敵な効果ですね。

■ 白と黒は抜けます。

計算してみるとわかるのですが、「オーバレイ」は基本色の白（ R:255 G:255 B:255 ）や黒（ R:0 G:0 B:0 ）には影響を与えません。

「ふ」の背景に白の背景（長方形）を置いて、1番上からオーバレイで着色してみます。

白と黒の部分以外にだけ、色味を付けることができました。このように「マスキングを掛けての塗り潰し」効果としても使えます。

ちなみに、「ふ」の黒い部分は完全な黒（ R:0 G:0 B:0 ）から少しだけRGB値を上げています。そのせいでほのかに色味がついていますね。

差の絶対値〜素早くカラーリング。

「差の絶対値」はブレンドモードの中の「比較グループ」に属するものです。
合成色と基本色の差を取って、それだけではマイナスの値になってしまうこともあるので、その絶対値を結果色に採用しています。

これまでのモードの中でも1番インパクトがありますね。

これはテキストの上に、２つの平行四辺形をずらして重ねたものです。
「差の絶対値」を使えば、テキストのアウトライン化やパスの分割などといった面倒な作業なしで効果的なカラーリングが可能です。

すこしイタいので平行四辺形の不透明度を30%まで下げました。

■ 間違いさがし、反則。

「差の絶対値」では同じ色を重ねるとRGB値が全て0になるので、結果色は「黒」になってしまいます。
上の画像のような「間違い探し」があった場合。

合成色側の不透明度を少し落として重ねてみました。
違っている部分が浮き彫りに。これは反則ですね。

■ 白と黒は特別。

ほかにも算出方法の特性上、白（ R:255 G:255 B:255 ）や黒（ R:0 G:0 B:0 ）を重ね合わせたときには独特の効果があらわれます。

合成色/基本色のいづれかが「白」だと、もう一方の色が反転したものが結果色と成増。

合成色/基本色のいづれかが「黒」だと、もう一方の色がそのまま結果色と成増。

除外〜マイルドな反転。

「除外」。これもブレンドモードのうち「比較グループ」に分類されます。
合成色と基本色のRGB値の和から、乗算値の２倍を引いたものが結果色と成増。

減算結果を結果色に採用しているため「差の絶対値」同様、色が反転する傾向にありますが、２つを比べてみるとわかるように「除外」のほうがマイルドな結果が得られます。

「除外」においても、合成色と基本色のいづれかが「白」だと「もう一方の色が反転」、いづれかが「黒」だと「もう一方の色のまんま」が結果色に採用されます。

ただし同じ色を重ねた場合は「黒」にはなりません。そこは「差の絶対値」とは違う点です。
上の画像ではテキストのやや左上から「除外」の長方形を被せています。

右下からさらに同じ色した「除外長方形」を重ねました。
重なった部分は「黒」にはならず、しかもテキストと背景の色が不思議な反転関係になってますね。これは興味深い。

「オーバレイ」のところでも述べましたが、「ふ」の黒い部分は完全な黒から少しだけRGB値を上げています。「差の絶対値」や「除外」を重ねた時に少し黒い部分の輪郭を残したい・・という時には（ R:30 G:30 B:30 ）程度にしてやると良いでしょう。

今回は３種類でした。

今回紹介したVectornatorのカラーブレンドはこちら⬇︎。

前回よりも複雑でトリッキーなものが多かったですね。参考になりましたでしょうか？
RGBベースで算出されるカラーブレンドは今回で以上と成増。次回はHSLベースのカラーブレンドを紹介したいと思います。