[Face-Wizard] 

 [Inkscape] 
 
 [Potrace] 
 
 [Tablet_Renew] 
 
 [MY_CGs] 
J とりあえず、なんか描いて塗ってみる
取りあえずアニメ調(セル画風)の塗りをやってみました。
以下の手順は最終的なノード数が1万個くらいになるので、強制終了やPCのフリーズにご注意ください。
素人が書いた描き方なので、あまり参考にはならないと思いますが...あくまで参考程度にどうぞ。

もくじ

線画を手動トレース or 自動でパス化
グループ解除・パスを統合
線画パスを分割 = ベタ塗り部分を独立したパスにする
オブジェクトを選択・フィル色を設定
オブジェクトを分離
影・HL(ハイライト)など

ほとんどの編集操作がキーボードで可能(それこそハンドルの微操作に至るまで)なので、キーボードマクロツールに設定しておくと便利そうなものを合わせて表記してみました。
[Ctrl+A][Ctrl+Alt+C]などの記述は、[Ctrl]と[A]キー同時押し、続いて[Ctrl][Alt][C]キー同時に押すことを示します。
※ショートカットキーはメインウィンドウをアクティブにしないと動作しない物がほとんどです。

メニューに表示されないショートカットキーは、[Esc](選択解除)とか、[Ctrl]+右ドラッグで手のひらツールとか、どのツールを使用中でも[Space]で選択ツールにトグるとか(テキストツールは除く)。
[Space]+ドラッグはコピー+ナッジなので注意(←ついやってしまう)

マクロは遅延時間を設定しないと処理が追いつかない事があります。




■ 線画を手動トレース or 自動でパス化

□ ストロークで線画を描いてみる
まずInkscape直描きでストローク(ペンシル or ベジェツールでパスを閉じない)でやってみた。
ストロークとは、ラスターグラフィクスエディタで言うパスに沿って線を描く、または選択範囲の縁に沿って線を描くのと同じ状態になりますが、ラスターと違い描画した後でも線の太さを自由に変更できます。
また、毛先などの線の折れ点を鋭角にしたり丸めたりその他色々形状も変えられます。それ以外は常に線幅が固定なのでSDキャラとか描く時には良いかも。ノードが少なくて済むので動作は軽快です。

このページに書いた手順で彩色を行う場合はストロークのままだと都合が悪いので、ストロークを全選択パスメニューストロークをパスに変換します。
[Ctrl+A][Ctrl+Alt+C]

ノードを少しでも減らすため、最後まで残す線画はストロークのままで、彩色用に別レイヤーにコピーした線画だけパスに変換するようにした方が良いかもしれません。


 連結リミットによる折れ点の形状のちがい
連結リミット4.00(デフォルト)


連結リミット20.00
複数のストロークを選択して一度に設定することも出来ます。
連結リミットの最大値は100.00ですが、あまり大きくしても折れ点を頂点とする三角部分(の辺)が直線的な形状になるので不自然になってしまいます。


先端・終端の形状パターンにはこんなのも。むぅ、何に使えというのだ(笑)
こいつらは、左右反転しても顔の向きが変わりません


□ potraceで出力したSVGを取り込んでみる(既にパス化されている)
次に、ラスターツールで描いた線画をモノクロ2値化して3000x3600 pixelsのbmpで保存、potraceでSVG出力してInkscapeで開いてみた。
InkscapeにもTrace Bitmapツールがあって、エンジンはpotraceを使っているっぽいのだけど、明るさの閾値以外ダイアログはどこを弄ればどうなるのやら(プレビューは小さすぎて役に立たない。もしかして設定でこれを拡大できるのだろうか)。

potraceはコマンドラインツール(MacはGUIで操作できるのがあるそうです)なのでプレビューしながら閾値を変えるといった事が出来ないため、10パターンくらいパラメータを変えたバッチファイルを作成してSVG出力。(potraceのコマンドラインスイッチとバッチについてはこちら)

IEエンジンのタブブラウザ(IE_Tab+Firefox)に全て表示させて、マクロを記録して同じ位置をめいっぱいZoom。ホイールでくるくる切り替えながら好さげなものをピックアップ。
InkscapeにまとめてD&Dしてレイヤーに振り分けれても比較できるのだけど、それだと、どれがどのファイルなのか分からなくなる上、レイヤー表示/非表示の切り替えも面倒なので単に比較するだけならブラウザの方が操作性が良いです。

potraceで書き出したSVGは、他と繋がっていない線(独立した線。服のしわ・口など)はオブジェクトがグループ化されているので、全選択してグループを解除します。
[Ctrl+A][Shift+Ctrl+G]
※線画のオブジェクトがグループ化されたままだと、後述するベタ塗り範囲のパスの分割が出来ません。
また、線画はラスターで自動選択ツールを使うときと同様に、線を途切れずに描くことがベストですが、ベタ塗り範囲がはみ出てしまっても後で修正できます(詳細は後述)。



■ グループを解除したら、選択解除する前にパスを統合
ストロークで描線・SVG取込みいずれの場合も、パスを統合して、最前面に新規レイヤー「Outline」(レイヤー名は任意)を作り、全選択後、線画を同じ場所にペースト。「Outline」はレイヤーをロックしておきます。
[Ctrl+Num+][Ctrl+C][Alt+L][Enter]レイヤー名[Enter][Ctrl+Alt+V]
「Outline」レイヤーの背面に「Base」レイヤーを作り、線画を同じ場所にペーストしてFill色を見易い色に変えておくと、後の作業がやり易くなります。
[Alt+L][Enter]レイヤー名[Tab][↓][Alt+A][Ctrl+Alt+V]
「Base」は塗り分ける範囲の分割用(Photoshopで言う自動選択ツールの代わり)で、このレイヤーの線画は最終的には消えて無くなります。
以下「Base」レイヤー上で作業を進めます。
potraceで書き出したSVGを開くと、最初にアクティブになるレイヤーが「root」になり、rootはレイヤーパレットに表示されない(rootがアクティブのときのみステータスバーには表示される)ので、root上のオブジェクトは新規レイヤーにペーストしたら削除しておくと楽です(「Outline」へペースト時、CopyでなくCutする)。

髪や足などがキャンバスからはみ出していて切れている画像の場合、Baseレイヤーだけは切れている箇所をストロークで繋げておき、ストロークをパスに変換後、再度Baseレイヤーの線画とパスを統合しておきます。(ベタ塗り範囲の選択もれ防止)

このとき用紙サイズよりも外側で線を繋いでしまうと、ほかのファイルをインポートするとき位置を合わせ辛くなってしまうので、繋いだ線の外側が用紙の端と一致するようにします。





水平線、垂直線はベジェツールで[Ctrl]を押しながら2点間クリック右クリックまたは[Enter]で引けます。

選択範囲の上端を一致させるには整列/配置ダイアログで[上端揃え]を選択します。このとき基準がデフォルトでは[選択]になっていて、その場合オブジェクトのZ順(重なりの順番)に関係なく見たまま用紙上端(または左端)にあるオブジェクトに対してそれ以外の選択オブジェクトが整列されます。
[最初の選択部分]の場合は1つ目に選択したオブジェクトに対して(以下同)
整列の基準について

[ページ]:全ての選択オブジェクトが用紙端(または用紙中央)に移動

[選択]:左揃えの場合、選択範囲の左辺が左にある方が基準、右揃えなら選択範囲の右辺が右にある方。 上揃えは上辺が上にある方、下揃えならその逆。
ただし中央揃えの場合、選択範囲全体の重心を通る垂線または水平線に対してセンタリング。

[描画]:選択モードのときと同じ挙動。??



■ 線画パスを分割 = ベタ塗り部分を独立したパスにする
[F1][Ctrl+A][Shift+Ctrl+K][Delay][Tab][Delete]
閉じた線の内部(内周パスのFill)を塗潰す方法は色々あり、Potraceのバッチを書けば一発で出来るのですが、やはり線画パスをある程度は修正しておきたいので、ここではパスの分割を使ったやり方で説明します。

イメージ的には"分割"というより"分離"の方が何となくしっくりくるというか、メニューアイコン的には"切り出し"っぽいですが、"分割"を使います。

線画パスを選択して分割したら、[Tab][Delete]で線画の中全体が塗潰されたオブジェクト(=(2)でペーストした線画全体の内部が塗潰されたオブジェクト)が削除され、ラスターツールで例えるなら、バケツでベタ塗りをしてから線画レイヤーを消したような状態になります。

図解するとこんな感じです
  Base上の線画↓


←Base上の線画です(パス統合済み)。色は適当に見やすい色で。
「Outline」レイヤーは非表示の状態です。

  パスを分割したところ↓
パス統合したBase上の線画オブジェクトを選択したら、パスメニューからパスを分割します。
分割されたパスが細かく選択状態になっているのが分かります。

ここで分割できなかったときは、最初に線画オブジェクトのグループを解除→パス統合をやり忘れている確立が高い(=オレ)。

  外周パスを削除↓
選択ツールに戻り、[Tab][Delete]で線画を含めて塗潰された範囲(左図)を削除します。

←これを削除せずに、Fill色を線画色にして新規最背面レイヤーにCut and 同じ場所にPaste。そのあと現在非表示にしてある「Outline」レイヤーを削除してしまえば大幅にノードを減らせるはずです(この絵だと線画だけで4千個あったノードが簡略化せずに1/10以下に減量)。

ただし、"彩色部分の隙間から線画を見せる"方法だと、その隙間が1ピクセルに満たない場合は等倍表示では線画が全く見えない状態になります(ズームすれば見えてくる)。
  ここまでの結果↓


上記の結果、彩色範囲だけが残ります(線画は非表示の「Outline」レイヤーに残っています)。

ばらばらになった各部分は、個別にFill色などを設定できる状態になっています。

このような選択状態では、ドラッグすると位置がずれたり変形してしまうので、気を付けていないと隙間が開いたり塗り残しができてしまいます(1つ目から[Shift]+選択で回避できます)。

  抜きの部分を削除↓
彩色範囲だけ残ると書きましたが、実際には線で囲まれた部分は"抜き(色を塗らない部分)"も一緒に分割されます。

このように抜きマークを別レイヤーに描いておくと、ひと目で見分けがついて便利です。
このとき、Zoom→選択→前のZoom(前見ていた場所に戻る)→選択...とやると効率よく選択できると思います。

  ここまでの結果↓
とりあえず抜きを削除するとこうなります。
Photoshopなどで自動選択ツールを使って1個ずつ選択して選択範囲を1~2px拡張して更に細い部分の選択もれを修正...といった事をしなくても、分割1発で毛先の奥まで隙間なく絵の具が流し込まれます。

良く見ると、さっきから口や鼻が見当たりませんが、この230個のオブジェクトの中にそれらは周囲と同色となって存在しています。
その辺は パス分割で生成されるオブジェクト(外周パスと内周パス)で説明します。



■ オブジェクトを選択(+色ごとにレイヤーに仕分け)・Fill色を設定
[F1][Tab]で次のオブジェクトへ
[Shift+Tab]で1つ前のオブジェクトへ
[!](=[Shift+1])で選択を反転
[Alt]+クリックで上層/下層の選択範囲がトグる
またはマウスポインタが"+"(移動)になっていない状態で小さい方を[Shift]+ドラッグ
([Shift]+クリックの挙動は、選択+/選択-がトグるのですが、[Shift]+ドラッグでは選択から除外できません)
途中で選択解除してしまうと、[Tab]を押したとき最背面のオブジェクトから順に選択し直しになってしまいます(UndoやUndo Historyで選択解除は取り消しできない)。なお選択を解除した状態で[Shift+Tab]を押すと最前面オブジェクトから選択になります。

このとき、肌や髪など塗り分ける部分を新規レイヤーにCut and 同じ場所にPasteして、レイヤーで管理するとまとめてスタイルを設定でき、後で影を塗るときにも楽です。
キーマクロツールにCut→レイヤー切り替え→同じ場所にpaste→Baseレイヤーに戻る→[Tab]を設定しておくと更に楽。Baseの上に新規レイヤーがある場合は
[Ctrl+X][Alt+L][E][Ctrl+Alt+V][Alt+L][W][Tab]
レイヤーをたくさん作ったとき特に、レイヤーパレットでレイヤーの切り替えを行うと、[Ctrl+A]などのショートカットを使う際メインウィンドウをアクティブにするのを僕はすぐ忘れてしまうので、スマートスクロールのホイールにレイヤーの切り替えを割り当ててみました(ズーム操作は個人的に[5],[3+-]とズーム履歴くらいしか使わないので)。
[Alt+L][E]:前面のレイヤーをアクティブ
[Alt+L][W]:背面のレイヤーをアクティブ
スマートスクロールのプラグインはTamashaさんのマルチプラグインを使用させて頂いてます。

このプラグインはWacom純正より高性能と言って良いくらいで、ボタン1つを切り替えに割り当てれば21種類のキーマクロを左手だけで操作できるようになるスグレモノです。またスクロールボールの動作設定を[マウスドラッグ]+[中ボタン]にすればボールで手のひらツールの操作が行えます(4方向制限あり/なしどちらでも動作)。
おまけにアプリごとにこれらの設定が自動切替えするので、Inkscape以外にもプラグインがない他のグラフィックツールやブラウザ・CADなどでとても重宝しています。


あらかじめBaseの上に新規レイヤーを作っておけば、オブジェクト選択 [Shift+PageUp]だけでも前面のレイヤーに移動できますが、このショートカットは移動先のレイヤーがロックや非表示の状態でも移動できてしまいます。
逆にそれを利用してオブジェクトの仕分けをすると、じつはやり易い。
レイヤーの数については、ラスターツールのようにデータ軽量化目的で編集の終わったレイヤーを結合する必要はなく、全オブジェクトを1枚のレイヤーにマージしても、アプリの重さやデータサイズもほとんど変化しません(1KBくらいの差)。
軽量化するならノードを減らすのが確実のようです(知人曰く、更なる軽量化を望むならLinuxマシンを1台組んだ方が良い、らしい。gtkを使用するアプリはマルチリンガルな反面、WindowsではLinuxより動作が重くなるとの事)。


パーツをレイヤーに分け終わったら、そのレイヤーのオブジェクトは全選択してパスを統合しておきます。
[Ctrl+A][Ctrl+Num+]

ところで、選択時の挙動はオプション(Inkscapeの設定選択)で細かく設定できますが、キーボードショートカット[Ctrl+A],[Tab],[Shift+Tab]押下げ時の挙動を「現在のレイヤーのオブジェクトのみ選択」にしておかないと、パスを統合したりFillを設定するときロックされていないレイヤーに仕分けしたオブジェクトにも適用されてしまうので注意が必要です(別レイヤーのオブジェクトでも現在のレイヤーに統合される。デフォルトでチェックされているので弄らなければ大事ない)。
これに対し、マウスドラッグで選択した時の挙動は、レイヤーをロックまたは非表示にしない限り全レイヤー・全オブジェクトが選択の対象になってしまいます(そのかわりオブジェクトをクリックするとそのレイヤーがアクティブになる)。
見えている、あるいは表示させておかないと編集しづらいレイヤーは特にロックし忘れないようにして、現在の編集に無関係なレイヤーは非表示にした方が無難です。
レイヤーでなくオブジェクトのプロパティでロックしてしまうと、そのレイヤー内でロックしたものが1つなら良いのですが、複数ロックする場合はIDなどに分かりやすい名前を設定しておかないと、解除したい時に探すのが大変になります。

マウスクリックでオブジェクトを選択するとき、クリックしたつもりでドラッグ(移動)している事がよくあるので注意が必要です。
特にタブレット使用時の1点目をクリックした瞬間と、選択後にペン先をタブレットから離す瞬間(これはタブレットの問題。ダブルクリックアシストoffでも左ボタンをリリースするタイミングが遅い? あとペン読み取り高さが高すぎる。公称値は約6mmだけど家のは15mmくらい離しても反応する。過電流でも流れてるのかな)。

これを回避するには1点目をクリックする前に[Shift]キーを押しておき、ペン先を完全に離すまで[Shift]キー押しっぱなしにすればドラッグになりません

クリックかドラッグかの判別は、Inkscapeの設定「マウス」でも感度調整できます(デフォルトは4px)。
「ドラッグでなくクリックとする動きの最大値」= 「それ以上動かさないとドラッグとして認識しない」 = 「反応の鈍さ」ってことなので、あまり大きな数字にしてしまうとパス編集時のハンドル操作などがやり辛くなります。
デスクトップ上の n pixelがタブレット上で何mmにあたるのか調べるには、n*mmpd/(x1/x2) で計算すると分かります。
n = デスクトップ上のピクセル数
mmpd = mm par dot(ドットピッチと同義)
x1 = モニタの対角もしくはW or H
x2 = タブレットの対角もしくはW or H
たとえば対角21.3インチUXGA(1600*1200dot)のモニタでA5サイズのタブレットを使用している場合、クリック/ドラッグの区別が4pxだと、
※式はモニタの対角を21.3inchとして計算しています。
 カタログ上の表記で21.3inchでも実際には
(432@+324@)i@/25.4 = 21.2598...inch
のようになるので、モニタ仕様表の有効表示寸法で計算した方が正確です。

1600/(21.3*4*5r) = 93.896713615023474178403755868545 dot/inch
25.4/(1600/(21.3*4*5r)) = 0.27051 mm/dot

A5 Tabletの有効操作エリアの対角 = (203.2@+152.4@)i@/25.4 = 10 inch
21.3/10 = 2.13
(A5 Tablet上のペンの移動量がモニタ上で2.13倍になるということ)

desktop上の4px = 4*0.27051 mm = 1.08204 mm
ゆえにdesktop上の1.08204 mm = A5 Tablet上の 1.08204/2.13 mm = 0.508 mm(±0.25 mm)
つまりこの環境では、タブレット上で約0.5mmペンを動かした(ドラッグした)だけで、Inkscapeは「ドラッグがあった」と判断します(±0.25 mmはペンの読取り誤差)。

ちなみに僕の環境(Eizo S2410W + Intuos i-900縦横比保持)では、
ドットピッチ = 0.27 mm
有効表示寸法(W) = 518.4
Tablet実質有効幅 304.8-((30479-30464)*0.010) = 304.65 mm
desktop上の4px = A4 Tablet上の 4*0.27/(518.4/304.65) mm
= タブレット上の 0.6346875 mm(±0.25 mm)
になります。


■ オブジェクトを分離
線画が途切れていて、肌と髪など塗り分けたい範囲が1つのオブジェクトになってしまった!

ありがちです(←オレ)
そうなってしまった時は線画がどこで途切れたのか目を皿のようにして探し出し、途切れた部分をベジェツールで繋げます。
線画として繋げた方が良いのか、塗り分けに必要な線なのかケースバイケースですが、前者なら

@ベジェツールで繋げて、線画の色・太さ・曲線に合わせてパスを整形(a)

A(a)が前面、範囲が繋がってしまったオブジェクト(b)を背面の状態で双方を選択、パス分離
[Ctrl+/]
このときベジェツールで繋いだストロークをパスに変換せずに分離を行うと、結果的に分離は成功しますがストロークは消えてしまいます(前述したとおり、aがノード2点のみの直線の場合はa,b双方が消失してしまいます)。
B(a)は(b)からはみ出た部分が削除され、(b)は(a)によって2つに分離されているので、それぞれあるべきレイヤーに振り分けて、(a)は「Outline」レイヤーのロックを解除して同じ場所にCut and Paste+全選択してパスを統合(aの色は何色でも、このとき線画色に統合される)+レイヤーをロック。



■ 影・HL(ハイライト)など
影・HLは、アニメ原画のように影トレス線を1枚別レイヤーに描いておき、同じようにsvgに変換して、インポートしてオブジェクトを分割して塗り分ける(次項)か、Photoshopのように上層に隠れる部分を大まかに、見える部分を細密にパスで作成し、影・下地2つのオブジェクト選択ClipSet(共通範囲クリッピング)で影部分オブジェクトが作成(デフォルトの設定では、このとき色が下層オブジェクトの色になる)出来ますが、クリッピングは他のアプリケーションとの連携がまだ不完全な様で、例えばpdfで書き出した場合、Adobe Readerで表示させるとクリップしたオブジェクトは塗り分けが正常に表示されません。

また、Inkscapeで作成したSVGをGimpで開くと通常のパスはインポートできますが、クリップしたパスは位置関係が激しくずれてしまう様です(画像そのものは正常に表示できる)。
これらの問題は、クリッピングを使わずにパスメニューの切り出しを使うと回避できます。

ここでは前者の方法で肌の影をつけます。

下記の手順は、既に肌の下地色彩色部分を「hada_Base」レイヤーにマージしているものとします。肌以外の部分も同様にマージしてから操作を繰り返します。

単に"コピー"と書いてあるものは、"コピー and 同じ場所にペースト"する事を示し、例によってレイヤー名やファイル名は半角英数文字であればどんな名前でも良いです。

影トレス線を使って下地色部分から影部分を切り出す

 1.hada_Baseレイヤーの前面に新規hada_Shadowレイヤー作成

 2.hada_Baseレイヤーのオブジェクト(パス統合済)を(1)にコピー

 3.インポートした影トレス線(次項参照 パスは統合する)を(1)にコピー
影トレス線は他の部分でも使い回しするので、コピーを取ってから使います
 4.hada_Shadowレイヤー全選択、パス差分 [Ctrl+Num-]
影トレス線が消えてしまいますが後で切り出します
 5.そのまま続けてパス分割 [Shift+Ctrl+K]
ばらばらになっている影部分オブジェクトは次の工程でパス統合したいので、hada_Shadowレイヤー上の影以外の部分(ここでは肌下地色と重複する部分)は削除します。
(このときFill色を影色にしてから削除していくとイメージがつかみ易い)。

hada_Shadowが影のみの状態になったら、一旦線画を表示させて隙間がないかチェック。
2000%くらいズームすると隙間が出来ている事があるので、全選択してストローク色を同色に、ストロークの線幅を0.1ptくらいに設定。線画の不透明度を下げておくと確認しやすい。
 6.hada_Shadowレイヤーのパス統合 [Ctrl+Num+]

 7.hada_Shadowレイヤーの前面に新規hada_ShadowLineレイヤー作成

 8.hada_Baseレイヤーのオブジェクト(パス統合済)を(7)にコピー

 9.影トレス線(パス統合済)を(7)にコピー

10.hada_ShadowLine全選択、パス切り出し [Ctrl+Num*]

11.hada_ShadowLine全選択、hada_Shadowレイヤーにコピーして統合
   (影と影線を同色にする場合のみ)
ShadowLineを影と同色にする場合、hada_ShadowLineレイヤーはもはや不要なので削除します。

ShadowLineの色を別の色にする場合でも、一旦hada_Shadowと結合した上でShadowLineレイヤーの側を色換えしないと隙間ができてしまう事があります。
隙間が出来た2つのオブジェクトを結合すれば隙間は消えます。

ちなみに2番目の工程で、差分ではなく分離を使えば同時に影トレス線の切り出しが行えるので6〜10番目の過程が不要になるのですが、1枚のレイヤーに影と影トレス線オブジェクトが両方ある状態ではどちらかの選択が困難なので、やや遠回りな感じですが差分を取ってから切り出した影トレス線を統合するようにしています。

現時点のバージョン(Inkscape 0.43+0.44pre2, built Jun 2 2006)では、pdfやpsで保存して他のアプリケーションに渡すと、レイヤーの不透明度やFill/Stroke色の半透明色が反映されません(SVGで保存すれば問題なくブラウザでも反映されます)。

半透明色部分を、背面レイヤー(または背面オブジェクト。いずれも無い場合は白い矩形を背面に置く)を表示した状態でカラーコードをコピー(スポイトor[F7][Ctrl+C]) Fill/Stroke色(不透明度、透過性ともに)とレイヤーの不透明度を100%に戻す Fill/Strokeダイアログにカラーコードをペーストすることで回避できます。

スポイトツールは、レイヤーの不透明度やオブジェクトの選択色に関係なく"今見えている色"をコピーします。スポイト使用中に[Ctrl+C]キーを押すと、マウスポインタ直下のカラーコードがクリップボードへコピーされます。

スキャナ取り込みの線画では無理ですが、線画をタブレットで描く場合は線が交差する部分(髪と眉など)を別レイヤーに描いて、それらを別SVGで書き出してからインポート→パス統合すると、線画の交点がコーナーポイントにならずに丸まってしまうのを回避できます。
線画全体をSVG、部分ごとにSVG+統合いずれのでも、ノード数はあまり変化しません。

 

 Next ⇒ 別のSVGをインポートして位置を合わせる 


 MENU△ PAGE TOP▲

Jan 15 2007