After Effectsの覚書です。
AE(After Effects)からPNGの連番をエクスポートする手順
ファイル > 書き出し > レンダーキューに追加
出力モジュール設定
- 形式：PNGシークエンス
- チャンネル：RGB + ALPHA(アルファ)
出力先を決めてレンダリング。
export\webp\PNG-Sequenceと適当にエクスポートするフォルダを作成します。
mp4の書き出し
mp4で書き出す場合も多いかもしれません。その場合はH264になっていれば問題ありません。
出力モジュール設定
- 形式：H.264
AE(After Effects)のレンダリングでサイズ変更
個人的にYoutubeぐらいで使えるサイズで作ることが多いですが、Webで使う場合はもっと小さくしたいときがあります。サイドバーで使う場合は300pxぐらいにしてもよいでしょう。
何らかの事情でサイズを変更したい場合、
出力モジュール > サイズ変更 > 変更サイズ
カスタム値の設定できます。コンポジットの変更とは違ってレンダリング時に一時的にサイズを変えられるようです。
AE(After Effects)のレンダリングで時間指定
時間を決めたい場合は、レンダリング設定
サンプリング時間の[カスタム]
レンダリング時にワークエリアという選択肢もありました。ワークアリアはエクスポートやプレビュー時の時間をタイムラインで決めておけるものです。
AE(After Effects)のレンダリング
最後に[レンダリング]のボタンをおします。
レンダリング後、レンダーキューからはMACのfinderは開けないようですが、プロジェクトパネルの素材からは右クリック > finderで表示で開けるようです。
AE(After Effects)のレンダーキューを削除
- 消したいレンダリングの[コンポジション名]をクリックします(それ以外のところは選ばないです)
- delete
After Effects(AE)からWebPをエクスポート
After EffectsからWebPの書き出す直接的ない方法はありません…。プラグインなども確認しましたが、ぱっと見、なさそうです(軽くみただけ)。
アニメ画像に変換する君を使っています。MacとWindows版があります。
アニメ画像に変換する君の使い方
使い方がみればすぐわかる程度のものなので、テストしたことなどまとめていきます。
以前の設定は覚えてくれているため、設定の変更がなければ次の手順でおしまいです。
- すべてのPNGをドラックアンドドロップ
- プレビューで確認
- アニメ画像を保存する
用途：Webページ用アニメーション
アニメーション設定
- フレームレート(FPS) 30
- ループ回数：無限ループのチェックを外す
- ループ回数：１
画質設定
- WebPファイル出力にチェック
- 容量最適化にチェック
アニメ画像に変換する君の容量最適化サイズ
同じアニメーションでテストしてみました。結論からいえば、WebPとAPNGどちらも選べるのなら、WebPの容量最適化ありがよさそうです。zopfliよりWebPの容量最適化ありの方がファイルサイズが少なかったです。
- WebP容量最適化なし：17541kb
- WebP容量最適化あり：2637kb
- APNG zopfli(変換が遅い、Googleが開発)：11515kb 変換に1時間近くかかった…。
- APNG 7zip(変換が中間)：11692kb 変換に25分ぐらい。
- APNG zlib(変換が早い)：12733kb 変換は1分ぐらい。
変換中にちょっとWikipediaをのぞいてみました。ZopfliはGoogleだけど異常に時間がかかります。圧縮重視ということでしょう。
Zopfliの出力はzlibの最大圧縮のものより一般的に3 – 8%小さくなるが、圧縮処理には80倍の時間が必要となる
https://ja.wikipedia.org/wiki/Zopfli
7zipは個人的にも昔からよく知っています。1999年からあります。
2007年にSourceForge.netのコミュニティにより「技術デザイン」賞と「ベストプロジェクト」賞に選ばれた
https://ja.wikipedia.org/wiki/7-Zip
ジャン＝ルー・ガイイさんはGoogleに入ったみたいですね。マーク・アドラーさんはカリフォルニア工科大学で働いているみたいです。
zlibの作者は、ジャン＝ルー・ガイイ (Jean-Loup Gailly) とマーク・アドラー (Mark Adler)
https://ja.wikipedia.org/wiki/Zlib
全部C言語かC++で開発されています。
アニメ画像に変換する君以外に、ImageMagickなどがありますけど、これだけ最適化されていればいいかなとまだ試していません。
Web上で使うのならSEOやページ読み込み速度などの問題がありますけど、他の用途なら多少サイズが大きくてもそこまで気にしなくてもよいかもです。むしろ品質重視です。
アニメ画像に変換する君のAPNGエラー
圧縮方式をどれに変更してもエラーがでますね。→ためしにAEで書き出すサイトを横300にしたら書きだせました。横1080はダメでした。apngの拡張子ってただの.pngなんですね。
webPは大きなサイズでも問題なく書き出せました。
シンプルですが使いやすいソフトという気がします。助かりました。
アニメ画像に変換する君のデータ確認
Windowsでirfanviewというソフトを使いました。アルファの抜けも確認できます。
もちろん、Chromeでも再生できますが、アルファの抜けは確認できないようです。
After Effects(AE)からWebPをエクスポート(他のソフトは!?)
*注)昔、検証したため変わっている可能性があります。
infanviewはPNG連番読み込みができないっぽい
infanviewはwebPはエクスポートできるようだけど、PNGの連番読み込みの対応していないようです。
XnConvertはWebPの書き出しができないっぽい
XnConvertはPNG連番の読み込みはできますが、WebPをアニメーションで書き出せないっぽいです。静止画ならエクスポートできます。
ImageMagickやFFmpeg
他の選択肢として、FFmpegやImageMagickがあります。コマンドラインなので見ながら確認できません。
GIMP、krita
グラフィックソフトのGIMPやkritaがあります。
kritaとアニメ画像に変換する君は試したところ、うまくいきました。
ご参考になれば幸いです。
コメント