After Effectsの覚書です。
AE(After Effects)からPNGの連番をエクスポートする手順
ファイル > 書き出し > レンダーキューに追加
出力モジュール設定
- 形式：PNGシークエンス
- チャンネル：RGB + ALPHA(アルファ)
出力先を決めてレンダリング。
export\webp\PNG-Sequenceと適当にエクスポートするフォルダを作成します。
AE(After Effects)からmp4の書き出しする手順
mp4で書き出す場合も多いかもしれません。その場合はH264になっていれば問題ありません。
出力モジュール設定
- 形式：H.264
AE(After Effects)のレンダリング手順(PNG/mp4共通)
AE(After Effects)のレンダリングでサイズ変更
個人的にYoutubeぐらいで使えるサイズで作ることが多いですが、Webで使う場合はもっと小さくしたいときがあります。サイドバーで使う場合は300pxぐらいにしてもよいでしょう。
何らかの事情でサイズを変更したい場合、
出力モジュール > サイズ変更 > 変更サイズ
カスタム値の設定できます。コンポジットの変更とは違ってレンダリング時に一時的にサイズを変えられるようです。
AE(After Effects)のレンダリングで時間指定
時間を決めたい場合は、レンダリング設定
サンプリング時間の[カスタム]
レンダリング時にワークエリアという選択肢もありました。ワークアリアはエクスポートやプレビュー時の時間をタイムラインで決めておけるものです。
AE(After Effects)のレンダリング
最後に[レンダリング]のボタンをおします。
レンダリング後、レンダーキューからはMACのfinderは開けないようですが、プロジェクトパネルの素材からは右クリック > finderで表示で開けるようです。
AE(After Effects)のレンダーキューを削除
- 消したいレンダリングの[コンポジション名]をクリックします(それ以外のところは選ばないです)
- delete
AE(After Effects)でレンダリングをすると色で変わる
色数が少なくなって色がくすんだりします。この問題はちょっと複雑だけど、まずはこれ。
ファイル > プロジェクト設定 > カラーのタブ > 作業カラースペース
デフォルトの「なし」は色幅が広いけど、レンダリングすると問題になったりします。
AEの作業カラースペースを変更します。
AEの作業カラースペースどれにしてますか？
— T.144 (@tet144) June 29, 2022
複数人でやる人やオンラインエディターに渡したりする人
Photoshop、イラレ(Illustrator)とのカラー設定もチェックします。
【AEに取り込んだPSDデータの色味が変わってしまう】
— 稲垣佑樹 (@p1yuki) January 8, 2020
解決方法教えて頂きました！
AEのプロジェクト設定→カラー→作業用スペース、これをPhotoshopと合わせる。で解決しました！
教えてくれたのは@Inoshita0427 さん！
普段からとても有益な情報を発信されてるので動画興味ある方フォロー推奨です！ https://t.co/0wPxx6POJF pic.twitter.com/MfCiTMmknp
Affinity PhotoやAffinity DesignerはデフォルトsRGB IEC61966-2.1です。
どちらがいいかですが、AdobeRGBの方が明るい色がでるためPNG連番などはAdobeRGBにすることが多いですが、実際の映像をみて判断するのが１番でしょう。
AE(After Effects)でレンダリングしても色が反映されない
プロジェクト設定で色を変更しても、レンダリング時は「出力モジュールの設定」も正しく変更しないと反映されないようです。
出力モジュールの設定 > カラー
- 出力カラースペース：AdobeRGB(1998)
- カラースペースを埋め込むをチェックします。
PNG連番で検証しました。
After Effects(AE)からWebPをエクスポート
After EffectsからWebPの書き出す直接的ない方法はありません…。プラグインなども確認しましたが、ぱっと見、なさそうです(軽くみただけ)。
PNG連番で書き出したのち、アニメ画像に変換する君を使っています。
MacとWindows版があります。
コマンドラインならGoogleのimg2webpですかね。
アニメ画像に変換する君の使い方
使い方がみればすぐわかる程度のものなので、テストしたことなどまとめていきます。
以前の設定は覚えてくれているため、設定の変更がなければ次の手順でおしまいです。
- すべての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をアニメーションで書き出せないっぽいです。XnConvertの静止画のならWebPはエクスポートできます。
GIMP、krita
グラフィックソフトのGIMPやkritaがあります。
kritaとアニメ画像に変換する君は試したところ、うまくいきました。
ImageMagickやFFmpeg
他の選択肢として、FFmpegやImageMagickがあります。コマンドラインなので見ながら確認できません。
コマンドラインなら、img2webpが最適解（Google公式ツール）
「アニメ画像に変換する君」の画質が微妙に劣化する場合が気になり、こちらを導入してみました。
先に容量の結果だけ個人メモを記載しておきます。
- 「アニメ画像に変換する君」の容量最適化なしWebP：2.6mb
- img2webpのlossless：1.1mb
- 「アニメ画像に変換する君」の容量最適化ありWebP：585kb(やや画質劣化)
品質重視のロスレスの場合はimg2webpの方がよさそうですが、品質はご自身の目でご確認ください。
コマンドラインなら、ImageMagickやFFmpegよりもimg2webpが最適解です。WebPはGoogleの開発フォーマットであり、img2webpはGoogleの公式ツールだからです。
Macで変換する手順は次のとおりです。
brew --version
brew install webp
img2webp -version
cdで移動(cdスペースと打ったのち、フォルダをドラック&ドロップするとパスが入力される)
img2webp -d 33 -lossless frame*.png -o animation-lossless.webp少し悩んだのは-dがミリ秒になり割り切れないということです。
- 理想の30fpsの場合
1秒＝1000ミリ秒なので、理想の1フレームの表示時間は
1000 ÷ 30 ≒ 33.33ミリ秒 - 整数値で指定する場合
- 33ミリ秒の場合
33 × 30 = 990ミリ秒
→ 1秒あたり 1000 ÷ 33 ≒ 30.3fps - 34ミリ秒の場合
34 × 30 = 1020ミリ秒
→ 1秒あたり 1000 ÷ 34 ≒ 29.4fps
- 33ミリ秒の場合
どちらも完全な30fpsにはならないものの、33ミリ秒の方が約30.3fpsとなり、30fpsに近い値となるため、一般的には33ミリ秒を採用するのが良いと割り切りました。他の方法でやっても結局はWebPの仕様に依存します。
1回ループを指定する場合は次のとおりです。
img2webp -d 33 -lossless -loop 1 frame*.png -o animation-lossless.webp圧縮する場合は公式のドキュメントを参照してください。
フレームごとのオプションは、コマンドライン引数として続く画像に適用されます。各特定の入力画像の前に何度でも変更できます。
-d int画像の再生時間をミリ秒単位で指定します。
-lossless, -lossyロスレスまたはロスありの圧縮モードを使用して、次の画像を圧縮します。デフォルトのモードはロスレスです。
-q float圧縮率を 0 ～ 100 の範囲で指定します。デフォルト値は 75 です。https://developers.google.com/speed/webp/docs/img2webp?hl=ja
-m int使用する圧縮方法を指定します。このパラメータは、エンコード速度と圧縮ファイルのサイズと品質のトレードオフを制御します。有効な値の範囲は 0 ～ 6 です。デフォルト値は 4 です。値が大きいほど、エンコーダは追加のエンコードの可能性を検査し、品質の向上を決定するためにより多くの時間を費やします。値を小さくすると、処理時間が短縮されますが、ファイルサイズが大きくなり、圧縮品質が低下します。
img2webp -d 33 -q 80 -m 6 frame*.png -o animation-lossy.webplossy圧縮とはデータ内容を少し削減して圧縮するような圧縮方式です。容量が減る反面、劣化が見られます。主にロスレス圧縮（可逆圧縮）と対比されます。
ご参考になれば幸いです。
コメント