After Effects 勉強の軌跡④ | 基本的な習作と立ち返り

横スクロールの習作

Adobeがオンライン講座「Illustratorユーザーのための モーションデザイン ことはじめ」シーズン2の第一回目を参考に作成しました。
車が揺れる動きがちょっと下手ですね。。
この横スクロール、他のチュートリアル動画を含めて何度かトライ&挫折していたので、ひとまず成功してうれしいです。

テキストアニメーションの習作

これはおふざけで作成した習作ですが……。今年は非モテ同盟がデモしないっていうから。
画面外からバインッて叩きつけるように現れるテキストってやってみたくて。

イラストアニメーションの習作

以前作成したときはパラパラ漫画的な作り方をしていましたが、パーツごとに動かすことも面倒くさがらずにやれるようになりました。
イラレデータのレイヤー構造も動かしたいパーツごとに分けて……と、ちゃんとできるように👍

以前作成した動画

こちらを作成したのは半年前ですね。この頃に比べたらAfter Effectsの理解度はぐんと増したことが分かります。

グラフを動かしてみよう

その1

いよいよグラフです。ちょうどいい題材がなかったので、このブログのアナリティクス結果で作成してみました。
シェイプを動かしたりマスクやワイプといった基本的な技術で作れるので、難易度は高くなかったです。が、グラフを何個も出してるうちにレイヤーの数が増えてったり(プリコンポーズというグループ化みたいなやつをかければ済むんですが)、時間のペース配分に戸惑ったり、設計の方の経験が足りなくて苦労しました。

その2:インフォグラフィックスにも挑戦

よくあるピクトグラムを使ったインフォグラフィックスを動かしてみました。見る方は何度も見てきましたが、アニメーションの実装は初めて。なるほどなるほど。
男性も女性も左端の1つだけイラレデータから読み込んで、After Effectsでリピートをかけています。このリピート、便利ですね。

目移り、のち立ち返り

YoutubeでAfter Effectsのチュートリアル動画を国内外のものを色々見ていると、他のおすすめ動画もAfter Effectsのチュートリアル動画で占められるようになります。

After Effectsでできることって本当に幅広いんですよ。そして、そもそもYoutube動画の編集にAfter Effectsを使ってる人も多いから、本場っちゃあ本場。そりゃ大量のチュートリアル動画ややり方が溢れている。
関心しながらさらにチュートリアル動画を見進めーー、しかしここで立ち止まって考えてみた。

エフェクトばりばり使いこなしてメッチャカッコいい動画編集している人もいるけど、自分はAfter Effectsでやりたいこと、目指していることは何だっけ? 動画編集マンになりたかったっけ??

「After Effects 勉強の軌跡①」で私の現状をまとめていましたが、勉強も進んできたことですし再度まとめてみます。

私の現状2023

  • IllustratorやPhotoshopは普通に使える。
  • AEは基本的なことから勉強中。苦手意識は払拭した。
  • イラスト仕事で、動画編集に適したパーツ作りがしたい。
  • WEBページに組み込むLottieアニメーション作成を深めたい。
  • 自分でもイラストを生きてるように動かしてみたい。

うん、動画編集じゃなくてモーショングラフィックス(あるいはモーションデザイン)方面なんですよ、私がAfter Effectsでやりたいことって。
チュートリアル動画を見て目移りしちゃってましたが、勉強を進める方向を今一度確認したのでした。

シェイプアニメーションの習作

あたらめて、習作制作再開。
これ、やってみたかったんですよ! カートゥーンサルーンみたいなやつ。
友達が布製マスクに刺繍してくれたアイヌ文様を図案として。アイヌ文様のグルグルとシェイプアニメーションがぴったりマッチしてますね。あとは魅せ方をブラシュアップすればもっと素敵になるんで、もっと経験値を積もう。

もっと紋様のデザインを引き立たせたいと頭の片隅に引っかかってたので、微調整しました。
渦巻きの見え方のタイミングを揃えたり、主線以外にもタイミング合わせて効果線を沿わせたり。
変わったような、あんま変わってないような。
いや、良くなってる!

手描き風イラストの習作

その1

手書き風文字の要領で線画イラストをやってみよう!という習作です。
手や髪の部分はペンツールでマスク、それ以外のシンプルなパーツはパストリミングで出現させています。

線のビブりは、過去に仕事でイラレでパスのラフをかけてからちょっと動かした複製レイヤーを数枚用意し……とアナログなことをしてましたが、After Effectsのタービュレントディスプレイスで実装できるんですね。勉強を進めるごとに効率的なやり方もマスターできる!
どこかのブログ記事を参考に実装したんですが、mooographさんのチュートリアル動画でも解説されているのを作り終わってから発見。次はそっちの方で試してみよう。

その2:やっぱ気になって翌日修正

やっぱ気になってタービュレントディスプレイスを修正しました。
また、線画完了後にカラーイラストに差し替えて動かすことに。生き生きしてていいですね♪

動かしたあと、腕がズレてるので、まだ詰めが甘いです。。

ちなみにですが、今回動かしたのはストックイラストで販売している作品です。PIXTA、Adobe Stockで販売中です。