WEB系デザイナーがAfterEffectsでモーションデザインに挑戦した話《その2》
この記事は《その1》からの続編になります。
前回は「画面デザイン」までのステップを説明しましたので、「素材準備」をお話していきます。
概要 → 企画構成 → 絵コンテ → 画面デザイン → 素材準備 → カット作り → アニメーション → トランジションアニメーション → 音づけ → 書き出し
素材準備
AfterEffectsに取り込む用の素材を用意します。
どの素材をどんなデータで用意するかは事前に決めておくことが必要です。
テキストやシンプルな図形は、修正やアニメーションづけが楽なのでAfterEffectsのシェイプを使います。
その他はaiデータで用意しました。
ホンキKUMA
目・鼻・口元・顔・体でパーツを分けました
レイヤーを分けると同じaiファイルでAfterEffects上でパーツ分けができます。ピンク色と白色のクマを登場させるので、それぞれ用意しました。
吹き出し
素材サイトからSVGファイルをダウンロードしてaiデータにします。
ぐるぐる
手で描いたようなアニメーションをつけたかったので、illustratorで線を書き、AfterEffectsにパスをコピペして持ってくることにします。
会社ロゴ
シンボルのクマはすでにあるので、ロゴタイプのみaiデータを用意しました。
AfterEffectsに素材を読み込む
素材の準備ができたら、AfterEffectsに素材を読み込みます。
新規コンポジションを作成し設定したら、ファイル → 読み込み → 複数ファイル で該当ファイルを選択します。
読み込みの種類を「コンポジション - レイヤーサイズを維持」にして読み込みます。
種類の違いについては、こちらのページでわかりやすく説明されています。
次は「カット作り」です。
続きは次回！短くてごめんなさい！
▼続きはこちら