仕事でデイリーポータルZというサイトを作っているのですが、そこで去年からアニメーションGIFに関するコーナーを担当しています。
アニメーションGIF画像の取り扱いについて、ちょっとしたノウハウがたまってきたので公開します。
■基本的な作り方いろいろ
■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
[比較]
オリジナル
convert hoge.gif -geometry 100x100 fuga.gif
convert hoge.gif -coalesce -geometry 100x100 -deconstruct fuga.gif
・windows用GUIツール 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
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
■TumblrにアップできるGIFの条件
参考:gif on Tumblr
・大きさは 500px x 500px 以内
・ファイルサイズは 1MB 以内(去年増えた)
・フレーム数:150フレーム以内(これ満たさなくてもできる場合があって謎)
■ウェイト(ディレイ)とスピードの関係
・ウェイトなしにするとIEだとちょうど良くてもFireFoxだとめちゃくちゃ速くなる
・ブラウザ別対応表 あなたは大丈夫?高速GIFアニメになってしまう症状 - 知らなきゃ絶対損するPCマル秘ワザ
・高速で動かすには 高速に動くアニメーションGIFを作るときに知るべきたった一つの真実 - hitode909の日記
■ファイルサイズを小さくする
・Photoshopで保存するときの設定について CREPOS | GIFアニメ講座4
・水平方向に連続するピクセルで同色の連続を増やす(縦縞より横縞が小さい)
・フレームを間引く
・静止部分をフレームにしないでウェイトにする
・減色する(たまに色数多いほうがサイズ小さくなるときもある)
・大きさ(ピクセル数)を小さくする。大きさ変えたくないときは倍角にして解像度下げる。
・透過色を使う
■あとがき
Windowsを使っているのでソフトウェアはそれに対応したものを挙げています。
まだある気がするけど思い出したら追記します。
お知らせ:国際GIFアニメアワード2013 今年も開催!
エントリーお待ちしております。