さあ、今日は
いよいよ『モーショングラフィックス』にトライしてみましょう！
その前にAdobeの座標空間を理解しましょう！
モーショングラフィックスとは
写真、イラスト、文字、図形、記号などの本来動きのなかった静止したグラフィックデザインをアニメーションとして動かし、音楽や効果音などと連動させる映像表現のひとつです。最近では静止画を動かすだけではなく、3DCGによるアニメーションの組み合わせも含めるようになってきています。
ドラマや映画のタイトル、TV局のステーションロゴ、番組のキュー、CMの企業CIなど。近年ではミュージックビデオなどでも用いられています。
カイル・クーパー
そして90年代にはいり、映画のタイトルデザイナーとして名を馳せたカイル・クーパーが出てきます。デジタル機器を使いこなす新しいグラフィックデザイナーです。
何と言っても『Se7en(セブン)』で名を馳せたと言って良いかと思いますが、それ以外でも有名なタイトルを手がけています。
映画『se7en セブン』(1995) OPタイトル byカイル・クーパー
https://youtu.be/FD7w2l88dl8
シャーロック・ホームズ Sherlock Holmes （2009年）エンディングクレジットタイトル
https://youtu.be/Vr2uPF83-m0
D.N.A./ドクター・モローの島 The Island of Dr. Moreau（1996年）
ミミック Mimic（1997年）
https://youtu.be/Kf0tnCQsBx4
スポーン Spawn（1997年）
https://youtu.be/zeA_adop2IA
スパイダーマン2 Spider-Man2（2004年）
https://youtu.be/tkmNF1BKfKQ
スパイダーマン3 Spider-Man3（2007年）
https://youtu.be/GQyl0R-H1uY
カイル・クーパーのインタビュー映像
Kyle Cooper interview on title design: Part 1/2
https://youtu.be/Y6kE0FccYkM
Kyle Cooper interview on title design: Part 2/2
https://youtu.be/QSwTZZWux4g
日本のモーショングラフィックス
日本映画のオープニングタイトルも見てみましょう！
これも凝ったタイトルワークの
踊る大捜査線 THE MOVIE 2 レインボーブリッジを封鎖せよ! OP
もうこれは名盤と言っていい！
https://youtu.be/-NnJ5C9gOck
踊る大捜査線 THE FINAL 新たなる希望 オープニングTV特別公開版
https://youtu.be/Y3Ad4Dl-Wv4
NEWSZEROオープニング(2012)
https://youtu.be/nyU6ND44UAk
NEWS ZERO｜Opening “Sakura”(2015)
https://youtu.be/rxo1_YvJRss
そして「モーションデザイン」へ
そして、最近はモーショングラフィックスという言い方がモーションデザインという言葉に変わってきているかもしれません。これは動きのあるグラフィックスという意味合いから、モーションをデザインする というより能動的な個性を生み出す言葉に変容してきていると思います。ここで言う「デザインする」は私たちの学んでいる「設計する」という言葉にそのまま置き換えられると思います。
3年ぶりに「Motion Plus Design Tokyo」が来年6月に開催されます。楽しみですね。
Motion Plus Design Tokyo 2019
さて、
実際のモーショングラフィックスを作ってみましょう！
合成エフェクトの基礎 ーAfterEffectsの基礎ー
- RGBチャンネルとαチャンネル(アルファ・チャンネル)、マスクチャンネル
- レイヤー(階層構造)
- 描画(合成)モード
- コンポジション
- キーフレーム アニメーション/グラフエディター
- マスクパス
- ヌルオブジェクト(ダミーオブジェクト)
- プリコンポーズとネスト化(親子関係)
- トラックマット
- レンダリング、ファイル書き出し
- 画像の調整
- エフェクトフィルター
- 平面レイヤー/シェイプレイヤー/シェイプマスク
- テキストツール
- エクスプレッション
- カメラ、ライトオブジェクト、３Dレイヤー
- トラッキング(2D/3D)
このムービー制作で学ぶ要素は
- 平面レイヤー
- グラデーション(エフェクト)、ドロップシャドウ(エフェクト)、ラフエッジ(エフェクト)
- シェイプレイヤー(線と塗り)
- 楕円形、多角形の作成とキーフレームアニメーション
- パスのトリミング
- トラックマットを用いた文字の出現
さて、順を追って作っていきましょう。
新規プロジェクトの作成
「コンポジション」/「新規コンポジション」で新しいコンポジションを作成します。
“コンポ１” とします。
以後は”コンポ１”の中で作業を行っていきます。
平面レイヤーの作成
「レイヤー」/「新規」/「平面レイヤー」を作成を選びます。これは背景(BG)になります。背景は色をつけたり、グラデーションにすることができます。
「エフェクト」/「描画」/「グラデーション」を選んでください。
平面レイヤーにグラデーションがはいります。
エフェクトコントロールパネルでグラデーションのパラメーターを調整します。
グラデーションの開始(始点)、開始色、終了(終点)、終了色、グラデーションのシェイプ(直線状/放射状)を選択します。
シェイプの作成
次に、「レイヤー」/「新規」/「シェイプレイヤー」で「楕円形」を選びます。
正円が描けます。シェイプレイヤーには属性があり、塗り、線、などが追加、変更できます。
「コンテンツ」の右端にある「追加」メニューから
「線」を選び、
トップアイコンメニューから「シェイプレイヤー」を選択することもできます。
今回は塗りはナシ、線の太さを40としてください。
小さい円が大きくなりながら円の太さを小さくしていきます。
もうひとつのシェイプレイヤーの作り方を教えます。トップメニューアイコンから「シェイプレイヤー」アイコンを選び、「楕円形ツール」
そのまま描くと楕円になってしまいます。正円を描く場合には「Shift」キーを押しながら描いてください。
パスのトリミング
では次はパスが描かれていくという操作を行います。
これにはパスのトリミングを使います。
「コンテンツ」 から追加を押して 「パスのトリミング」を選択してください。
次に中のパラメータを「終了点」にキーフレームを打ちます。
0％から100％へのキーフレームを打つと線がだんだん伸びていきます。
ちょっと初めてだと難しいかもしれません。あまり無理をせずにここまで頑張ってやってみましょう！
そして、短いジングル音を当ててみましょう。そうするとなんとなく雰囲気が出てきます。フリーの音源サイトなどもあるので、そこで選んでみてもよいと思います。
フリー音源サイト http://musicisvfr.com/
シェイプレイヤーを作成する参考動画をピックアップしておきます。
参考チュートリアル
https://youtu.be/X4nDHeb8-38
参考モーグラ
AfterEffectsの本格的なアニメーションをやりましょう。
実際のモーショングラフィックスを作ってみましょう！
このムービー制作で学ぶ要素は
- 平面レイヤー
- グラデーション(エフェクト)
- シェイプレイヤー(線と塗り)
- 円の作成とキーフレームアニメーション
- パスのトリミング
さて、順を追って作っていきましょう。
まずは Illustrator でロゴを作成します。
その時の注意は、
文字を「アウトライン化」すること、レイヤーに分けて保存すること。
Illustratorで新規ドキュメントを作成。「フィルムとビデオ」/「HDV/HDTV1080」
HDのドキュメントにロゴを作成します。
作成したロゴを「アウトラインを作成」でアウトライン化します。
各文字を「レイヤー」に分けておきます。「レイヤー」に分けておくことであとでいろいろな操作が出来るようになります。
AfterEffectsでファイルを読み込みます。
その時に必ず読み込みの種類を「コンポジション・レイヤーを維持」、「読み込みオプション」を「コンポジションを作成」にチェックします。
AEで作成したシェイプレイヤーと同じものが出来ます。
そして、
前回と同じシェイプレイヤーとアニメーションを作ります。
最後にテキストを配置して出現させます。
その時に、シェイプレイヤーの中からワイプで出現するようにしたいと思います。
そのために トラックマット を使います。
トラックマットは アルファチャンネル(マスクチャンネル)を持っていないレイヤーに対してマスクを参照させる働きがあります。
トラックマットを使うことでワイプや違うレイヤーの中に見え隠れするレイヤーを作り出すことが出来ます。
使いこなせるようになると面白い効果がいろいろと出せるようになります。
トラックマットのメニューは隠れている場合があります。タイムラインの下部にある「スイッチ/モード」でメニューを入れ替えてください。
トラックマットはレイヤーの透明度をすぐ上のレイヤーのマスクを参照する、というルールがあります
必ずトラックマットはマスクが欲しいレイヤーのすぐ上のレイヤーに置かなければなりません。
このAE上の特有のルールがあることを理解してください。
その上でトラックマットには次の2種類があります。それぞれ参照するチャンネルが違うことを理解すること
アルファマット・・・アルファーチャンネルを参照するマスク
ルミナンスマット・・・ルミナンス(RGBの明るさ情報を参照するマスク)、つまりRGBチャンネルの明るさを参照しています
最初のうちは難しく感じるかもしれませんが、慣れてくるとトラックマットを使った面白い効果を作ることが出来ます。
さて、
本日のデータはこちらになります。
お疲れさまでした。
