読者です 読者をやめる 読者になる 読者になる

アニメーションGIF取り扱いTIPS

仕事でデイリーポータルZというサイトを作っているのですが、そこで去年からアニメーションGIFに関するコーナーを担当しています。
アニメーションGIF画像の取り扱いについて、ちょっとしたノウハウがたまってきたので公開します。

f:id:slideglide:20130204222345g:plain

PhotoshopでGIFの全フレームをレイヤー化して開く方法

・×GIMPで一回読み込んでPSDでエクスポート(無理っぽかった)
・MOVに変換してからPhotoshopで読み込む
・CS6だと普通に開けばそのままタイムラインに展開される!(CS3はダメだったけど4と5は不明)

■リサイズする

Photoshop CS6で開いてリサイズして保存
imagemagick

convert hoge.gif -coalesce -geometry 100x100 -deconstruct fuga.gif

 ※オプションの順番を変えるとダメ
 PHPのコード例つきの解説 unoh.github.com by unoh

[比較]
オリジナル
f:id:slideglide:20130204222441g:plain

convert hoge.gif -geometry 100x100 fuga.gif

f:id:slideglide:20130204221526g:plain

convert hoge.gif -coalesce -geometry 100x100 -deconstruct fuga.gif

f:id:slideglide:20130204221534g:plain

windowsGUIツール gif resizer, resize gif animation images ※たまにうまくいかないときアリ
・いま検索したらこういうのがあった、これでいい気がする Bloggif : Resize an image

■動画からGIFを作る

2016/11/14追記

・数十秒くらいの短い動画の場合はGIFMAGAZINE使うとサクッとできて楽
・長い動画から一部切り出す場合は FFmpeg + ImageMagick でこんな感じでやる(参考

ffmpeg -ss 00:39:51 -i mov.mp4 -t 00:00:03.000 -f image2 -vcodec mjpeg -r 10 -filter:v yadif -q:a 1 -qmin 1 -qmax 1 work/%05d.jpg
convert -delay 10 work/*.jpg test.gif
del work\*.jpg
ffmpegのオプション
  • ss 開始地点
  • i 切り出し元の動画ファイル名
  • t 長さ
  • r 1秒間のフレーム数

FFmpegはオプションの順番変えると意味が変わってくるので注意

convert(ImageMagick)のオプション
  • delay ウェイト時間(10ミリ秒単位。100で1秒)

↑追記ここまで

@nifty:デイリーポータルZ:初めてでもできるGIFアニメの作り方 全力まとめ
動画をアニメーションGIFに変換するウェブアプリケーション作った - hitode909の日記
FFMPEGでフレーム画像に切り出してからGIF化 フリーランス アキのオープンソース活用術: FFMpegで動画を画像にする
 -rオプションが便利。しましまになるときは-deinterlaceをつける。

ffmpeg -i xxx.MTS -f image2 -vcodec mjpeg -r 10 -deinterlace -qscale 1 -qmin 1 -qmax 1 %05d.jpg

f:id:slideglide:20130204221430g:plain

TumblrにアップできるGIFの条件

参考:gif on Tumblr
・大きさは 500px x 500px 以内
・ファイルサイズは 1MB 以内(去年増えた)
・フレーム数:150フレーム以内(これ満たさなくてもできる場合があって謎)


f:id:slideglide:20130204222709g:plain

■ウェイト(ディレイ)とスピードの関係

・ウェイトなしにするとIEだとちょうど良くてもFireFoxだとめちゃくちゃ速くなる
・ブラウザ別対応表 あなたは大丈夫?高速GIFアニメになってしまう症状 - 知らなきゃ絶対損するPCマル秘ワザ
・高速で動かすには 高速に動くアニメーションGIFを作るときに知るべきたった一つの真実 - hitode909の日記

■ファイルサイズを小さくする

Photoshopで保存するときの設定について CREPOS | GIFアニメ講座4
・水平方向に連続するピクセルで同色の連続を増やす(縦縞より横縞が小さい)
・フレームを間引く
・静止部分をフレームにしないでウェイトにする
・減色する(たまに色数多いほうがサイズ小さくなるときもある)
・大きさ(ピクセル数)を小さくする。大きさ変えたくないときは倍角にして解像度下げる。
・透過色を使う

■あとがき

Windowsを使っているのでソフトウェアはそれに対応したものを挙げています。
まだある気がするけど思い出したら追記します。

お知らせ:国際GIFアニメアワード2013 今年も開催!
http://portal.nifty.com/iaga2013/
エントリーお待ちしております。