1-2.イラストの準備【Live2D入門講座】

-PR-


Live2D用イラストについて

Live2Dは絵を動かすソフトウェアです。
つまり単体では使えず、予め動かすイラストを用意する必要があります。

読み込むことのできる画像形式はPNGとPSDです。今回は、より簡単で楽なPSDを使っていきます。

PSDファイルを書き出せるのであればPhotoshop以外のペイントソフトで問題ありません。

  • 絵が描ける
  • レイヤー機能がある
  • PSDファイルに書き出しができる

上記の機能があれば問題ありません。(例:SAI,メディバンペイント等)
当講座ではCLIP STUDIO PAINTを用いて進めていきます。

Q.PSDファイルとは

「Adobe Photoshop」で標準利用される画像ファイル形式の一つ。
多くのペイントソフトでも書き出すことのできるデフォルトスタンダードな形式。

不具合情報

Live2D Ver 2.1.09 (2016/03/29) より古いVerではPhotoshop以外で書き出したPSDファイルが正常に読み込めない場合がある不具合があります。

講座用イラストについて

前置きはこれくらいにして、早速講座を進めていきましょう。

Live2D公式チュートリアルではシンプルモデルがあります。
しかし、Live2Dの初歩の初歩としてはシンプルモデルでもやや複雑です。

もっと簡単なモデルを使っていきましょう。

(´・ω・`)

今回動かすのはこちら。顔文字の「しょぼーん」です。
顔文字であれば画力に関わらず描け、テキストツールで作ることも可能になります。

キャンバス作成

それでは早速作っていきましょう。
講座では以下のサイズで進めていきます。

screenshot02036
  • 単位:px
  • 幅:1024
  • 高さ:768
  • 基本表現色:カラー
  • 用紙色:チェックなし☑

用紙色にチェックを入れる場合、PSD出力の際に含まれないようにしましょう。

Live2Dで動かすイラストサイズについて

Live2Dで動かすサイズに特に制限はありません。
個人的には一片1000~2000pixel程度を目安に作っています。

絵を描く

(´・ω・`) を描いていきましょう。

screenshot02038

テキストツール、あるいはブラシツールを用いて(´・ω・`)を描いてみましょう。
今回ほっぺたの赤線もおまけで追加してみました。今後の講座で解説を含めますので描き加えておいてください。

(´・ω・`) を描く工程を見たい方向けに動画も用意しました。

レイヤー別け

Live2Dに読み込むには各パーツごとにレイヤー別けておく必要があります。
(´・ω・`) のような顔文字の場合、各文字をレイヤー別けするイメージなります。

  1. 任意の選択範囲ツールで各パーツを選択
  2. 切り取り
  3. 新しいレイヤーに貼り付け

以上の手順で行いました。
※以下の解説動画中では選択ペンを使用しています。長方形選択や投げ縄ツールでも問題ありません。

レイヤーを別けたらレイヤー名を変更しましょう。
名称は重複せず自分がわかれば何でも構いません。

百聞は一見に如かず。レイヤー別けの工程は文字ではなく映像で見たほうが早いので以下に動画を用意しました。

レイヤーモードについて

また、レイヤーモードは基本的に「通常」に設定しましょう。
Live2D上で「乗算」「加算」を用いる事が出来ますが、初歩ではオススメ出来ません。

レイヤー名に付いての注意点

レイヤー名は重複しないよう注意しましょう。
重複していた場合、Live2D上でPSDを再インポート時に操作が増えて面倒になります。

致命的な事態にはなりませんが、今後のためにレイヤー名をつける癖を付けていきましょう。

全てのパーツをレイヤー別けを行うと以下のようになります。

screenshot02041
ほほの赤線だけは3つで1レイヤー使っています。
これは今後の解説に含める予定ですので同様に設定してください。

PSDファイル出力

さて、この時点でLive2Dに必要な構造は出来ました。
早速PSDファイルに出力していきましょう。

screenshot02043

任意の場所にファイルを保存します。
ファイルの種類はPhotoshopドキュメントを選択します。

screenshot02044

ファイル名は任意の名前をつけてください。今回はsyobon.psdとしました。

PSDのカラープロファイルはsRGBが基本となります。
書き出されるプロファイルの設定がsRGBとなっているか確認をしておいてください。

ファイル▶環境設定▶カラー変換 から確認できます。

screenshot02046

それでは次回からLive2Dへ読み込んで行きましょう。
次回もよろしくお願いします。

講座データのダウンロード

PSDデータを作る過程を飛ばしたい方向けに今回作ったsyobon.psdを用意しました。
以下からダウンロード出来ます。

psd download
元絵制作に慣れるのを兼ねて、PSDファイルを自分で用意することを推奨します。

 


【次】2-1.PSDインポート

-PR-