AdobePhotoshopでGIFアニメーションに書き出す方法

GIFアニメ書き出しにPhotoshop使い倒すイラストレーター、さらえみ(@saraemiii)です。

かなり古くから写真加工レタッチソフトとして名高いAdobe Photoshopですが、実はアニメーションや映像加工もできます。

今回はPhotoshopからGIFアニメーションの書き出し方を紹介します。

「WEB用に書き出す」でGIFアニメーションにする

Photoshop上でアニメーションにした上図のアニメをGIFアニメーション化します。

メニュー「ファイル」→「書き出し」→「Web用に保存」をクリック。

すると上図のような画面が出るので、ここで設定して「保存」を押すとGIFアニメーションが書き出されます。

様々な設定があるのですが…よく使うものだけ紹介します。

データ容量を軽くしたい時の設定例

GIFアニメーションはどうしても容量の重たい画像データになります。

そこでこれらの設定を駆使して軽くしていきます。

ビューの左下に加工後の容量の目安が見れるので、どれだけ軽くなるか見ながら調整できます。

カラー（色数）

GIFは最大256色で、その色数を減らすと容量も軽くなります。

透明部分（透過色オン/オフ）

透過色を使っていない場合はオフにします。

透過に使っていた色数１つを色に使えるのでその分綺麗な画像になります。

劣化（画質）

「劣化」の数値を上げていくと画質が下がり容量も軽くなります。

その分、画像がどんどん荒れていきます。

画像サイズ

さらに容量を軽くするには画像サイズを小さくすると大きく変わります。

GIFアニメーションをもっと軽くしたい時は

iLoveIMG | 画像編集用オンライン...

オンラインでGIFとアニメーションGIFを圧縮 複数のGIF画像を選択して、必要に応じてアニメーションを維持しながら瞬時に圧縮。GIF画像を圧縮して、ファイルサイズを節約できます。

↑こちらのWebサービスで見た目をほぼ変えずに容量を圧縮させられます。

まとめ：Photoshop持ってるならこの方法がBEST

GIFアニメーションにする方法はWebサービスや他社ツールでもありますが、Photoshop持ってるクリエイターさんならこの方法が最短で作れます。