1.イラストの加工
Cubism の最新のEditorはこちらからもDLできます
Live2Dでイラストを動かす際に最初にするイラストの加工手順を学びます。
本動画内では、Photoshopを使用して作業をしています。
PSD作成時は、以下の描画ツールを推奨しております。
- Photoshop（Adobe）
- CLIP STUDIO PAINT（セルシス）
素材分けされた描画データはCubism Editorにインポート（読込み）しますが、ご使用の描画ツールによっては
正常に読み込みや書き出しができない場合がありますのでご注意ください。
基本チュートリアル一覧
動画チュートリアル
動画内で作成したインポート用のPSDはこちらからDL出来ます。参考にしてみてください。
Photoshop用スクリプト ⇒ DLはこちら
動画内に登場する「桃瀬ひより」完成サンプルモデル ⇒ DLはこちら
※ブラウザによってはリンクをクリックしてもダウンロードできない場合があります。
その場合、右クリックからリンク先を保存してください。
動画のおさらい
イラストの加工は、Live2Dでイラストを動かすときに最初にする作業になります。
イラストの加工によってモデルの出来が変わってくるので、ここでしっかり学びましょう！
イラストの加工について
Live2Dで動かしているイラストは静止していると一枚のイラストのように見えますが、実際は髪・まゆげ・まつげ・耳など、部品ごとに分かれています。
部品を分けることにより、髪を揺らしたりまばたきをさせたりなど、キャラクターを動かせるようになります。
部品を分けずにLive2Dでイラストを動かすことは可能ですが、魅力的にキャラクターを動かしたいなら、必要最低限の部品は分ける必要があります。
まずは、イラストを加工するために素材を用意します。
加工したいイラストを用意する、もしくは動画内で使用しているデータをこちらからダウンロードしてください。
※動画内で使用しているデータを扱う場合は、DL前に必ず無償提供マテリアルの使用許諾契約書をご確認下さい。
※ブラウザによってはリンクをクリックしてもダウンロードできない場合があります。
その場合、右クリックからリンク先を保存してください。
イラストは、おおまかに髪・顔・体という3つのカテゴリーに分けるのですが、そこから更に細かく分けていきます。
髪を分ける
前髪・横髪・後ろ髪という3つに分けていきます。
横髪や、ツインテールなど左右に分かれている場合は、それぞれ別レイヤーにします。
また、アホ毛などがあって動かしたい場合は、別レイヤーに分けておくと、動きをつけやすくなります。
分けるときは、原画で隠れていた部分も忘れずに描き足します。
描き足しがないとその部品が動いた際、以下の画像のように途切れて見えてしまいます。
イラストをモデル化した後もイラストを調整するのは可能なので、動きを見ながら調整することができます。
イラストを何度も調整するのが面倒な場合は、最初から大きめに描き足しをしておくのがオススメです。
顔を分ける
顔は目・鼻・眉・口・輪郭・耳に分けていきます。
目の分け方
まつげ・目玉・白目の3つに分けます。
まつげは、目尻の跳ねた部分を分けたほうが変形させやすくなります。
白目は、クリッピングの素材として利用したり、目玉を動かした際目玉に隠れていた部分が見えるので描き足しを忘れずに行います。
眉・鼻の分け方
大きく変形させる部品ではないので、単体で分かれていれば問題ありません。
口の分け方
上下でくちびるを分けます。
また、閉じたときは口内が見えなくなるはずなので、口内を分けます。
口内を分ける際は、原画の状態より一回り大きめに描き足しをしておきましょう。
ただ、このままでは線から口内がはみ出ているため、くちびるには肌色部分を描き足します。
Tips
口内をクリッピング素材にして、
目と同じように口を作ることは可能ですが、以下のようなデメリットがあります。
- クリッピングマスク多用による組み込み時の負担
- 口の線画に隠しきれず、口内パーツがはみ出す可能性がある
- 口の変形が多いほど、その分制作や調整の工数が増える
（下の画像では、線画から口内が微妙にはみ出しています）
口にはクリッピングを使用するより、肌色の塗りで口内を隠す方法をおすすめします。
ただし、以下のようなときは効果的にクリッピングを使用できます。
原画や用途によって使い分けるようにしましょう。
・動画等、モデルの容量を気にしない用途のもの
・厚塗り等、画風により唇周りに塗りのムラが目立つもの
・口の変形が少なくシンプルなもの
輪郭・耳の分け方
輪郭は、髪に隠れていた部分も描き足し、肌色のみになるように塗ります。
丸い頭にしておくと立体感がつかみやすく、モデル化したときに動きがつけやすくなります。
耳は、輪郭と同じ部品として扱うのもよいですが、分けたほうが細かに動きを制御することができ、モデルのクオリティは上がるため今回は分けます。
体を分ける
首・胴体・腕・足に分かれていれば十分です。
首は、顔を動かしたときに切れているのが見えないよう、多めに描き足しをします。
口のあたりまで描き足しがあれば十分です。
首の分け方
胴体の分け方
胴体は、リボンのように揺らしたいものがあれば分けておきましょう。
襟やカーディガンはそれぞれ分けたほうが動きを付けやすくクオリティアップに繋がりますが、まとめてしまっても問題ありません。
腕の分け方
腕は、上腕・前腕・手で分かれていると良いですが、今回は上腕・前腕で分けます。
足の分け方
足は、スカート・左脚・右脚で分けます。
これでイラストの加工は終わりです。
これだけ分ければ、十分なレベルでキャラクターを動かすことが出来ます。
Editor読み込み(インポート)について
最後に、Editorに読み込む準備をします。
EditorにPSDを読み込む際は、線画と塗りが別々になっている状態ではなく、結合して1枚のレイヤーにしておく必要があります。
また、部品を大まかにグループで分けておくと、Editor上で管理がしやすくなります。
Photoshopを使っている場合は、結合用のスクリプトがあるので使用することをオススメします。
データを保存する際は、PSD形式で保存してください。
以上でイラストの加工についてのチュートリアルは終了です。
動画では音声が付き、より理解しやすい解説になっているのでテキストと合わせて、ぜひご覧ください！
■イラストの加工については以下のページも参考になるので、ぜひあわせてご覧ください。詳しい手順も記載されています。
Cubism Editor マニュアル：PSD作成上の注意点
■1枚になっているイラストから分割・加工を行う方法のほかに、イラストを描いている段階でLive2Dで動かすことを意識しながらパーツレイヤーを分ける方法もあります。
続いて、イラストを動かす準備を行っていきます。
次項「2.イラストを動かす準備」へ