ブレンドモードについて（理解編） 〜 Vectornator スタイルタブその④。

ブレンドモードとは？

こんにちは、「ふ」です。
今回はVectornatorスタイルタブの４回目、「カラーブレンド」について紹介します。

とは何ぞや？

Vectornatorにおける「カラーブレンド」は上にあるオブジェクトが、下のオブジェクトやレイヤーに「色のエフェクト」を与える機能です。

広義で「カラーブレンド」について調べると、「色の合成」や「描画モード」などと難しげな言葉が出てきて戸惑うことと思いますが、要は上のオブジェクトが下にあるオブジェクトに「色のエフェクト」を掛けているんですね。

そのエフェクトの仕組みとしては、エフェクトとなるオブジェクトの色（合成色/ブレンドカラー）、もとになるオブジェクトの色（基本色/ベースカラー）、それぞれの成分の値から算出されます。

ひとつ例を挙げてみますね。

◼︎ 例：比較（暗）

もとの合成色と基本色はこんな感じ。合成色にブレンドモードの「比較（暗）」を施してみましょう。

比較（暗）というスタンド もといブレンドの効果。RGB値で、それぞれの成分の暗いほう（値が小さいほう）を採用します。

ブレンド後のカラーはこうなりました。

〜こんな感じで「色の成分値」をもとにして「結果のカラー」が決まります。

RGBとHSL。

カラーブレンドの算出には、RGB値とHSL値が使われます。
いずれも数値を使って「色」を表現する方法なのですが、これについても理解を深めておきましょう。

◼︎ RGB値

CGソフトを扱う方にとって、これはお馴染みですね。
R（red）、G（green）、B（blue）の３つの成分から色を決定します。

VectornatorのカラーピッカーにもRGBスライダーが搭載されています。RGBのスライダーの下に「A」というスライダーがありますが、これは不透明度（Alpha）を指定します。

各成分の値は0〜255の範囲で、大きくなるにつれ濃く明るくなり、小さくなるにつれ薄く暗く成増。

このRGBは液晶ディスプレイなどの映像デバイスで採用されている「色の表現法」です。
現実世界だと「薄く暗く？」というのはイメージしづらいですね。

全ての成分をMAXにすると白になり、すべて0にすると黒に成増。

◼︎ HSL値

RGB値が機械的に色を指定しているのに対し、HSL値は直感的な表現法です。成分は、

H（hue/色相）
S（saturation/彩度）
L (luminosity/　輝度）

の３つです。

〜もし誰かに色のオーダーをされたとしましょう。

RGB「赤多め、緑少なめ、青普通」
これだと訳がわかりません。

HSL「鮮やかすぎない赤で、ちょっと暗め」
これなら比較的イメージしやすいのではないでしょうか。サンプルを作って確認してもらうぐらいはできそうです。

色相は0°〜360°の範囲で色合いを選択します。彩度と輝度を指定する前段階の「赤ベース」「緑ベース」といったイメージですね。

彩度は、色の鮮やかさを指定します。範囲は0〜100（%）。
値が大きいほど鮮やかになり、0にすると完全なモノクロになってしまいます。

輝度は、見た目の明るさを指定します。これも範囲は0〜100（%）。
50%が基準値となり、100%で完全な白に、0%で完全な黒に成増。

・「HSB」とは違う？

Vectornatorのカラーピッカーには「HSB」値を使ったスライダーが実装されていますが、カラーブレンドの計算に使われる「HSL」値とは少し違うものです。

H（hue）は同じパラメータです。
S（saturation)は名前は同じですが、内部的に採用しているパラメータが違うため、挙動が少し変わってきます。
B（brightness）は機械的な明るさであるのに対し、HSL値のL（luminosity）は人間が実際に感じる「明るさ」に基づいて定義されたパラメータです。

カラーブレンドの種類。

Vectornatorに用意されているカラーブレンドを大別しておきます。RGB値をもとに計算されるものと、HSL値をもとに計算されるものがあります。

◼︎ RGBベース

通常（Basic）

通常　Nomal

暗くなる系（Daken）

比較（暗）Daken

乗算　Multiply

明るくなる系（Lighten）

比較（明） Lighten

スクリーン Screen

対比（Contrast)

オーバレイ　Overlay

比較（Comparetive）

差の絶対値 Difference

除外 Exclusion

◼︎ HSLベース

色相　Hue

彩度　Saturation

カラー　Color

輝度　luminosity

〜豊富に用意されていますね。サンプルはごく単純なイラストで表現しているため系統が同じものについては、見た目がほとんど変わらない。

「いっぱいあってわかんないよ！」と思う方もいらっしゃるでしょう。もちろん全て覚える必要はなく、「こんなのがあるんだな・・」くらいに思っておけばいいです。
実際、全てのブレンドモードをまんべんなく使いこなしている人は多分地球上にいません。

操作と結果。

Vectornatorでブレンドモードを指定する手順です。

はじめにオブジェクトを選択します。

インスペクターバーの1番左のアイコンを選んで、スタイルタブを表示させます。
その中にある「ブレンドモード」をタップしましょう。

ブレンドモードの一覧が表示されます。いろんなものを試してみてください。
元のスタイルタブに戻したいときは、ヘッダ部分の「スタイル」をタップします。

ブレンドモードは、上に重なっているオブジェクトに対して指定してください。下にあるオブジェクトに指定しても、何も起こりません。

下のオブジェクトの色は基本色（エフェクトを掛けられる側）、上のオブジェクトの色が合成色（エフェクトを掛ける側）と成増。ブレンドモードは「合成色」のほうに指定するのですね。

ブレンドモードを指定したオブジェクトより下にあるものは全て、「エフェクトを掛けられる対象」と成増。インポートした画像も然りです。

指定したオブジェクトに影を落としていた場合にはそれも「対象」とみなされます。
また、背景用にアートボードいっぱいに長方形を置いている場合にもブレンドの種類によっては影響を受けることがあるので、注意が必要です。

使い所は次回。

今回はVectornatorのカラーブレンド、「理解編」でした。
「で？　何に使うの？　使いどころは？」
と思った方も多いでしょう。次回以降、各種モードについて試していきたいと思います。それまでに皆さんもいろいろと試しておいてください。