簡単!なめらかなアニメGIFの作り方 | デジマースブログ

簡単!なめらかなアニメGIFの作り方 | デジマースブログ



こんにちは!
今回のテーマは「なめらかなアニメ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の読み方ですが、「じふ」と読む人と「ぎふ」と読む人がいますが、正式には「じふ」です。

それではまた!デジマースのコンでした。


他の記事をさがす ⇒ 記事一覧へ