Character Animator チュートリアル01　Photoshopでのキャラクターデザイン

ここではAdobe Character Animator 2020を使って実際にキャラクターを動かし、VTuber配信できるまでのチュートリアルを紹介します。

まずはチュートリアル01ということで、Photoshopを使ったキャラクターデザイン、レイヤー分けを紹介していきます。

この記事を読むことで

といったことを知ることができます。

なので

という方はこの機会に是非チャレンジしてみてください！！

気になる箇所があれば、目次からジャンプしてもらうと効率的かと思います。

それでは始めていきましょうか。

Character Animatorチュートリアル01-1：全体図の作成

線画、ラフの作成

しっかりとキャラクターデザインをしていくなら、線画・ラフの作成から入りましょう。

僕は「CROQUIS」にさっと下書きをして、スマホからPCに写真を取り入れています。

取り込んだ写真をPhotoshopで開き

などを適用させると、簡単に線画を抽出することができます。

もちろん、PhotoshopやCLIP STUDIOなどに直接描いて頂いても構いません。

Photoshopを使って色を塗る

線画が描けたら、「ラフ→仕上げ」という肯定で色を載せていきましょう。

僕は神絵師さんではないので、ザックリと色をつけました。

個人で使う分には、輪郭や目がしっかり描き込まれていれば問題ないかと思います。

※Photoshopを使って色を高速で塗る方法を下記にて紹介しているので、参考にしてください。

Photoshop塗りつぶしツールで隙間をなくす方法～自動選択ツールを上手く使おう

またCharacter Animatorで早く動かしたいからと言って、初めからレイヤー分けをする必要はありません。

最初はレイヤー分けを気にせず、好きなようにレイヤーを使って全体図を描いていきましょう。

色塗りまで完成したら、全てのレイヤーを選択し「Ctrl + E（macの方はcommand + E)」でレイヤーを結合します。

※色塗りで各パーツごとにレイヤーを分けている場合は全てのレイヤーを結合せずに、パーツごとにレイヤーをまとめておくと良いと思います。

Character Animatorチュートリアル01-2：各パーツごとへ分離

各パーツごとにレイヤー分けをしていきます。

迷った場合は、図を見たり、Character Animatorのサンプルキャラクター「Rin」ちゃんのPSDファイルを参考にしてください。

※ちなみにこのキャラクターのレイヤー構造は「Rin」ちゃんのレイヤー構造を参考にしアレンジしています。

Head 直下の+レイヤーの作成

ここから、作成したキャラクターをレイヤーごとに細かく分けていきます。

まずは図のように

とレイヤーをHead直下に分けていきます。

レイヤーを分ける方法は様々あると思いますが、僕はレイヤーを「Ctrl + J」で複製しては、消しゴムツールでいらない箇所を消して整えていました。

知人から聞いた方法では「選択範囲」→「色域選択」を使って目的の箇所を抽出するという方法もありました。

これに関しては操作しやすい方法で良いかと思います。

実際に各レイヤーごとに分けるとこんな感じになります。

+Noseのレイヤーには、鼻の影も一緒に入れておきましょう。

Left , Right Eyeのレイヤーの作成

続いて、目のレイヤーを作成していきます。

今回は、ショックverとキラキラverを追加してみました。

Right Eyeも同様に作成します。

今回は時短したかったので、Left Eyeのレイヤーを全て「編集」→「変形」→「水平方向に反転」をして「▼Right Eye」へ設定しました。

通常時の目が描けてしまえば、そこにエフェクトを追加するだけでバリュエーションを増やすことができるので、余裕があれば「ハートマークの目、ビックリした目」などを増やしておくと良いと思います。

Mouthレイヤーの作成

続いて口のレイヤーを作成していきます。

口のレイヤーは割と数があるので、僕はペンツールでさっと口元の輪郭を描き、「編集」→「変形」→「ワープ」を使って形を整えました。

その他の口は、Character Animatorのサンプル「Rin」ちゃんのMouthレイヤーを参考に描きました。

色調に迷って時間を無駄にしたくなかったので、色は「Rin」ちゃんのMouthレイヤーを参照。

あとはひたすら頑張って必要な分のレイヤーを作成します。

計14個のパターンを作れば完成です。

Bangsレイヤーの作成

Bangsレイヤーでは横髪と前髪の影を各レイヤーごとに分けました。

この図だけを見ると、なんか怖いですよね(*´Д｀)

僕は横髪はたくさん動いて欲しいなと思ったので、BangsとHairと2種類に分けていますが、一種類だけでも構いません。

消しゴムツールや選択範囲を上手く設定して、目的のパーツを各レイヤーごとに分けてしまいましょう。

横髪レイヤーの並びは上側にあってほしい髪を上のレイヤーへ、下側の場合は、下のレイヤーにしておきましょうね。

この辺りが違うと実際にCharacter Animatorで動かすときに違和感が出てくるので。

UpperBodyの作成

さいごにUpperBodyのレイヤー分けを行っていきます。

UpperBodyは体のファイルとしているため、「+Hair flower」と「+Hair Back」はUpperBodyのファイルの外に出しています。（言い換えるとHeadファイルの一番下）

理由は単純で、「+Hair Back」の後ろ髪は「Body」の体よりも後ろ側にあるからです。

この辺りはどのパーツがどこのファイルに入っているかが分かれば問題ありません。

※あと襟とリボンの合わさった「collar」レイヤーと、体を表す「Body」レイヤーは一つのレイヤーにまとめても問題ありません。

「Rin」ちゃんのPSDファイルがこのように分かれていたので、真似しただけです。

ただ、+R ribbonと+L ribbonはリボンの左右をひらひらと動かしたいため、レイヤーを分けています。

Character Animatorチュートリアル01-3：エフェクトの追加

ここまで無事終えることができたら、一通りPhotoshopでのキャラクターデザインを終了しても構いませんが、余力のある方やもっとエフェクトを増やしたいという方に向けて追加エフェクトをいくつか紹介します。

僕は上図のような3つのエフェクトを追加しました。

+Questionについては、Character Animatorで昇順、降順でアニメーションを動かす設定ができるので、1→2→3→4とアニメーションが動くように各レイヤーを作成しました。

また、Blushの照れの作成方法ですが、ピンク色を頬辺りに塗ってから「フィルター」→「ぼかし」→「ぼかし(ガウス)」を適用させることで照れの表現を作ることが可能です。

ちゃんと色塗りして作るべきだと思いますが、時短できるのでこちらの方法を採用しました。

Character Animatorチュートリアル01-4：顔の左右上下方向を設定する

さらに精度を向上させたい場合は、顔の左右上下方向の設定をすると、よりキャラクターアニメーション感が出せると思います。

イメージは下図のような感じです。↓

設定の仕方は単純で、Character Animatorチュートリアル01～03で作成した「Head」下のファイル・レイヤーをすべて一つのファイルにまとめ、「+正面」などと各向きの名前にファイル名を変えていきます。

このファイルを追加したい方向分だけ「Ctrl + J (macの方はcommand+J) 」で複製しファイル名を下記のように書き換えましょう。

今回は、必要最低限欲しい方向である左右方向、下方向を追加しました。

設定方法は至ってシンプルで、変形したいパーツのレイヤーを選択した状態で「編集」→「変形」→「ワープ」を適用させます。

目の向き、顔の向き、髪型の向き、口の向きなど必要なパーツを変形させれば完成です。

Character Animatorで設定できる上限は

の7方向です。

※（ 　）の中は方向の数

増やせば増やすほど、表現のバリュエーションが増えるためオススメです。

ファイル名を増やす場合は、分かりやすいファイル名で「+左斜め」などと名前を付ければOKです。

これらをCharacter Animatorに反映させる方法はCharacter Animatorチュートリアル02で紹介しているので、こちらからご覧ください。

Character Animator チュートリアル02　Chの使い方・撮影方法

これでCharacter Animatorチュートリアル01-Photoshop編は終わりになります。

Photoshopでのキャラクター制作が一番大変かつ楽しい時間だと思うので、チャレンジする方はそれなりの時間を確保した上で挑戦してみてください。

お疲れ様でした。