こんにちは！
今回のテーマは「なめらかなアニメGIFの作り方」です。
アニメーションGIF(以下、アニメGIF)のメリットとして、WEBサイトのUXを高める事はもちろん、プレゼンテーションやサイトやアプリデザイン上の動きのイメージを伝える時に便利な事が挙げられます。
そんなアニメGIFを、Photoshopで簡単になめらかに作る方法についてまとめました。
作るのが難しそう、Adobe Animateなど専門のソフトが必要なのでは？と思う方もいるかもしれませんが、Photoshopでも簡単に作る事が出来ます！
なめらかなアニメGIFとは
アニメGIFをざっくり2つに分けると、「カクカクタイプ」と「なめらかタイプ」があります。
2つの違いを簡単に言うと「フレーム(コマ)数が違う」です。
フレーム(コマ)数とは、動画やアニメ GIF内で表示される静止画の数です。
アニメGIF とは、静止画(GIF形式)を連続して表示させることでアニメーションに見せています。
カクカクタイプは、シンプルで単純な動きの物です。
最低でも画像を2枚用意すれば作れてしまいます。画像を交互に連続して表示させれば動かすことが出来ます。
なめらかタイプは、フレーム数が多くなればなる程なめらかに動きます。
1秒間に24～30フレームあればなめらかに動いて見えますが、容量を抑えたい場合は15フレーム程にする事もあります。
PhotoshopでアニメGIFを作る
PhotoshopでアニメGIFを作る方法は2種類あります。
「フレームアニメ―ション」と「ビデオタイムライン」です。
フレームアニメ―ションは、シンプルで単純な動きのカクカクタイプのアニメGIFを作るのに適しています。
ビデオタイムラインは、なめらかな動きや複雑な動きのアニメGIFを作るのに適しています。今回はこちらの作り方をご紹介したいと思います。
ちなみに、フレームアニメ―ションでもなめらかなアニメGIFを作る事は出来ます。
ですが、ビデオタイムラインに比べると手間が掛かったり、思った通りのなめらかさにならない場合があります。
そのため今回は、より簡単なビデオタイムラインを使用して作りたいと思います。
作業環境は下記の通りです。
———————
■ Photoshop CC 2019
———————
それでは早速作ってみましょう！
タイムラインパネルを準備する
Photoshopを開いたら、＞ウィンドウ＞タイムライン でタイムラインパネルを開きます。
もしくは、 ウィンドウ＞ワークスペース＞モーション でも開くことが出来ます。
タイムラインパネルを開いた直後はデフォルトで「フレームアニメ―ションを作成」する設定になっていますので、「ビデオタイムラインを作成」を選択してください。
ワークスペース
ワークスペースはこのようになっています。
■アートボード
通常のPhotoshopと同じです。画像が表示される画面であり、移動や加工などの編集、アニメーションを再生して動きの確認も出来ます。
■レイヤー(タイムラインパネル)
レイヤーパネルと連動したオブジェクトが表示されます。ここで「変形」や「不透明度」などのキーフレームの操作が出来ます。
■時間の設定
時間インジゲーターの操作やキーフレームの設定、時間の長さを変更出来ます。
■その他の編集パネル
アニメーションの再生やオブジェクトの分割、フェードエフェクトなどを付ける事が出来ます。
オブジェクトを配置
レイヤーにオブジェクトを配置します。今回は例として図形ツールで描いた円を配置しました。
1点注意ですが、図などは基本的にスマートオブジェクトに変換して編集してください。スマートオブジェクトに変換しないと「変形」などの編集が出来ない為です。
キーフレームの設定
ここで言うキーフレームとは、アートボードで行った編集やレイヤーパネルで付けたエフェクトを、動画の特定の位置に記録させる物です。
タイムラインパネルのレイヤーを開くと、「変形」「不透明度」「スタイル」の項目が出てきます。
各項目の役割は下記の通りです。
■変形
オブジェクトの形や向き、位置を設定する。
■不透明度
オブジェクトの透明度を設定する。
■スタイル
レイヤースタイルを設定する。
「変形」を使ってオブジェクトを左右に動かしてみたいと思います。
まずは時間インジゲーターを操作して、キーフレームを打つ位置を決めます。
時間インジゲーターで位置を取りながら、順繰りにアートボードでオブジェクトを移動させます。
これをGIF形式で書き出せばなめらかなアニメGIFの完成です！
GIFアニのパターン
キーフレームを設定する事で、下記のような表現をすることも出来ます。
一例として参考にしてみて下さい！
■変形
■不透明度
■スタイル
応用編
ここまでの作り方を組み合わせる事で、下の図のようなちょっと複雑なアニメGIFも作る事が出来ます。
このアニメGIFをWEBサイトのアクセントとして組み込んでも良いですし、UXの提案やコーディングの確認がしたい時のコミュニケーションツールとして使う事も出来ます。
おわりに
いかがでしたでしょうか？
1つ1つの動作を付けるのは、思ったより簡単だったのではないでしょうか？
ちなみに、GIF アニメとはアニメーション GIF(またはGIFアニメーション)の略です。
GIFの読み方ですが、「じふ」と読む人と「ぎふ」と読む人がいますが、正式には「じふ」です。
それではまた！デジマースのコンでした。
他の記事をさがす ⇒ 記事一覧へ