はじめに
私は今まで、アニメーションGIFはFireworksで作成していました。
しかし、先日MacのOSをMojaveにしたところ、Fireworksが起動できなくなってしまいました。
何度起動しても「予期しない理由で終了しました」の表示。なんということでしょう。
![](https://www.kakeru-d.jp/wp-content/uploads/2019/09/アセット-3-8.png)
2013年にAbobeからFireworksの開発終了が発表されていますから、遅かれ早かれ「脱Fireworks」は避けられない道。
そこで、PhotoshopでアニメーションGIFを作ってみると、あらびっくり!
簡単に作ることができましたので、ご紹介します。
フォトショップを使ったアニメーションGIFの作り方
【STEP1】連続画像を用意する
まずは、アニメーションで使用する連続画像を用意します。
連写で撮影した写真や、作成した画像など、なんでも構いませんが、全ての画像サイズは統一してください。
私は、illustratorで画像を作成しました。
バナーでよくある、「ココをクリック!」用のアニメーションをつくろうと思います。
![アニメーションGIF作成_02](https://www.kakeru-d.jp/wp-content/uploads/2019/09/アセット-4-8.png)
この連続画像を、任意のフォルダに入れておきます。これで準備完了です。
【STEP2】Photoshopに連続画像を読み込む
ここからは、Photoshopをつかった作業になります。
Photoshopを起動し[メニューバー]にある[ファイル] > [スクリプト] >[ファイルをレイヤーとして読み込み]を選択。
![アニメーションGIF作成_03](https://www.kakeru-d.jp/wp-content/uploads/2019/09/アセット-5-8.png)
すると、[レイヤーを埋め込む]ポップアップが表示されます。
ポップアップ内の[使用]で[フォルダー]を選択。「参照」をクリックし、【STEP1】で作成した画像のフォルダを選択し、[OK]をクリックします。
![アニメーションGIF作成_04](https://www.kakeru-d.jp/wp-content/uploads/2019/09/アセット-6-8.png)
![](https://www.kakeru-d.jp/wp-content/themes/kakerudesign/img/chiho.png)
![アニメーションGIF作成_05](https://www.kakeru-d.jp/wp-content/uploads/2019/09/アセット-7-8.png)
【STEP3】タイムラインパネルを開く
[メニューバー]にある[ウィンドウ] > [タイムライン] をクリックして、タイムラインパネルを開きます。
![アニメーションGIF作成_06](https://www.kakeru-d.jp/wp-content/uploads/2019/09/アセット-8-8.png)
タイムラインパネル中央にある矢印ボタンをクリックして、[フレームアニメーションを作成]を選択。
![アニメーションGIF作成_07](https://www.kakeru-d.jp/wp-content/uploads/2019/09/アセット-9-8.png)
次に[フレームアニメーションを作成]の文字部分をクリックすると、パネル内に読み込んだ画像がひとつだけ表示されます。
![アニメーションGIF作成_08](https://www.kakeru-d.jp/wp-content/uploads/2019/09/アセット-10-8.png)
![](https://www.kakeru-d.jp/wp-content/themes/kakerudesign/img/chiho.png)
アニメーションGIF作成のときに私が参考にしたサイトでは、
「矢印ボタンをクリックして[フレームアニメーションを作成]を選択します。ボタンをクリックすると、パネル内に読み込んだ画像がひとつだけ表示されます」とだけ書いてありました。そのため私は、
「矢印で選択」
↓
「タイムラインパネル内に読み込んだ画像が表示される」
と思っていたのですが、本当は、
「矢印で選択」
↓
「[フレームアニメーションを作成]の文字部分(正確には、[フレームアニメーションを作成ボタン])をクリック」←コレ!
↓
「タイムラインパネル内に読み込んだ画像が表示される」
の工程が必要。「ボタン」が意味するものを理解するのに、30分ほどかかってしまいました。
画像ソフトを使い慣れた方はすぐわかるのかな??
こういうトラップにひっかかってしまうのは、初心者あるあるですね。
【STEP4】レイヤーをフレームアニメーションに変換する
タイムラインパネルの右上にあるメニューアイコンをクリックし、[レイヤーからフレームを作成]をクリックする。
![アニメーションGIF作成_09](https://www.kakeru-d.jp/wp-content/uploads/2019/09/アセット-11-8.png)
すると、レイヤーパネル内のすべてのレイヤーが、タイムラインパネル上に表示されます。
![アニメーションGIF作成_10](https://www.kakeru-d.jp/wp-content/uploads/2019/09/アセット-12-8.png)
左の画像から順番にアニメーションが再生されます。
もし順番が逆になっているときは、先ほどのタイムラインパネルのメニューアイコンをクリックして[フレームを入れ替え]を選択します。
![アニメーションGIF作成_11](https://www.kakeru-d.jp/wp-content/uploads/2019/09/アセット-13-8.png)
【STEP5】アニメーションの表示秒数やループを設定する
タイムラインパネルに表示された画像の下にある[0秒]をクリックし、その画像を表示させる時間を変更(今回は、[1秒]に設定)。
また、パネル下部に表示された[無限]をクリックし、繰り返す回数を変更。
今回は[無限]に設定したため、これでアニメーションがループしてくれます。
![アニメーションGIF作成_12](https://www.kakeru-d.jp/wp-content/uploads/2019/09/アセット-14-8.png)
タイムラインパネル下部にある再生ボタンをクリックして(あるいは、キーボードのスペースバーを押して)、アニメーションをプレビューします。
![アニメーションGIF作成_13](https://www.kakeru-d.jp/wp-content/uploads/2019/09/アセット-15-8.png)
【STEP6】アニメーションGIFを書き出す
メニューバー[ファイル]>[書き出し]>[Web用に保存(従来)]をクリック。
![アニメーションGIF作成_14](https://www.kakeru-d.jp/wp-content/uploads/2019/09/アセット-16-8.png)
プリセットメニューから[GIF 128ディザ]を選択。
カラーメニューから[256]を選択。
ループオプションメニューから[無限]を選択します。
そのほか、必要であれば、画像サイズの幅と高さを変更します。
最後に[保存]をクリックして、アニメーションGIFの保存先を指定します。
![アニメーションGIF作成_15](https://www.kakeru-d.jp/wp-content/uploads/2019/09/アセット-17-8.png)
これで、作業は完了です!お疲れさまでした!
![アニメーションGIF作成_16](https://www.kakeru-d.jp/wp-content/uploads/2019/09/名称未設定1.gif)
まとめ
PhotoshopでアニメーションGIFをつくるときは、準備した画像をレイヤーに読み込み、タイムラインパネルでアニメーションGIFに変換させる。
Fireworksにでの作成に比べて、直感的に作業できるのが印象的でした。
ぜひ、ご活用ください。
【STEP1】で、画像を1つのフォルダに入れたのは、ここでの作業をラクにするためです。
もしフォルダにいれていなかったら、[使用]で[ファイル]を選択→[参照]からShiftキーを押しながらすべてのファイルをクリックしなければなりません。
地味ですが手間がかかりますし、選択漏れをしてしまう可能性もあります。少しでもラクしましょう!