【Photoshop初心者】GIFアニメーションの作り方
![gifアニメーション](https://www.beginavi.net/wp-content/uploads/2022/06/BYE.gif)
![](https://www.beginavi.net/wp-content/uploads/2021/06/4495bed8051fcc9fd4ac4bababda36e3.png)
今回はPhotoshopでGIFアニメーションの作り方をご紹介します。
![](https://www.beginavi.net/wp-content/uploads/2021/06/8ec75cb3a9b9c07902b609a40f7795f8.png)
動きのあるサイトが動画よりずっと小さい容量で作れるのでおすすめです
GIFアニメーションの作り方
画像を用意します
GIFアニメーションはパラパラ漫画のようにPNG画像を表示して動きのある画像にしていますので、このような画像を連番で用意します。
![](https://www.beginavi.net/wp-content/uploads/2022/06/0-1.png)
今回は20枚用意しましたが、まずは4枚ほどから始めても面白い動きが出来るので少ない枚数から始めるのも良いでしょう。
そして1つのフォルダーに入れます
例えば下のようなアニメーションなら2枚の画像で出来ます。
![ウインク](https://www.beginavi.net/wp-content/uploads/2022/06/hiyohiyo.gif)
Photoshopを立ち上げます
![](https://www.beginavi.net/wp-content/uploads/2022/06/1-5.png)
【ファイル】から【スクリプト】【ファイルからレイヤーとして読み込み】
ポップアップが出ますので
![](https://www.beginavi.net/wp-content/uploads/2022/06/2-2.png)
【フォルダー】を選択して参照から画像が入っているフォルダーを選択します。
![](https://www.beginavi.net/wp-content/uploads/2022/06/3-2.png)
画像が選択されたのを確認して【OKI】
![](https://www.beginavi.net/wp-content/uploads/2022/06/4-6-640x538.png)
レイヤーにこのように画像が配置されました。
フレームアニメーションを作成
次に画面下部の【フレームアニメーションを作成】をクリックします
出てない方は【ウィンドウ】から【タイムライン】を選択します
【ビデオタイムライン】となっている方は下向き三角から【フレームアニメーションを作成】にします
![](https://www.beginavi.net/wp-content/uploads/2022/06/5-5.png)
![](https://www.beginavi.net/wp-content/uploads/2022/06/6-2.png)
すると一枚画像がタイムラインに表示されました。
![](https://www.beginavi.net/wp-content/uploads/2022/06/7-5.png)
次に右下の赤枠のところを開いて【レイヤーからフレームを作成】を選択します
![](https://www.beginavi.net/wp-content/uploads/2022/06/8-6.png)
![](https://www.beginavi.net/wp-content/uploads/2022/06/9-1.png)
すると全ての画像が入ります
![](https://www.beginavi.net/wp-content/uploads/2022/06/10-640x182.png)
再生してみましょう。
![](https://www.beginavi.net/wp-content/uploads/2022/06/11-1.png)
アニメーションが逆になっているので先ほどの右下から【フレームを入れ替え】で順番を入れ替えます。
![](https://www.beginavi.net/wp-content/uploads/2022/06/12-2.png)
再生すると今度は順番どおりに再生されます。
再生回数も【無限】の横の下向き三角から選ます【その他】を選択すると回数を入力できます。
![](https://www.beginavi.net/wp-content/uploads/2022/06/13-2.png)
更に速さも選べます。
少し早いなとか遅いなと思ったら秒数を変えます。
![](https://www.beginavi.net/wp-content/uploads/2022/06/14.png)
書き出し
【ファイル】から【書き出し】【Web用に保存従来】を選択します。
![](https://www.beginavi.net/wp-content/uploads/2022/06/15.png)
プリセットから【GIF】を選択します
![](https://www.beginavi.net/wp-content/uploads/2022/06/17-1-640x462.png)
回数もここから選べます。
![](https://www.beginavi.net/wp-content/uploads/2022/06/18-640x461.png)
今回は3回にしました
![](https://www.beginavi.net/wp-content/uploads/2022/06/19.png)
完成
![gifアニメーション](https://www.beginavi.net/wp-content/uploads/2022/06/BYEBYE.gif)
Photoshop記事一覧