Inkscapeを使った着せ替えパーツの作り方
Inkscape v0.48.2用の解説です。他のバージョンをお持ちの方は多少メニュー名等が異なるかもしれないことをご了承下さい。
Inkscapeを使う理由
GimpやPhotoshop等の一般的なお絵かきソフトは「ラスター画像」という形式で絵を描きます。
ラスター画像は、手描きのように複雑に・直感的に描くことができますが、拡大・縮小をするとぼやけたり滲んだりして汚くなってしまいます。
一方、Inkscapeは「ベクター画像」という形式で絵を描くソフトです。
ベクター画像はいくら拡大・縮小をしてもくっきりと美しいままです。
ラスター画像のような複雑でアナログ的な絵を描くのには向いていませんが、デザイン的なくっきり・つるんとした絵を描くのには向いています。
ですので、普通のお絵かきソフトで絵を描くとどうしても線が汚くなる・ムラのないつるんとした線と塗りをしたい、という場合にはベクター画像を扱うソフトがお勧めです。
ベクター画像を扱う有名なソフトには有料ソフトの「Illustrator（イラレ）」もありますが、Inkscapeは無料で使えますので、まずは試してみたいという方にお勧めです。
COLORSのほとんどの公式パーツはInkscapeで作成されています。
Inkscapeのダウンロードとインストール
ダウンロード・インストール詳細手順についてはこちらのサイトが詳しいです。
参考画像の準備
作りたいパーツをイメージしやすいスナップショットをCOLORSで作成しておきます。
今回はウエーブヘアに合わせた前髪を作りたいので、前髪無しのウエーブヘアでスナップショット作成。
リサイズはせずに原寸大で作って下さい。
Inkscapeの準備
Inkscapeを起動し、上部メニューの「レイヤー」＞「レイヤー」をクリックして、レイヤーウィンドウを表示しておきます。
さらに上部メニューの「オブジェクト」＞「フィル/ストローク」でフィル/ストロークウインドウも表示しておきます。
これで右側に下の画像のようなメニューが出ているはず。
参考画像を読み込む
上部メニュー「ファイル」＞「インポート」から、先ほど作成しておいたCOLORSスナップショット画像を読み込みます。
画像をリンクにするか埋め込みにするかというウインドウが出ますが、最終的にスナップショット画像は不要なのでどちらでもいいです。
ただ、リンクにした場合は、後日作業を再開しようとした時にスナップショット画像の保存場所を変えていたり捨ててしまっていた場合には読み込めないというだけです。
不安であれば、ファイルサイズが多少大きくなっても構わないのであれば「埋め込み」にした方が無難かもしれません。
ページサイズを画像にフィットさせる
このままではページサイズ（黒枠）とかなりずれたところに、読み込んだスナップショット画像が表示されます。
そこで、スナップショットをクリックして選択した状態（画像周囲に黒矢印が出る）にしてから、上部メニュー「ファイル」＞「ドキュメントの設定」から、「ページ」タブにある「ページサイズを描画全体または選択オブジェクトに合わせる」をクリックします。すると、ページサイズが画像にフィットします。
画像の拡大表示・縮小表示
画像の拡大表示・縮小表示は、Ctrlキーを押しながらマウスのホイール上下か、左下の％表示欄でも操作できます。上部メニュー「表示」＞「ズーム」から、または左縦メニューの虫眼鏡アイコン（ズームツール）をクリックすると上部メニューの３段目に表示されるメニューからも操作できます。
キーボードの「1」キー（半角）で等倍表示になります。
前髪のベース作り
レイヤーウィンドウ左の「＋」をクリックして、新しいレイヤーを追加します。
レイヤー名は自分のわかりやすいように変更しておいたほうが良いです。
レイヤーというのは透明な紙のようなものです。スナップショット画像の上に透明な紙を敷いて、そこに絵を描いていくイメージです。
いよいよ絵を描いていきます。左縦メニュー、上から11番めの「ペンツール」アイコンをクリック。
そして画像のように頭頂部・おでこ右外・おでこ左外の3点をクリックし、最後に初めに打った点をもう一度クリックします。するとその3点を結ぶ直線が引かれます。スナップショットの肌色部分よりやや外側に点を打つのがコツです。
次に、左縦メニュー上から2番めの「ノードツール」アイコンをクリック。
先ほど引いた直線をドラッグしてちょうどいい形に曲げていきます。頭の肌色を覆い隠すヘルメットのような形になればOK。
直線をドラッグすると、先ほど打った点（ノード）から小さな丸の付いた薄い青線（ハンドル）が出てきますが、それを引っ張って線を曲げることもできます。
ノード自体もドラッグで移動させることができます。
適当に点や線をあちこちドラッグしているとじきに感覚をつかめるようになると思います。
黒い枠線だけでは前髪っぽくないので、線の色を変えて中を塗りつぶします。
右側に初めに表示させた「フィル/ストローク」ウインドウで操作します。
線画を「ストローク」、線画の中を埋める色を「フィル」と呼びます。
「フィル」は単一色・RGBAすべて255（真っ白）、
「ストロークの塗り」は単一色・R=G=B=200 A=255（薄いグレー）、
「ストロークのスタイル」は幅1.00px、
にします。
ストローク（線）の幅や色はお好みで多少変えても良いです。
今回はベース部分のフィル（塗り）は白一色ですが、好みに応じてグラデーションをかけても良いです。
まとめると、「ペンツール」でおおまかな形を作り、「ノードツール」で整え、「フィル/ストローク」で線と色を変える、ということです。どのパーツを作る時もこの作業が基本となります。
前髪の房を作る
このままではただの白いヘルメット状態なので、前髪の房を作っていきます。
ヘルメットの下の辺の直線上に、折り曲げたいところに点を打っていきます（ダブルクリック）。
打った点をドラッグすることで、直線が折れ曲がります。
さらに折った直線をドラッグして曲線を付けたり、ノードを移動させたり、ハンドルを操作したりを繰り返し、前髪の形を作っていきます。
時々キーボードの「h」キーを押して、左右反転してバランスを確認するのも良いです。
影の作成
次に影を作っていきます。影が不要な場合は省略して下さい。
新しいレイヤーを追加します。
先ほどと同じように、ペンツールで点を打っておおまかな形を作り、ノードツールで整えていきます。
前髪輪郭線の上に影パーツが多少重なっても、後でさらに輪郭線を上に重ねるので大丈夫です。はみ出さなければOK。
このように複数に別れたパーツは、左縦メニュー一番上の選択ツールをクリックし
Shiftキーを押しながら各パーツをクリックしていくことで複数選択でき、フィル・ストロークを一括で操作することができます。
「フィル」は単一色・R=G=B=225 A=255、
「ストロークの塗り」は「塗りなし」です。
好みで「フィル」の色の濃さは変えても構いませんし、単一色でなく線形グラデーションにしても良いでしょう。
左縦メニュー下から三番目の「グラデーションツール」を選択し、塗りたいパーツ上でグラデーションをかけたい方向にドラッグすることでグラデーションの方向を決めることができます。
グラデーションの色自体は、フィル/ストロークウインドウから編集することができます。
輪郭線の修正
このままでは後ろ髪と前髪の間にしっかり輪郭線があって分離しているのが気になります。気にならない場合はこの工程は省略して下さい。
選択ツールで初めに作った前髪ベースパーツをクリックして選択し、さらに右クリックし、「複製」を選びます。
これで、見た目ではわかりませんが前髪ベースパーツが複製され２重に重なっている状態になりました。
新しいレイヤーを最前面（一番上）に追加します。
先ほど複製した前髪ベースパーツを選択した状態で上部メニュー「レイヤー」＞「選択オブジェクトを前面のレイヤーに移動」をクリックすると、選択パーツが一つ上のレイヤーに移動します。
それをもう一度行うことで、複製前髪ベースパーツが最前面レイヤーに移動します。最前面に移動したかどうかは、影パーツが隠れて見えなくなるのですぐに分かると思います。
ノードツールで、この辺から前髪の輪郭を消したいなぁという２箇所に点を打ちます。
頭頂部のノードを選択し、上部３段目メニューの左から２番目「選択したノードを削除」を選択。
すると、頭頂部の曲線が歪みます。その曲線をクリックし、上部３段目メニューの左から６番目「２個の非端点ノード間のセグメントを削除」を選択します。
これで頭頂部の不要な輪郭が消えました。わかりにくいので下の２枚のレイヤー（ベース・影）を非表示にしてみましょう。
非表示にしたいレイヤー名の先頭にある目アイコンをクリックして、目閉じアイコンにすると非表示になります。
輪郭線パーツに変なふうに色が残っていますが、不要なので「フィル」を「塗りなし」にしておきます。
これで輪郭線パーツは完成しましたが、まだ前髪ベースパーツにも輪郭線が残ったままですので、次はそちらを消します。
前髪ベースパーツを選択し、「ストロークの塗り」を「塗りなし」にします。
艶パーツの作成
次は艶パーツを作ります。不要な場合は省略して下さい。
最前面に新しいレイヤーを追加します。
「ペンツール」でおおまかな形を作り、「ノードツール」で形を整えます。
ここから先は、背景が白いとやりにくいので艶パーツ以外の前髪パーツを非表示にします。
「フィル」を「単一色」かグラデーションで白く塗り、「ストロークの塗り」は「塗りなし」にします。
好みに応じてぼかしをかけたり不透明度を下げたりします。
画像の出力
COLORSの仕様上、艶パーツとそれ以外の部分を別画像として出力しなければいけないので、まず前髪パーツレイヤー（ベース・影・輪郭）のみを表示します。参考にしていたスナップショット画像レイヤーも非表示にします。
「ファイル」＞「ビットマップにエクスポート」。
「エクスポート領域」は「ページ」を選択。保存したい場所とファイル名を指定してpng形式で保存します。
次に艶パーツを出力します。艶パーツ以外を非表示にし、先ほどと同じ要領でファイル名を変えて保存。
これでInkscapeでの作業は終了です。
後は、出力した画像をCOLORSのパーツ追加機能で追加すれば完了です。
Inkscape解説サイト
Inkscapeにはまだまだ便利な機能や使い方がたくさんありますので、是非解説サイトなどを見て、ご自分にあった使い方をしてみて下さい。
他にもたくさんありますので、「Inkscape」で検索して、自分のわかりやすいサイトを探してみて下さい。