2014年2月24日月曜日

【Photoshop】GIFアニメを作ってみた

 何はともあれ、一枚を見ていただきましょう。
送信者 他いろいろ

 GIF形式のファイルは、その昔特許の関連で、ちょいとした紛争が御座いまして、変換ソフトなんかを作ると、フリーソフトだろうと、何だろうと、ライセンス料払えやコラって事になっていました。
(この辺、もうちょっと込み入っているわけですが)
 今は、パテント切れになって、無料になっているので安心。
 それもあってか、はたまた、いいソフトが出てきているのか、手の込んだGIFアニメを最近よく見かけますね。

 さて、GIFの形式は最大256色までしか表示できません。(2, 4, 8, 16, 32, 64, 128, 256色のどれかを選択できる。当然色数が少ないほどファイルサイズは小さくなる)
 写真などトゥルーカラーの画像の場合、当然色数は6.5万倍もあるわけで、その分を何とか減らさなければならないのです。
 その上手い具合に減らす技術が、減色アルゴリズムだったり、ディザアルゴリズムだったりするわけですね。GIF変換するときに、特定とか、知覚的とか、誤差拡散法とかって出てくるアレです。
 具体的には、似たような色を一つにまとめるとか、階調をなるべく自然に間引くとかそう言う事をやっています。

 アニメーションと言えば、PNGアニメーションもあるんですが、Photoshopから直接作れないっぽくて、面倒臭いんでヤメました。
 まぁ、PNGアニメーションなんて、非対応のブラウザも多いし、今やるべき話じゃないでしょう。


 PhotoshopCCでこういうアニメーションを作る方法ですが……
①少しずつ画像をズラしたレイヤーを沢山用意する。
  (アクション機能を使うと便利ですよ)
②適度なサイズにトリミングする
③ウィンドウ→タイムラインを選択して、タイムラインウィンドウを開く
④タイムラインウィンドウの真ん中のボタンの右側の▼ボタンを押して、「フレームアニメーションを作成」を選択して、出てきたボタンを押す。
⑤タイムラインウィンドウの右上のボタンを押して、「レイヤーからフレームを制作」を選択。
 そうすると、一番下のレイヤーから順番にフレームが並んでいきます。
⑥タイムラインの最初の画像を選択して、「shift」キーを押しながら、最後の画像を選択する。
⑦画像下の「0秒」ってなってるのを選択して、ディレイ時間を変更。
 ディレイ時間とは、1フレームを表示している時間の長さのこと。(普通に流れる映像を作るだけなら、⑥と⑦はやらなくてもOK)
⑧「ファイル→Web用に保存」から、「GIF」を選択。
 普通に写真で作るなら、上から「特定」「誤差拡散法」「透明部分」のチェックを外す。
 アニメーションのループ回数を、無限にするのか、一度きりにするのか、「その他」にして回数を決めるかする。
 プレビューの右下に画像のサイズが表示されるので、一応確認。
⑨保存ボタンを押して、画像を保存する。
⑩レイヤーを沢山切ったPSDファイルは当然デカくなり、2GBを超えると警告が出て、保存できなくなる。その時は、「ファイル→別名で保存」よりファイルの形式をビッグドキュメント形式(PSB)に変更して保存すれば良い。

 さて、一番最初の画像は、WSVGA(1024x576)の解像度で作ったファイルです。
 次に、HVGAW(640x360)と、WQVGA+(427x240)で作ったファイルを並べておきます。





 ここまで来ると、気になってくるのがファイルサイズです。
 Picasaの都合上、どうやら40MB以上のファイルは上げられないようです。
 解像度とフレーム数の違いだけなので、一覧表にしておきました。

解像度フレーム数ファイルサイズ(MB)
FullHD1920x108010273.7
HD 720p1280x72010245.3
WSVGA1024x57610233.7
HVGAW640x36010213.8
WQVGA+427x2401026.47
HVGAW640x36030340.4

 元の画像が同じなら、画像の面積と、フレーム数にほぼ比例していると言えますね。
 一応、コレでも圧縮しているので、単純な比例関係ではないのですけど。
 まぁ、HDなんかで保存するより、普通に動画にしてしまった方が圧倒的に容量が少なくて済みそうなんですが……