PhotoshopでGIFアニメーションを作成する

GIFアニメーションを使った動作検証をする機会があったので、PhotoshopでGIFアニメーションを作成する方法を試してみました。

作成方法

Photoshop上部メニューの ウィンドウ > タイムライン を選択します。

タイムラインパネルが表示されるので、真ん中に表示されているボタンの下矢印をクリックして、「フレームアニメーションを作成」を選択します。

ボタンのテキストが「フレームアニメーションを作成」に変更されるので、ボタンをクリックします。

タイムラインパネルにフレームが表示されました。

GIFアニメーションで表示する内容を追加します。

タイムラインパネル下部の「選択したフレームを複製」をクリックして、フレームの複製を行います。

各フレームでレイヤーの表示/非表示を設定します。

各フレームの下部で表示する時間を設定します。

タイムラインパネル下部の「アニメーションを再生」で動作の確認を行えます。

問題ないようなら、ファイル > 書き出し > Web 用に保存 を選択します。

最適化ファイル形式を「GIF」にして、保存をクリックします。

これでGIFアニメーションが作成できました。
GIFアニメーションのデモページ

タイムラインパネル下部のループの設定から、ループの回数も変更できます。
先ほどは「無限」でしたが、「一度」に変更してみます。

アニメーションが1順だけになりました。
GIFアニメーションのデモページ2
　

【参考サイト】

• フレームアニメーションを作成する方法 （Photoshop CC）