目次

  1. Illustratorで目のパーツを作成する
  2. Illustratorで口のパーツを作成する
  3. Character Animatorに読み込み
  4. キャリブレーションと微調整

----------------------------------------------------------------------------------------------------------------

作業に入る前に、練習用サンプルファイルをダウンロードしておきましょう。

 

以下のURLからAdobe Stock素材をダウンロードください

AdobeStock_299292053.ai

https://stock.adobe.com/jp/images/pink-pastel-background/339060225

 

Adobe Illustratorを使用します

手順1/4 Illustratorで目のパーツを作成する

 

Illustratorを使って、元となるキャラクターを作ります。練習用サンプルファイルをIllustratorに取り込み、パーツの調整をします。今回は既存のイラストを使いますが、自分でゼロから作ったキャラクターでも同様です。

 

「レイヤー」パネルで「Layer 1」を展開し「<長方形>」を選んでDeleteキーで削除します。これで、最終的に不要となる背景を削除できます。

 

「ダイレクト選択ツール」を選択し、右目(向かって左側)の目をクリックして単独選択した後、「編集」→「カット」を実行します。

 

黒目のあった場所に薄く跡が残るので、同じくダイレクト選択ツールで選んだ後にDeleteを押して消去します。

 

「編集」→「前面へペースト」を実行すると、元あった場所に黒目が貼り付けられると同時に、新しいレイヤーとして独立した状態になります。

 

右目(向かって左側)の目のパーツを選択し、コピー&ペーストして同じパーツを複製します。

(※ショートカットキーを使いたい方は、Option(Mac)またはAlt(Windows)を押しながらドラッグすることで、同じパーツを複製できます)

 

複製したパーツは、選択ツールを選択して閉じた目のように横長に変形させます。パーツを囲むバウンディングボックスのアンカーポイント(白い正方形)をドラッグして、横長に変形させた後、元の目の上に重ねておきます。

 

レイヤーパネルで、SHIFTキーを押しながら目の2つのパーツを選択し、「オブジェクト」メニューから「グループ」を実行します。レイヤーパネル上では、2つのレイヤーが「グループ」に入った状態になります。

 

グループの名前を「+Right Eye」、開いている目のレイヤー名を「Right Eyeball」、閉じた目のレイヤー名を「Right Blink」にします。「Right Blink」の左側にある目玉のアイコンをクリックして、非表示にします。このレイヤーの名前は、Character Animator内でも同様に、パーツ名として扱われます。

 

左目(向かって右)も同じように作業し、グループ名を「+Left Eye」、レイヤー名を「Left Eyeball」、「Left Blink」に変更します。

手順2/4 Illustratorで口のパーツを作成する

 

ダイレクト選択ツールで次に口のパーツを選択し、「編集」→「カット」 「編集」→「前面へペースト」を実行します。レイヤー名を「Neutral」に変更します。そのレイヤー選択して「編集」→「コピー」 「編集」→「同じ位置にペースト」します。

(※ショートカットキーを使いたい方は、Command(Mac)またはCtrl(Winodws)を押しながらCを押して「コピー」、その後Command(Mac)またはCtrl(Winodws)を押しながらFを押すと、同位置に「ペースト」することができます。)

 

「ダイレクト選択ツール」を選択し、口が開いた状態に見えるように加工していきます。

 

バウンディングボックスのアンカーポイントをドラッグしたまま移動させることで、自由に変形させることができます。

 

大体の形に変形させたら、もう一度アンカーポイントをクリックすると、ハンドルが表示されます。

 

各ハンドルを動かして、なだらかな曲線になるように整えます。

 

開いた状態の口をコピーして前面にペーストを10回行い、各レイヤーの名前を以下の画像と同じにします。本来は発音ごとに口の形を変えるのがベストですが、今回は「閉じている」「開いている」の2つに簡略化します。

 

口のレイヤーを、SHIFTキーを押しながらのクリックで全て選択し、「オブジェクト」メニューの「グループ」を適用した上で、グループ名を「+Mouth」にします。

 

一番上のグループ名を「Head」にし、ファイルを保存してIllustratorを終了します。

手順3/4 Character Animatorに読み込む

 

Character Animatorを起動し、ツールバーから「シーン」→「新規シーン」を選択します。

 

「ファイル」→「読み込み」を選択し、Illustratorで作成したキャラクターのファイルを読み込みます。

 

キャラクターの画像を、プロジェクトパネルからタイムラインの中にドラッグ&ドロップして配置します。

手順4/4 キャリブレーションと微調整

 

カメラとマイクパネルで「キャリブレーション」をクリックし、ユーザーの顔を認識させます。これにより、まばたきや口の動きなどをより正確に追従するようになります。

 

プロパティパネルの「トラックビヘイビアー」で位置とスケールの値を調整して、画面内のキャラクターの位置と大きさを調整します。今回は下記数値で調整しています。

 

位置Y:「505」

スケール:「230%」

 

以上で、目は見る方向とまばたき、口は表情と音声に追従して動くようになります。今回のチュートリアルは「開いている口」と「閉じている口」の2種類で制作しましたが、Illustratorのファイルを複製した上で、口の画像をレイヤー名の発音に合わせて加工すると、より表情が豊かになります。

(※以下の工程でIllustratorでのレイヤー複製方法をご紹介します)

手順(応用) バリエーションのレイヤーを複製する

 

Character Animatorは発音に応じて細かく口の形を設定できます。細かく設定したい場合は、口が空いたレイヤーを同じ位置に10回コピー&ペーストした上で、レイヤー名を下の画像と同じに設定します。

 

最後に、全パーツを含むグループレイヤーの名前を「Head」に変更します。この一連の作業により、Character Animatorに取り込んだ際に、ユーザーの顔の動きにあわせて、キャラクターが動くようになります。

アドビのロゴ

アカウントにログイン