divire の塗り分け処理の細かい設定 ― 線画の「線の濃さ」の指定、“Periphery” の詳細設定、線画被覆指定

divire の塗り分け処理方式設定の3つの区分

divire で線画から塗り分けファイルを意図した通りに出力しようと思うなら、設定入力エリアの 塗り分け処理方式設定ページの項目の見直しが、それなりに重要になってきます。

塗り分け処理方式設定ページ

塗り分け処理方式設定というのは、具体的な話をするなら、divire に指定された元線画の画像を、1ピクセルごとに分析・判定して、ひとまとまりの(つまり、多数のピクセルから構成される)塗り分け色の領域をどう形作っていくか、その基準になるものです。

divire の最大の機能である「線画被覆」の設定も、ここで行います。

塗り分け処理方式設定ページの設定項目は、内容別に3つの枠内に区分されています。

上から順に

  • 線画の「線の濃さ」の指定
  • “Periphery” の詳細設定
  • 「線画被覆」の指定

となっています。

この記事の解説で、各種設定の変更によって、同じ線画を指定していても、塗り分けの領域が変わってくることをご理解いただけたらと思います。

[1] 線画の「線の濃さ」の指定

塗り分け処理方式設定ページのいちばん上にある設定項目は “Threshold” です。

divire で、塗り分けの元となる線画ファイルが指定されたときに、その画像の中で、どの程度「濃い色」の部分を検出すれば、それを「画の線」とみなしてよいかどうかを決めるのが、この設定項目です。

Threshold” の数値を変更すると、その右側枠内の線の、色の濃さが変化して表示されるのがわかると思います。

Threshold の数値を大きくするにつれて、線が薄く(明るく)なっていきます。

divire では、この枠内に表示されている濃さ以上の線であれば塗り分けを行うための画の「線」であるとみなします

したがって、新しい線画ファイルを指定した時にうまく塗り分けされない場合は(線画の線をきちんと検出していない可能性があるので)、まずこの Threshold の値を変えてみるとよいでしょう。(初期状態では、Threshold の値は 128 になっています。)

とくに、 JPEG 形式や低解像度の画像では、線の色が薄くなりがちなので、慣れないうちは Threshold の値は大きめ(=線の濃さを薄め)に設定しておくことをお勧めします。

もともとグレースケールの画像ファイルを線画として指定する場合は、 Threshold の値の決め方に注意

Photoshop でグレースケールの画像( PNG 形式や TIFF 形式)を作成する場合、必ずファイルに「カラーマネジメント設定(カラープロファイル)」が埋め込まれます。これが( Photoshop の初期状態の)「Dot Gain 15 %であるときなどは、Photoshop 上で表示される線の色の濃さを見て、「これくらいかな?」と思って divire の Threshold の数値を設定しても、実際に塗り分けに用いる「線の濃さ」の境目とはズレが生じて、意図した通りの結果にならなかったりします

Photoshop では、グレー画像のカラー設定に「Gray Gamma 2.2」(次いで、「sGray」や「Dot Gain 30 %」)を指定しておくと、divire の Threshold 枠内の色の濃さの表示(および数値)と、Photoshop 上での表示(および数値)のズレが比較的少なくなります。(それでも多少ズレます。)

こちらの記事で紹介した、 GIMP のグレースケール作業時の(初期状態の)カラー設定「GIMP built-in D65 Grayscale with sRGB TRC」を埋め込んだグレースケール画像では、こうしたズレはかなり少ないです。

なお、 Photoshop でも「グレースケールで作業して線画を作ってから、(わざわざ) RGB カラーに変換」してファイル出力すれば、divire の Threshold の値として完全に「見ため通り」の数値を使うことができます


カラーの線画では …

divire に線画が指定されたとき、いったん元画像の色を RGB カラースケールからグレースケールに変換した上で、「線の濃さ」の判定を行います。

divire では、グレースケールとしての色の濃さは RGB 値の光の各成分を R 、G 、 B としてプログラム内部的に

グレースケール値 = 0.299 × R + 0.587 × G + 0.114 × B

として計算しています。

画像処理の分野で、グレースケールの変換方式はいくつかあって、カラーの線画についての「線の濃さ」の判断は正直むずかしいです。お使いのお絵描きソフトの種類や、またファイルに備わった「カラーマネジメント設定(カラープロファイル)」によって、お絵描きソフトの「グレースケール変換」機能を用いてグレー化した画像での「線の濃さ」が、上式で算出される値と同じになるとは限らないからです。

カラーの線画で「線の濃さ」を判断するには、素直に上式に線の色の RGB 値を代入して計算するか、 Threshold の数値を細かく変えながら塗り分けファイルを出力し、試行錯誤で適正値を見つけるしか現状方法がないので、その点についてはご理解ください。

あえて塗り分け境界にならない薄い色を併用するテクニックも … ?

上に述べた、「線の濃さ」の調整の具体例として、次のような、釧路総合振興局の管轄地域の境界だけを「淡いグリーン」の線に加工した北海道のサンプル画像を用意しました。

(※ 参考画像ダウンロード: hokkaido_colored.png

釧路総合振興局の管轄地域の境界だけを淡いグリーンの線に加工した線画

この線画を divire に指定して、次のような色の設定で塗り分けファイルを出力しようと思います。

このとき、Threshold の値が初期状態の 128 のまま、塗り分けファイルを出力すると、次のようになります。

Threshold の値が 128 のとき

釧路総合振興局の管轄地域が、オホーツク総合振興局・十勝総合振興局・根室振興局の管轄地域と統合してしまっています。釧路総合振興局・オホーツク総合振興局・十勝総合振興局・根室振興局のそれぞれの管轄地域を適切に塗り分けるためには、Threshold の値を 150 程度以上に調整してやる必要があります。

Threshold の値が 150 のとき

線で描いた場所すべてを塗り分けようと考えるなら、このような調整を行うのが基本になります。

しかし、別の視点から考えると、Threshold の値が 128 のときは「」の線については塗り分けが行われるが、「淡いグリーン」の線は塗り分けられない、という事実も確認できます。これを逆に活用して複数の色を用いて線を描いた線画を divire に指定し「濃い色の線」で囲まれた一部の領域だけ同じ色で塗り分けられるようにして「薄い色の線」は塗り分けの境界にせずそのまま利用するテクニックも考えられます

たとえば、線画の中にレリーフを彫り込まれた硬貨を描くとして、硬貨の外側を「」で、内側のレリーフを「淡いグリーン」などで描いておけば、PSD 形式で塗り分けファイルを出力した際、硬貨の全体は1色で塗られて1まとまりのレイヤーが作成されるけれども、硬貨のレリーフを描いた「淡いグリーン」の線がそのまま “Background” レイヤーに残っているので、色彩調整・加工して、サンプルパターンとして再度活用することができることになるわけです。

Threshold の値設定の都合で、塗り分けに使用されない薄い色を使って文字で注釈を書いておくような使用法も考えられます。

また、Threshold の値より「薄い色」は結局、divire としては「紙白」扱いなので、「線」にこだわらず「面」で塗ってしまっても、色の境界を作らないわけです。これを利用し、線画に陰翳の基礎になる色を薄く引いておいて、いわゆる「グリザイユ画法」に持ち込むことも考えられます。「グリザイユ画法」を使う場合には、レイヤーのオプション設定(詳しくはこちら)を併用し、透明度やブレンドモードを全レイヤーに一括指定しておくと便利です。

塗り分けの境界を判断する Threshold の使い方次第で、できることは多いと思いますので、色々なワザを開発してみるのも楽しいかもしれません。

[2] “Periphery” の詳細設定

すでにレイヤー構成設定についての解説(こちら)で説明しましたが、divire は、線画の塗り分けの際、線画の「周辺部分」にあたる “Periphery” 領域を区別して、特定の色を割り当てようとする仕組みを持っています。

この “Periphery” について、詳細設定を行う枠内には、2つの操作箇所があります。

“Periphery” の設定項目

上が「“Periphery” 参照ポイント指定」、下が「“Periphery” 除外指定」になります。

“Periphery” 参照ポイント指定

divire では、線画の「周辺部」として “Periphery” あつかいにする領域を、 「画面の四隅のひとつを含むかどうかで判定しています。「画面の四隅のひとつ」は、初期状態では「左上」が選択されています。

「“Periphery” 参照ポイント指定」の操作によって、この「周辺部」を判定するための「画面の四隅のひとつ」を変更することができます。

“Periphery” 参照ポイント指定

画の被写体が、画面の四隅のどこかに被るような線画を指定する際には、この設定を調整してやると、画の「周辺部」らしい場所を区別しやすい塗り分けファイルを出力することができます。

たとえば、ポートレートでたまに見かける、人物が左上からのぞき込んでいるような構図の線画なら、参照ポイントとして「右上」か「右下」を指定すると、人物を描いた箇所が「周辺部」とみなされることを避けられます。

“Periphery” 除外指定

divire が “Periphery” として線画の「周辺部」にだけ別の色を割り当てようのは、基本的には「紙のまん中にキャラクターが描いてあるような絵」を塗り分けることを想定しているためです。

しかし、画面の端まできっちりと描き込まれた線画を塗り分けようとしている人にとっては、この「周辺部を特別あつかい」にする仕組み自体を、余計で邪魔なものと感じる場合があるでしょう。

divire の「 “Periphery” 除外指定」は、この「周辺部を特別あつかい」にする仕組みに関わります。

“Periphery” 除外指定(初期状態では有効)

「 “Periphery” 除外指定」は、初期状態では有効になっています。

“Periphery” 除外指定が有効のときは、設定入力エリアの レイヤー構成設定ページで、“Periphery” レイヤーのチェックを OFF にして塗り分けファイルを出力すると、「周辺部」は特別あつかいされているので、その箇所は色が塗られずレイヤーが作成されることもありません

犬張子の線画(↓)を、

以下の設定(↓)で塗り分けると

以下(↓)のようになります。

犬張子の線画の「周辺部」は実際いちばん面積が大きいのですが、このように、“Regions” のいちばん上のピンク色では塗られません。

塗り分け処理方式設定ページの、“Exclude Periphery from Regions” のチェックを OFF にすることで、「“Periphery” 除外指定」は無効化され、「周辺部」が特別あつかいされなくなります

“Periphery” 除外指定を無効にした状態

このとき、同じこの線画(↓)を、

前と同じ設定(↓)で塗り分けると

以下(↓)のようになります。

前者と比較してみると、“Regions” の一番上のピンク色が「周辺部」の塗り分けから採用され、色塗り箇所が 1 か所ずつずれて、犬張子のしっぽの上側の部分は “Misc.” 相当の淡いグレー色に変わっています。

“Periphery” 除外指定が「有効」のとき
“Periphery” 除外指定が「無効」のとき

このように “Periphery” 除外指定を無効にしておくと線画の全体にわたって領域ごとの色を採用する基準が一貫するので(初期状態では「面積の大きい順」)、「画面の端まできっちりと描き込まれた線画」を指定して塗り分けファイルを出力する際などは、この設定にしておく方が扱いやすいかもしれません。

[3] 「線画被覆」の指定

塗り分け処理方式設定ページのいちばん下の枠には、「線画被覆」についての設定項目がまとめられています。

「線画被覆」関連の設定項目

divire の塗り分けで「線画被覆」を有効にしたい場合は、まずこの枠の上部の、“Lay Color Over the Lines” のチェックを ON にします。

「線画被覆」有効状態

とりあえず、divire の初期状態(↓)から、このチェックだ ON にして犬張子(↓)を塗り分けると …

以下のような塗り分けファイル(↓)が出力されます。

divire の初期状態から、線画被覆「有効」のみ指定して出力した犬張子

“Maximum Thickness of the Lines” と “Enable Opening”

上の例のように、とりあえず “Lay Color Over the Lines” のチェックを ON にしさえすれば、「線画被覆」が機能します。そして divire の画面上では、“Lay Color Over the Lines” がチェック ON のとき、チェック OFF 時には暗く表示されていた、その下の枠内の2つの項目を操作することができるようになります。

Maximum Thickness of the Lines” の数値の調整と、“Enable Opening” のチェック ON / OFF の切り替えです。

これら2つは、「線画被覆」の際に線画の上に色を置く仕方を調整する項目です。

ただし、これらの項目をうまく活用するには、divire で「線画被覆」をどのように実施しているのかのあらましを理解していただく必要があります。これについては、やや込み入った説明になってしまうので、以下の記事にまとめました。「線画被覆」機能を積極的に使っていきたいという方は、読んでみて下さい。

「線画被覆」機能についてのさらに詳しい解説


まとめ

この記事では、divire 設定入力エリアの 塗り分け処理方式設定ページの各項目について解説しました。(「線画被覆」についてはやや端折ってしまいましたが … 。)線画を思い通りに塗り分けるためには、どこの項目を調整すればいいのか、だいたいの感じはつかめたでしょうか?

次の記事は、設定入力エリアの最後のページ、 レイヤーオプション設定ページについての解説になります。

HOME

divire関連