飲むアフターエフェクツのCMの作り方【After Effects チュートリアル】

あのCM、作ってみた

まずはチラッと完成版を見てほしい！

完成版・ビデオチュートリアルはコチラ！

①撮影の様子

そもそも撮影ってどんな感じで行っていったのか
今回はダストマンの事務所で、ダストマンとカメラマンの二人で行いました。
まず照明について
１：青いフィルターをつけたスポット照明
　　背景の色補完と、背景色をよくさせる用
２：通常照明を一つ
　　人物にあてる照明用
３：ディフューザーを噛ませた照明
　　２の照明だけだと影が落ちすぎるのでそれを和らげる用

カメラマンさん概要
iDS STUDIOより山口さんにお願いしました！

②素材、スクリプトのDLリンク、編集について

◆お勉強用素材はコチラからダウンロード！

◆テキストをバラバラにするスクリプトはコチラ
(値段のところに０と入力すれば無料で入手することができます）

編集について
今回はPremiereではなくDaVinci Resolveを使用していきます。
DaVinci Resolveの詳細はコチラ
After Effectsの作業に入る前に撮影したデータにどんな処理をしたのかだけ解説します。
Canon C200で撮影したRAWデータをカラーパネルで簡単にLUTを当ててます。

③早速作っていきましょう！ / TL上に必要な文字を作る

文字の作り方
Adobe Type KitにあるTA-F1ブロックラインを使って文字を入れ込みます。
文字色は白で、文字枠は無しで大丈夫です。
最初に新作ゥ！のあたりで新と作の文字レイヤーを作って配置します。
別々に文字を入力せず、Ctrl+D(Mac:cmd+D)で文字を複製するのをお勧めします。
0:00:01:14あたりの決めポーズらへんでドン！と大きくなるように文字も大きめでいったん作り、いい感じに回転させます。

新の文字感
サイズ：650px
回転　：+15.0°
作の文字感
サイズ：615px
回転　：-15.0°

調整後、ブラック平面レイヤーの下へ文字レイヤーを持っていきます。
この際にctrl+Alt+Home(Mac:cmd+option+Home)でアンカーポイントを中心に移してください。

その後、
新作ゥ！
と言ってるタイミングで文字が出てくればいいので、文字レイヤーのタイムコードを縮めます。
Alt+(で先端のカット、
Alt+)で締めのカットが出来ますです。
Macの方はAltではなくoptionになります。

これで1カット目の
アフターエフェクツに新作ゥ！
の部分までのカットをプリコンポーズしてください。
コンポジション名はcut001とします。
横2200 / 縦1300にで作ります。

cut001の新作 文字レイヤー、下地の作成
新の文字レイヤーを元の動画から、動画の6フレーム後(0:00:01:05)に
位置 / Alt+Shitf+P(Mac:option+Shit+P)
スケール / Alt+Shitf+S(Mac:option+Shit+S)
回転 / Alt+Shitf+S(Mac:option+Shit+R)
の3つにキーフレームを打ちます。

4フレーム前の(0:00:01:01)に以下のキーフレーム変更を適用します。

位置：693.0 , 590.0
スケール：70.0% , 70.0%
回転：0, -25.0°

適用後、2フレーム後(0:00:01:03)に以下のキーフレーム変更を適用。

位置：457.0 , 429.0
スケール：145.0% , 145.0%
回転：0, -12.7°

同じように作の文字レイヤーも動かしていきます。
新の後に作の字が出てくると良いので、頭を2フレーム後ろ(0:00:01:03)へずらします。
手順は新の文字レイヤーと同じです。

サイズ、や回転は文字のバランスを見てお好みで！

各文字レイヤーにエフェクトを付け足す
新と作の文字レイヤーに［ポスタリゼーション時間］エフェクトを適用し、以下の数値を変更します。

フレームレート：24.0→12.0

どちらかのレイヤーにエフェクト数値を適用し、Ctrl+C(Mac:cmd+C)でコピーし、Ctrl+V(Mac:cmd+V)でエフェクトのコピー＆ペーストを行うと楽です！
新、作のレイヤーともに共通ですが、ポスタリゼーションエフェクトを12フレームで適用すると一番大きくなってほしい所でパッとしなくなるので、中央点を1フレームずらします。

ペンツールで集中線を描く
ショートカットキー：Gでペンツールに移行して、両方の文字レイヤーに集中線を描いていきます。
注：シェイプレイヤーをすべて別のレイヤーにするので、同じシェイプレイヤーに集中線を描くのではなく、一個の線を描いたら適当な場所をクリックしてレイヤーの選択を外し、新規のシェイプレイヤーで集中線を作ってください。　

集中線を描いたら、下地と同様に
位置 / Alt+Shitf+P(Mac:option+Shit+P)
スケール / Alt+Shitf+S(Mac:option+Shit+S)
回転 / Alt+Shitf+S(Mac:option+Shit+R)
で集中線のスタートにキーフレームを打ちます。

その後、文字が一番大きくなる所で、集中線も文字にあわせて拡大し、位置をずらします。

ここらへんは皆様のセンスで大丈夫です！
集中線の配置、サイズを変えたあと、レイヤーに［ポスタリゼーション時間］エフェクトをコピー&ペーストしてください。コマンドは
コピー：Ctrl+C(Mac:cmd+C)
ペースト：Ctrl+V(Mac:cmd+V)
です！
文字が縮むあたりで集中線は不要になるので消してしまってください。

シェイプレイヤーのエフェクト反映が完了したら、文字ごとに色タグの変更をする事をお勧めします。
以下のようにラベルを右クリックして黄色を選ぶと...

↓

このようにどのレイヤーがどれに属しているかが分かりやすくなります。
ここまで作ったら文字エフェクトをプリコンポーズ化してください。
名称はcut001_textとしています。

文字が出るタイミングで、ctrl+shift+D(Mac:Cmd+shitf+D)で映像を分割します。
その後、分割したmov素材をダブルクリックして映像データのレイヤーを開き
ウィンドウ→トラッカーを開きトラッカーを起動して映像をトラッキングさせていきます。

トラックポイントが出てきたら目に持っていき、サイズを調整し、目を追従させます。
四角のトラックポイントは何か解説すると、どのピクセルを分析して行くかを四角で中央の十字が追っているポイントです。

POINT：トラッカー追従場所はコントラストの強いところが良いです。
今回だと僕が激しく動いてブレブレになっているので1フレームごとに手作業でトラッキングしていきます。
まずトラッカーで次のフレームを分析をクリックします。

これで目を追従していきます。

ここまで行くと自動で追ってくれるようになるので、自動追従出来るようになったら再生ボタンを押してちゃんと追従できているか確認します。

文字を追従させる
レイヤー新規→ヌルオブジェクトを作成します。
作ったヌルレイヤーは切った映像の上に重ねてください。

その後、映像を選択した状態でトラッカーパネルにあるターゲットを設定をクリックして、重ねてるヌルレイヤーを選択し、適用します。
適用オプションはXおよびYを選択してOKです。

こうすることでヌルオブジェクトが目を追従するようになりました。
次にテキストレイヤーを選択してヌルオブジェクトに親子付します。
タイムラインは最後のキメポーズのあたりにしておいて、

＠マーク（親とピックウイップ）をクリックして先程のヌルにくっつけると文字もヌルオブジェクトを追従するようになります。

文字にエフェクトをつけたす
cut001のコンポジションに［ドロップシャドウ］エフェクトを加えて以下の数値を変更

シャドウのカラー：203FSA
不透明度：30.0%
方向：0x 235.0°
距離：90.0

この一連の動きを文字レイヤー全てで繰り返します。
違うポイントを以下で解説します
cut003のゴクゴクするカット
トラッキング場所は缶ラベルAeのeの中あたり

今回は自動で追いきれないかもしれないので、全て手動で移してください。

cut004 キターのカット
トラッキング場所は001同様に目にしてください。
伸ばし棒はマスクを切っています。

文字が切れていた場合はコンポジションの横幅を伸ばせばOKです。
横2300ピクセルくらいです。

一連の流れが完了したらcut004のみカメラワークを足していきます。
全てのレイヤーを選択し、3Dにチェックを入れた後、新規でカメラを作ります。

設定は上記で大丈夫です。

その後、0:00:06:15あたりでカメラのトランスフォーム目標点と位置にキーフレームを打ちます。
打ち終えたら0:00:06:10あたりで右クリック＋ドラッグをしてズームをします。
目標点にキーがついてないと思うので手動でつけて置くのをお忘れなく！
拡大した際に中心点のズレが目立つのでマイスホイールで水平位置を調整します。

完了したら、ヌルとカメラ以外を選択してモーションブラースイッチをONにします。

④電撃が走るエフェクトの作り方

cut004のみなぎる波形下地を作る
楕円形ツールを選択し、ctrl+shift(Mac:cmd+Shift)で正楕円形を中心に維持したままで丸いパスを作ります。
色は塗りが無し、線は白とします。線幅は30px、楕円形パスレイヤーを選択し、
以下の数値を変更します。
タイムコード 0:00:02:03でサイズにキーフレーム
タイムコード 0:00:01:17でサイズ0.0%に設定
上記二点にキーフレームを打ってF9でイージー・イーズをON
その後、値グラフエディターを表示し、以下のように速度緩急をつけてください。

楕円形を電撃っぽくする
エフェクトの［タービュレントディスプレイス］を適用し、以下の数値を変更

量：100.0
複雑度：6.0

cut002のAe缶が出てくる際の電撃風エフェクトも上記手順とほぼ同じです。

⑤cut005の編集

ダストマンをマスクで切り取る

ショートカットキー：Mを二回押して、以下の数値を変更する

マスクの境界のぼかし：160.0 , 160.0

タイムコード0:00:09:11にマスクパスのキーフレームを打ってください。
完了後、サイズを小さくして文字を配列していきます。
エフェクトをかける文字は

飲むアフター
［エフェクツ］←この部分
￥120
※どこの店舗でも取り扱っておりません

cut004の背景を作っていく
ctrl+D(cmd+Y)で新規平面レイヤーを作成し、先程マスクを切った映像の下に配置し、［4色グラデーション］エフェクトを適用し以下の数値を変更します。

ポイント1：192.0 , 108.0
カラー1：235E95
ポイント2：1728.0 , 108.0
カラー2：2C618F
ポイント3：192.0 , 972.0
カラー3：1E578D
ポイント4：1728.0 , 972.0
カラー4：2B699B

cut004にAe缶を配置する
Materialに入ってるkanfrontpsdをcut004の上に配置します。

配置に合わせて文字も置いていきます。

配置後、飲むアフターエフェクツをプリコンポーズ化して最初に紹介したデコンポーズテキストを使って文字のレイヤーを全て別々にします。

こうなった後で飲むアフターまでの文字に鍵をかけて、
エフェクツレイヤーのアンカーポイントを各文字の中央に配置してください。
アンカーポイントの位置は目確認で大丈夫です。
エフェクトの出し方は先述した他のカットと同じ流れで作ります。
［ポスタリゼーション時間］のエフェクトはアニメーションによって変えたほうが良いので全て見ながら作ると良いです。

⑥cut002の漲るAe缶を作る

缶が着地するまで
Materialの中にあるkanminagi.psdをcut002の上に設置します。
設置後、地面を作っていきます。
ctrl+D(Mac:cmd+D)で平面マットを複製して、位置を下げて床は完成です。

kan_minagi.psdレイヤーを選びショートカット：Pでタイムコード0:00:02:03に位置キーフレームを打ちます。
その後、3フレーム前のタイムコード0:00:02:00で缶の位置を真上にずらして画面にギリギリ映らないあたりでキーフレームを打ちます。
手を加えたことで上からストンと落ちてくるようになりました。
落ちて1フレーム後（0:00:02:04）で少し上にずらしてバウンド感を出し、更に1フレーム後（0:00:02:05）で元の位置に戻してキーフレームを打ちます。
0:00:02:03と同じ位置に戻るので、0:00:02:03のキーフレームをctrl+C(Mac:cmd+C)でコピーしてctrl+V(mac:cmd+V)でペーストすれば位置ずれせずに位置を動かせます。

全てにキーフレームを打ったらF9でイージングをかけ、グラフエディターを起動し、レイヤーに出てきた位置を右クリックすると［次元に分割］を選択してY位置だけを開いてください。

上記のグラフが出たらグラフラインを以下くらいに調整します。

Ae缶にエフェクトをかけていく
kanminagi.psd、平面レイヤー２つにモーションブラースイッチをつけて、平面2つとkanminagi.psdをプリコンポーズしてください。
プリコンポーズ化したレイヤーに入り、ctrl+Alt+Y(Mac:cmd+option+Y)で調整レイヤーを作り、調整レイヤーに［トランスフォーム］エフェクトを適用し、タイムコード以下の数値を変更します。

①調整レイヤーの幅を0:00:02:03～06の3フレームで作成
②位置をAlt(Mac:option)を押しながらクリックしてエクスプレッションを起動し
wiggle(20,30)
を入力

Ae缶に電撃エフェクトをかける
新規コンポジションを縦横2000px、デュレーション3秒で作成します。
名称はthunder01とします。

作った新規平面に楕円形ツールで横長の楕円形を作ります。

作成した楕円形の位置を0:00:00:00で画面外左端に設置してキーフレームを打ったら6フレーム後（0:00:00:06）に画面外右端へ移動させます。
その後、楕円形のシェイプレイヤーにエフェクトの［タービュレントディスプレイス］を適用し、以下の数値を変更します。

量：80.0
複雑度：6.0

適用した楕円形レイヤーをctrl+D(Mac:cmd+D)で複製して、エフェクトの［タービュレントディスプレイス］内、以下の数値を変更します。
展開：0 x +288.0°
次に色をAe色（コード：981ED7くらい）に変更し、スタートを１フレーム後ろへずらします。

上記と同じ手順でAe缶の周りを電撃が走るエフェクトを作ります。
新規コンポジションを縦横2000px、デュレーション3秒で作成します。
名称はthunder02とします。
電撃線は楕円形ではなくパスツールで作成。
塗り無し、線は白で３点直線を作ります。

点が３つある直線

引いたシェイプレイヤーのコンテンツ→シェイプ→パスで開始点（0:00:00:00）にキーフレームを打ち、8フレーム（0:00:00:08）で３点直線を上にずらしてキーフレームを打ちます。

こんな感じです。
缶に電撃を這わせるイメージで作っていきます。
次にペンツールを右クリックし、頂点を切り替えツールで中心点を丸くします。

エフェクトの［タービュレントディスプレイス］を適用し、以下の数値を変更します。

量：87.0
複雑度：6.0

作った白電撃をctrl+D(Mac:cmd+D)で複製して色をコード：981ED7に変更して、開始点を2フレームずらし、［タービュレントディスプレイス］エフェクトの展開数値を0x + 148.0°へ変えたら2つのレイヤーを複製して4つの線を這わせます。

細かい点ですが、全ての電撃線の展開数値を変えるとランダム性がありより電撃感が増します。

電撃エフェクトの配置
先程作ったthunder01と02をcut002の中に配置していきます。
タイムコードのIN点は調整レイヤーの頭に合わせてください。
レイヤー順は
thunder01：kanminagi.psdの下
thunder02：kanminagi.psdの上

▼thunder01の配置
缶底の左右に電撃を這わせるので、サイズを縮め、ctrl+D(Mac:cmd+D)で複製して、複製したレイヤーを左へ配置し、ショートカットSでスケールを表示、Xの値を-に変えると左右反転されるので、反転させて位置を調整しておきます。

thunderのレイヤーを適当に合いそうな位置へずらしておいてください。
いい感じの位置に調整したら、各thunderレイヤーに［グロー］エフェクトを適用して以下に変更します。全てのthunderレイヤーの変更数値は共通です。

グローしきい値：40.0%
グロー半径：60.0

⑦余談：缶の作り方

Adobe Dimensionで作成しました。
以下ご参照ください。

以上で完成です！お疲れ様でした！！