イマジカデジタルスケープ 短期集中クリエイティブ講座

イマジカデジタルスケープ・AfterEffects・Photoshop・HTML・CSS・JavaScript・1日トレーニング

Web・動画・映像・ゲーム・DTP・CG・Adobe Creative Cloud・キャリア・就活に

お客様index

企業・自治体のお客様に 業務効率化、コスト削減に
クリ博登録者・学生の方に 割引トレーニングはコチラ


イトウ先生のTipsnote


イトウ先生のTipsnote:目次

【 AfterEffects CC 2018:モーショングラフィックステンプレート 】

こんにちは、イマジカデジタルスケープの伊藤和博です。
今週はAfterEffects CC 2018から、「モーショングラフィックステンプレート」をご紹介します。
モーショングラフィックステンプレートとは、AfterEffectsで作成したモーショングラフィック(テキストや図形などで作成したアニメーション)そのもの、またそのモーショングラフィック内で使用しているカラーやフォントなどの各プロパティのみをテンプレートとして標準化し、再利用また再編集を容易にする機能です。
AfterEffectsのモーショングラフィックステンプレートの使い方は大きく2つあり、AfterEffectsのみで使用する場合と、Premiere Proと連携して使用する場合があります。
Premiere Proと連携する場合は、2017年最後のブログ、
「イトウ先生のTipsnote【 Premiere CC 2018の新機能:レスポンシブデザイン 】2017-12-27」の記事で使用している、AfterEffectsで作成したグラフィッククリップそのものになりますので、「Premiere Pro CC 2018で使用するグラフィッククリップをAfterEffectsで作成する方法」と意味合いと捉えていただいて構いません。

さっそくやってみよう!

まずは、以下のようなモーショングラフィックスがあったとします(約6秒。音は鳴りません)。



この時、テキスト部分である「AfterEffects」や、テキストを囲む矩形の「線のカラー」などを変更し、何種類か別のモーショングラフィックスも作成したい、とします。
通常は、単にタイムラインパネルやコンポジションパネル上でテキストを入力し直し、線のカラーを変更して、別名で保存する、という操作になるかと思いますが、変更する箇所が「テキスト」と「線のカラー」と決まっている場合は、この「テキスト」と「線のカラー」のプロパティのみをモーショングラフィックステンプレートに登録し、テキストと線のカラーを変更する行為そのものを、テンプレートを変更することで修正する、という使い方が可能です。
まず、このデータはシェイプレイヤーとテキストレイヤーでできています。

Aecc18_mgt002

ウインドウメニュー > エッセンシャルグラフィックスを選択し、「どのコンポジションの、何のレイヤーが持っている、何のプロパティをテンプレートにするか?」を指定するため、エッセンシャルグラフィックスパネルにあるマスターから、現在使用しているコンポジション名を選択します。

Aecc18_mgt004

次に、エッセンシャルグラフィックスパネル内の「サポートするプロパティのみ」をクリックします。すると、指定したコンポジション内で、テンプレートとして登録可能なプロパティだけを、タイムラインに表示します。

Aecc18_mgt006

次に、テンプレートとして登録したいプロパティのみをエッセンシャルグラフィックスパネルにドラッグして登録します。今回は、テキストと線のカラーを登録したいため、「テキスト」(ソーステキスト)と「線のカラー」をエッセンシャルグラフィックスパネルにドラッグします。

Aecc18_mgt007

Aecc18_mgt008

あとは、エッセンシャルグラフィックスパネル上で、線のカラーとテキストを再入力すれば、タイムライン上のレイヤーにもその変更が即時に適用される、というものです。

Aecc18_mgt009

そのコンポジションに含まれる、頻繁に変更する可能性のあるプロパティのみをエッセンシャルグラフィックスパネルに登録し、変更する行為そのものはエッセンシャルグラフィックスパネル上から行うことで、いちいちタイムラインの各レイヤーを展開して編集しなくてもよくなる、ということになります。

モーショングラフィックステンプレートとして書き出し

Premiere Pro CC 2018のグラフィッククリップとして使用する場合は、このテンプレートに対して名前をつけて、エッセンシャルグラフィックスとして書き出すと、Premiere Pro上のエッセンシャルグラフィックスパネル上で使用できるようになります。

Aecc18_mgt010

Premiere Pro CC 2018のエッセンシャルグラフィックスパネルを確認すると、AfterEffectsで作成したグラフィックスが確認できます。

Aecc18_mgt013

AfterEffectsでエッセンシャルグラフィックスパネルに登録した各プロパティは、Premiere Pro上でも再編集することが可能です。

Aecc18_mgt015

なお、他のPCや別の環境にこのテンプレートをファイルとして渡す場合は、書き出し時に「ローカルドライブ」に書き出します。テンプレートファイルとして拡張詞mogrtのファイルが書き出させるため、Premiere Pro のエッセンシャルグラフィックスパネルから、「モーショングラフィックステンプレートをインストール」をクリックして読み込むことが可能です。

Aecc18_mgt014

AfterEffectsのみを使用する方は、頻繁に編集するプロパティをエッセンシャルグラフィックスパネルに登録して作業効率向上に、Premiere Proを両方使う方は、特にテロップなどの作成に非常にいい連携のとれた機能になりますので、ぜひ使ってみてください。

関連講座

↑ページTOPへ

| カテゴリ | | Web | DTP・デザイン | CG・動画・映像 | キャリア・就活 |
| お客様 Index | | 企業・自治体のお客様に | 学生の方に |
| 目的別・状況別 Index | | Webデザイン入門セミナー | 映像編集入門セミナー | DTPデザイン入門セミナー | 魅力的なポートフォリオ作成 |
| Adobe CCを覚えたい方に | | Photoshop CC 2015の使い方・基本 | Illustrator CC 2015使い方・基本 |
| 画像をきれいに編集する方法 | 読みやすい文字の組み方 |
| HTML / XHTML / CSSの基礎知識 | HTML5 / CSS3の基礎知識 | JavaScriptの基礎知識 | jQuary・jQueryMobileの基礎知識 |
| Dreamweaver CC 2015の使い方・基本 | InDesign CCの使い方・基本 |
| AfterEffects CCの使い方・基本 | AfterEffects CC 2014の使い方・実践 |
| Premiere Pro CC 2014の使い方・基本 |
| Webの基本をマスターしている方 | | 棚橋弘季氏の直伝、ユーザー中心のWebサイト設計 | 益子貴寛氏が伝授するCSS実践テクニック |
| 矢野りんさんに学ぶ、”使える”デザイン基礎知識 | こもり氏のHTML+CSS基礎 | 平塚氏のマーケティング基礎 |
| 坂本氏のIA入門 | Webに関わるすべての人の「Webリテラシー」講座 | 神森勉氏に学ぶコーディング講座 |
| 森川眞行氏に学ぶ、大規模サイトの構築・運用マネジメント |
| 就職・転職・就活中の方へ | | 模擬面接セミナー(個別FB付) | エントリーシートブラッシュアップセミナー |
| 面接・職場で使えるビジネスマナー研修 | 職務経歴書添削セミナー |