1.イラストの加工

Cubism3 の最新のEditorはこちらからもDLできます

Live2Dでイラストを動かす際に最初にするイラストの加工手順を学びます。
本動画内では、Photoshopを使用して作業をしています。

 

動画チュートリアル

Photoshop用スクリプト ⇒ DLはこちら

動画内で使用している「桃瀬ひよりちゃん」完成サンプルモデル ⇒ DLはこちら

 

イラストの加工は、Live2Dでイラストを動かすときに最初にする作業になります。
イラストの加工によってモデルの出来が変わってくるので、ここでしっかり学びましょう!

 

イラストの加工について

Live2Dで動かしているイラストは静止していると一枚のイラストのように見えますが、実際は髪・まゆげ・まつげ・耳など、部品ごとに分かれています。

部品を分けることにより、髪を揺らしたりまばたきをさせたりなど、キャラクターを動かせるようになります。
部品を分けずにLive2Dでイラストを動かすことは可能ですが、魅力的にキャラクターを動かしたいなら、必要最低限の部品は分ける必要があります。

まずは、イラストを加工するために素材を用意します。
加工したいイラストを用意する、もしくは以下リンクから動画内で使用しているデータをダウンロードしてください。

※動画内で使用しているデータを扱う場合は、DL前に必ず無償提供マテリアルの使用許諾契約書をご確認下さい。

イラストは、おおまかに髪・顔・体という3つのカテゴリーに分けるのですが、そこから更に細かく分けていきます。

 

1.髪を分ける

前髪・横髪・後ろ髪という3つに分けていきます。
横髪や、ツインテールなど左右に分かれている場合は、それぞれ別レイヤーにします。
また、アホ毛などがあって動かしたい場合は、別レイヤーに分けておくと、動きをつけやすくなります。
分けるときは、原画で隠れていた部分も忘れずに描き足します。
描き足しがないとその部品が動いた際、以下の画像のように途切れて見えてしまいます。

イラストをモデル化した後もイラストを調整するのは可能なので、動きを見ながら調整することができます。

イラストを何度も調整するのが面倒な場合は、最初から大きめに描き足しをしておくのがオススメです。

 

2.顔を分ける

顔は目・鼻・眉・口・輪郭・耳に分けていきます。

目の分け方

まつげ・目玉・白目の3つに分けます。
まつげは、目尻の跳ねた部分を分けたほうが変形させやすくなります。
白目は、クリッピングの素材として利用したり、目玉を動かした際目玉に隠れていた部分が見えるので描き足しを忘れずに行います。

眉・鼻の分け方

大きく変形させる部品ではないので、単体で分かれていれば問題ありません。

口の分け方

上下でくちびるを分けます。
また、閉じたときは口内が見えなくなるはずなので、口内を分けます。
分ける際は、原画の状態より一回り大きめに描き足しをします。
ただ、このままでは線から口内がはみ出ているため、くちびるには肌色部分を描き足します。

 

これで顔の中の部品は分け終わりました。

輪郭・耳の分け方

輪郭は、髪があった部分も描き足して、肌色のみになるように塗ります。
丸い頭にしておくと立体感がつかみやすく、モデル化したときに動きがつけやすくなります。
耳は、輪郭と同じ部品として扱うのもよいですが、分けたほうがモデルのクオリティは上がるため、今回は分けます。

 

 

 

3.体を分ける

首・胴体・腕・足に分かれていれば十分です。

首は、顔を動かしたときに切れているのが見えないよう、多めに描き足しをします。
口のあたりまで描き足しがあれば十分です。

首の分け方

胴体の分け方

 

胴体は、リボンのように揺らしたいものがあれば分けておきましょう。

腕の分け方

 

腕は、上腕・前腕・手で分かれていると良いですが、今回は上腕・前腕で分けます。

足の分け方

 

足は、スカート・左脚・右脚で分けます。

 

これでイラストの加工は終わりです。
これだけ分ければ、十分なレベルでキャラクターを動かすことが出来ます。

 

Editor読み込み(インポート)について

最後に、Editorに読み込む準備をします。

EditorにPSDを読み込む際は、線画と塗りが別々になっている状態ではなく、結合して1枚のレイヤーにしておく必要があります。

 

また、部品を大まかにグループで分けておくと、Editor上で管理がしやすくなります。

 

Photoshopを使っている場合は、結合用のスクリプトがあるので使用することをオススメします。
データを保存する際は、PSD形式で保存してください。

以上でイラストの加工についてのチュートリアルは終了です。
動画では音声が付き、より理解しやすい解説になっているのでテキストと合わせて、ぜひご覧ください!

 

TIPS

■イラストの加工については以下のページも参考になるので、ぜひあわせてご覧ください。

Cubism Editor マニュアル:素材分けについて

Cubism Editor マニュアル:PSDのカラープロファイル

 

■1枚になっているイラストから分割・加工を行う方法のほかに、イラストを描いている段階でLive2Dで動かすことを意識しながらパーツレイヤーを分ける方法もあります。

 

続いて、イラストを動かす準備を行っていきます。
次項「2.イラストを動かす準備」頁へ

Copyright © 2017 Live2D. All Rights Reserved.