webp形式のアニメーションを作る方法は?

厚くて布団をかけずに寝るのに朝しっかり布団をかけてるatsushiです。hatena03.gif

WEBサイトのボタンなどにアニメーションを付けるといったらGIFアニメーションがほとんどでしたが、最近は、画像の容量を抑えるためにもwebp形式の画像を使うことが多くなってます。

GIFアニメーションは、Photoshopで作ることが出来ましたが、webpでは作ることができません。

そもそもPhotoshopは、webp自体に優しくなく、「書き出し」-「WEB用に保存」で保存しようとしてもwebpで保存することができないのです。
↑ほんとこれは何とかしてほしいです。

では、どうやって作るかですが、いろいろ調べてみると下記のアプリで作ることができることがわかりました。

アニメ画像に変換する君

名前がそのままですが、Microsoft storeからダウンロードできるアプリで、連番で作ったPNG形式の画像を繋いてアニメーションを付けることができます。

使い方は、いたって簡単!Photoshopなどで、アニメーションにしたい画像を作り、ファイ名を連番にして「アニメ画像に変換する君」に読み込み、フレームレートを決めるだけです。emoji205.gif

アニメ画像に変換する君の画面

実際の画面はこんな感じ!

複雑なことはできませんが、ボタンにつけるアニメーションならちょうどいいぐらいです。

webp形式のアニメーションを試すならぜひ、使ってみてください。neko.gif

トラックバックURL