暑い日が続いたと思ったら急に寒くなったり、皆さん体調管理できていますか？
僕は完全にヤラれています。。もっと身体を鍛えなくてはですね。
それと共に脳の筋肉を鍛えることもお忘れなく！
脳が活性化する今回のテーマはこちら！
みんな大好きGIFアニメーション！
最近のWEBサイトでもよく見かけますよね、GIFアニメーション。
ローディングだったり、デザインの一部として使用されていたり。
GIFアニメーションというと複数枚のGIF画像をつなげて紙芝居のように見せるというのが一般的かと思います。
ですが、それだとちょっと味気ないですよね。。
もっとこうオシャレに、スタイリッシュに見せられたらと思うことありませんか？
例えばこちらのようなサイト
1.DAN Paris is the digital agency of the disruption
3.VOTD.tv - Recognising a talented industry.
4.Guillaume Kurkdjian - Page d'accueil
どれも素晴らしいクオリティですね。
一般的にGIFアニメーション作成にはPhotoshopのみを用いると思いますが、今回は基礎編・応用編とし「After Effects+Photoshop」で作るちょっと一味違ったGIFアニメーション制作をご紹介いたします！
まず基礎編ではAfter Effectsで作った.movファイルをPhotoshopで読み込みGIFにする手順をご紹介いたします。
STEP1. After Effectsで.movファイルを作成する。
1. After Effectsを立ち上げ、ファイル→新規作成→新規プロジェクトでプロジェクトを作成します。
2. コンポジション→新規コンポジションでアニメーションの基本設定を行います。
用途にもよりますが、
「フレームレート 12 」「デュレーション（秒数）00:03:00」がおすすめです。
（この数値にすると、重くなりすぎず、スムーズに動きやすいと思います。）
3. イラレやフォトショデータ等用意した素材を読み込みます。ファイル→読み込み→ファイルから選択します。
今回はSONICJAMのロゴを素材として使用したいと思います。
4. 適当なアニメーションを設定してみます。
After Effect で基本的に設定できるアニメーションのパラメーターは基本的に4つです。
「位置」「回転」「不透明度」「サイズ」
この値をうまく設定してアニメーションさせていきます。
※今回After Effectsの詳細な使用方法は割愛させていただきます。
下記サイトがとても参考になりますのでぜひご覧ください。
・After Effects Style｜基本操作｜初心者からはじめるAfter Effectsの使い方
・After Effectsの初心者向けチュートリアルや使い方講座 :: After Effects STUDY!!
5. アニメーション設定が終わったら、コンポジション→レンダーキューに追加をクリック。
出力モジュールの設定をQuick Timeに。
透過で書き出したい場合は形式オプションをanimation、チャンネルをRGB+アルファで書き出します。
6. 最後に出力先を選択しレンダリングします。
STEP2. Photoshopで.movファイルを読み込みGIFアニメーションを作成する。
7. Photoshopを立ち上げ、ファイル→開くで先程作成した.movファイルを読み込みます。
ファイルを読み込むとこちらのような画面になります。
下部のタイムラインパネルをいじるとアニメーションを確認することが出来ます。
8. 最後に「Webおよびデバイス用に保存」を選択し保存形式を「GIF」に、お好みのループオプションを選び保存すれば完成です！
こちらが今回作成したGIFです。
まとめ
どうでしたか？意外と簡単に作成できたのではないでしょうか！
After Effectsの使い方に慣れるまでは大変かもしれませんが、慣れてしまうとPhotoshopで作成するより直感的に、そして細かいエフェクトなどもかけることが出来ます。
次回の後編では応用編として様々なエフェクト、イージングの設定等ご紹介いたします！
それではまた次回お会いしましょう！
マッスル！マッスル！
Special Thanks：森田（SONICJAM）
