2021年05月17日動画→GIFアニメ変換をPhotoshopできれいに仕上げる方法

GIFアニメーションとは

GIFアニメーションは、1987年・1990年にGIFの一部として規格化されたアニメーション画像形式で、Webでも古くから利用されてきました。

近年は動画や新世代のアニメーション画像形式(APNGやWebP等)に立場を譲りつつありますが、Flash Playerがサポートを終了した現在、古いブラウザでのFlashアニメーション代替手段としては、まだまだ需要のある存在です。

そのほか最近は、SNS投稿用のファイル形式の一種として、MP4では画質が足りない短時間アニメーションの投稿等に活用されています。

動画変換ツールでのGIFアニメ変換には限界がある

Adobe Media Encoderなど、一部の動画変換ツール(エンコーダー)には、対応形式にGIFアニメが含まれています。

ただし、GIFには「1677万色中最大256色」という色数制限があり、フルカラーの動画は減色処理が避けられません。

減色自体は仕方ないとして、問題は自動減色がうまくいかない場合があることです。詳細な減色設定ができない場合、たまに荒いディザが広範囲に発生したりと、必ずしも満足いく結果になるとは限りません。

そのような場合に活躍するのがPhotoshopです。

上段：Adobe Media Encoderでの出力結果(フル出力版：25.8MB)…ちゃぶ台の影に荒いディザが発生
下段：Photoshopでの出力結果(フル出力版：22.8MB)…ちゃぶ台の影が滑らかになっている

元動画↓

PhotoshopのGIFアニメ出力機能を使う

PhotoshopはもともとGIF出力機能に付随したGIFアニメ作成機能を持っています。

動画を開いたあと、タイムラインの[ビデオグループ1]をクリック ⇒ メニュー[ファイル]-[書き出し]-[Web用に保存(従来)]で、プレビュー画面が開きます。([別名で保存]でもGIFアニメは出力できますが、プレビュー画面は出ません)

プレビューでは、元素材とプレビューを見比べて、細かく設定を変えながら最適な形式でGIFアニメを出力できます。

PhotoshopのGIF出力プレビュー画面

色の最適化ができる

プレビュー画面では、静止画GIFと同様に、色選択や中間調再現の調整・最適化が可能です。

• 減色アルゴリズム…パレットに載せる256色を1677万色から選択するアルゴリズムを、[知覚的][特定][割り付け]等から選択できます。
• ディザアルゴリズムの指定…256色に収まらない色に対するディザ処理(複数色による中間調再現)の有無・方式を、[ディザなし][誤差拡散法][パターン][ノイズ]から選択できます。

その他の出力設定

• 透明部分…透過GIFにするかをチェック選択できます。^※
• 透明部分のディザアルゴリズム…透明部分のディザ(半透過の代わり)を[透明ディザなし][誤差拡散法透明ディザ][パターン透明ディザ][ノイズ透明ディザ]から選択できます。
• サイズ変更…GIF出力時の縦横サイズ、および拡大縮小時のアルゴリズムを指定できます。
• ループの有無…一度だけ再生(ループなし)か、無限ループするか、指定回数だけループするかが選択できます。

フレーム間の時間間隔をあとから個別に調整できる

一度書き出したGIFアニメーションを再度読み込むと、フレーム個別の長さを0.01秒刻みで再設定できます。

特定の時間だけ激しく動き、あとはずっと止まったまま、という場合、少ない画像枚数(＝小さなファイルサイズ)で効率的にアニメーションを表現できます。

PhotoshopでGIFを再度読み込み、タイムライン上でフレームの▼をクリックすると、フレームの時間的長さ(ディレイ)を個別指定できる

1秒間ロゴが発光する動画について、最終1フレームのみ4秒に伸ばして、合計5秒のGIFにした例
(1秒間で左から右に光が移動⇒4秒間停止⇒ループ)
※停止部分は全部まとめてGIF1枚分なので、データサイズの無駄を防げる