Illustrator Tips – Preparing Assets for Animation
この投稿では、2Dキャラクター開発のためにAdobe Illustratorをどのように使用できるかを紹介し、After Effectsなどのプログラムにエクスポートして命を吹き込むことができます！
これを実証した1本のビデオがShippoビデオです。
キャラクター開発からアニメーションまで、最も重要な側面の1つは、レイヤーで作業し、アニメートするものはすべて個別のレイヤー上にあるということを考慮に入れることです。 アニメーターや Adobe After Effects での作業経験のある人に作品を渡すときに、何をすればよいかが正確にわかり、より効率的に作業できるように、一貫したレイヤー構造を設定することが重要です。
レイヤー パネルに表示されている Illustrator の完全なキャラクターは、すべてプログラム内で作成された個々の要素で構成されており、キャラクターが形を持つように慎重に配置されます。 たとえば、目が見えるようにするには、頭の上にあるレイヤーになければなりません。 上の画像では、目と口が一番上のレイヤーになっていますが、これはアニメーションのキーポイントになるからです。
体のパーツを作成し、名前を付けます。
頭と髪は、マージして 1 つのレイヤにすることができます。
目 & 口
目は楕円ツールで作成した2つの単純な円
この場合、右目と左目という名前を付けて1つの目を作成しますが、目は1つのレイヤーに統合してはならず、別々の名前にしなければなりません
目を作成したら、右目と左目にそれぞれ名前を付けなければなりません。 角膜のある、より複雑なキャラクターの目を作成する場合も、同じように左と右という基準を使用することになります。 口を作るには、ペンツールを使って曲線を作成する必要があります。
Adobe Illustrator のペン ツールに慣れていれば、曲線を描くには、マウス キーを押して希望の曲線を作成し、曲線の終点をプロットする必要があることをご存知でしょう。 この場合、曲線を下方向に動かすと笑顔になり、上方向に動かすと悲しげなしかめっ面になります。 最終的にはこのようになります。
最終結果はこのようになります。
これは、以前行った、キャラクターでうまく機能する口元です。
レイヤーは色で示されます
青いレイヤー – 左目
緑のレイヤー – 右目
紫のレイヤー – 頭と髪 (HEAD)
赤いレイヤー – 口
レイヤーパネルを見ると、キャラクターのすべての要素が色で表現されたレイヤーを持っていることがわかります。 前述のように、口
は赤いレイヤーの上にあり、レイヤーの隣に色の付いた線が見え、レイヤーの右端に色の付いた四角が見えます。 口の下の右目は緑のレイヤーに、左目は紺色のレイヤーに、髪を含む頭部は紫のレイヤーに配置されています。
レイヤーはいつでも並べ替えられるので、レイヤーが散らかっていても気にせず、レイヤーを並べるのを忘れないようにしましょう。 画像を見ると、一番下のレイヤーが頭で、目と口が頭の上にあるというのは簡単です。
キャラクターの残りの部分は、頭と同じ原理で設計されています。 そして胴体。 より複雑な体の動きを作成する場合は、腕の関節として機能するピボットを作成する必要があり、それは
肘になり、脚は膝になります。
腕を別々に動かすには、別々のレイヤーに配置し、左と右という名前を付けなければなりません。
レイヤーパネルによると、右腕はシアンのレイヤーにあり、左腕はグレーの腕にあります。
アートワークで選択すると、黄色の選択マークが付きます。
最終的に、このようなものが出来上がります。
ただし、足は左右にレイヤー化されています。
レイヤー構成を見ると、すべてのレイヤーが色分けされ、ぶつからないように並べられていることがわかります。 特定のレイヤーに右と左の名前が付けられているのがわかりますが、これらは目、腕、足です。
ファイルが配置されている方法によって、このキャラクターをアニメーション化するとなると、アニメーターにとっては、どの要素をアニメーション化できるかが非常に首尾一貫したものになります。 主に、脚は動きを意識してデザインされていないにもかかわらず、このアニメーションを動作させるために多くのエフェクトがあります。