「GIF画像を作ってほしい」という依頼があり、After Effectに挑戦しました。
要望聞き取り
「文字をピカピカさせたい」という要望でした。
クライアントの意図を汲み取り、いかに最適なエフェクトを見つけるか！腕の見せどころです。
「ピカピカ」「キラキラ」「キラン」「ピカッ」など表現が人ぞれぞれ。
今回のクライアントさんとは長い付き合いなので、なんとなく好む雰囲気を把握しています。
おそらくこの人の言う「ピカピカ」は分解すると「キラン⭐︎キラキラ･:*」でしょう。
初めてのクライアントさんだったら、ここで慎重な聞き取りが必要ですね。
最適なエフェクトのチュートリアルを探す
Google検索で、検索ワードを探る
Google検索で最適なエフェクトを見つけ、わかりやすいチュートリアルを探す。これが常にぶっつけ本番デザイナーの手法です。
「キラッ」「キラキラ」「瞬き」「スター」など、徐々にこの界隈で使われている用語を見つけては検索していきます。
Youtubeの関連動画をチェック
Googleで良さげなチュートリアルを見つけたら、3つくらい見てみます。
あとは、関連動画を掘っていきます。いい先生を見つけたらブックマーク🔖
経験上Google検索で一発で見つけるより、Youtubeの関連動画からの掘り出し物が多いです。
今回のチュートリアルはこちら
今回はどうやら以下の2つの作業で実装できそうです。
- 文字を「キラン」とさせる：「Light Effect」
- 光った後の「キラキラ」：スターを散りばめる作業
①のために参考にしたチュートリアルはこちら⬇︎
（他にも見たけど、文字を立体的にもしたかったのでこちらで）
②のために参考にしたチュートリアルはこちら⬇︎
やってみる
AfterEffectでチュートリアルに従って作業していきます。
AfterEffectはイラレとPremierProの間という感じのUIですね。Adobeに慣れている人はすんなり操作できそうです。
分からない部分は、チュートリアルをコマ送りにして作業を凝視したり、入門的な動画や検索を挟みつつ、完了していきました。
（作ったものは納品物なので載せられず、練習用のデータです🙏）
書き出し、調整
書き出し
「ファイル>書き出し>Adobe Media Encorder キューに追加…」で書き出します。
Adobe Media Encorderが立ち上がるので、右上にある緑色の▶︎を押して、完了を待ちます。
できました！
おそらく容量がデカすぎて動かない、、
調整
サイズ＆容量をミスったので、調整します。Photoshopでできました。
GIF自体の長さも、レイヤーを減らすことで調整できました。前後の冗長な部分を削除します。
GIFで書き出します。「Web用に保存」で「GIF」を選び、右下のループを「無限」に設定。
左下の表示で容量を確認しながら、重ければカラーを減らします。
調整できました！
実際の納品物は300KBが上限（LINEに納入するため）で、画像自体も装飾が多かったので、容量を減らすのに苦労しました。
いろいろやってみたけど最後はブラウザのサービスで荒療治しました。。
このサイトの「Optimize」でゴリゴリ容量を削減。
ガビガビになるので、もっと丁寧に容量ダウンすべきなのですが、一旦こういう方法もあるという共有でした！
追記：LINE用の注意点
失敗を繰り返したのでまとめておきます⬇︎
- 画像を圧縮しておく
※生成するAPNGが300KB以内になるための画像の容量はAIに聞いた。5枚の場合1枚30KB前後だった。 - 圧縮した画像からAPNGを生成
- https://apng-maker.vercel.app/
⬆︎UIが分かりやすいがループ数2以上はエラーになった - https://ezgif.com/apng-maker/ezgif-464c95c34dd7c4e7-split.html
⬆︎UIが分かりにくいがループ数が増えても作れた
- https://apng-maker.vercel.app/
- APNGの分析サイトで「サイズ・フレーム数・秒数」を確認する
【注意】「アニメ画像に変換する君」はおすすしない。秒数がズレる。
APNGで納品なら、APNGとして圧縮すべし
途中でGIFに変換して圧縮したりしたからか、LINEに納入できない事態に。
フレームを10から5にまで減らし、以下のAPNG圧縮サイトを交互に使用して解決しました！
フレームレート＝画像数ではなかった
LINE用APNGは、以下の要件を満たさないとリジェクトされるようです。
- 画像数：5枚以上
- 秒数：1~4秒（○秒ピッタリに）
- ループ数：1以上（0=無限ループはNG）
フレームレート＝画像数だと勘違いしていた、さらに秒数を確認していなかったので混乱しました。
結局Photoshopで「レイヤーをファイルに保存」で各画像を書き出し、「アニメ画像に変換する君 (Windows/Mac)」でAPNGを作成しました。
「アニメ画像に変換する君」の設定は以下で
- フレームレート：2.5 fps
（計算式：5枚 ÷ 2.5fps = 2秒（これが1ループの長さになる）） - ループ回数： 2 回
- 合計再生時間：4.0s
（計算式：2秒 × 2回 = 4秒）
これで、右上の表示が「再生時間 4.0s」になればOK！
300KBを若干オーバーしたので上記の方法で圧縮しました。
先に画像を圧縮した方が綺麗に容量削減できそう
圧縮したら秒数が変わったので、画像を圧縮してやり直し。
↑勘違いでした。でも、画像を先に圧縮した方が断然容量を小さくできたので、こちらの方がおすすめです！
画像5枚をそれぞれ30KB付近まで圧縮したい。
以下のサイトで圧縮しました。右のツールで「OxiPNG」を選択。色数を減らして30KBになるくらいでDL。
あとは上記のように「アニメ画像に変換する君」でAPNGを作成しました。
秒数が原因でリジェクトされる
「アニメ画像に変換する君」の設定では「4秒」と表示されていたが、以下のAPNG分析サイトで確認すると「2.5秒」になっている。ループ2回にしたから何か起こったのか？？？？と思い、ループ1回でやり直してみる。
「5秒」との表示！なんで？？？？
結局、こちらのサイト⬇︎で、ブラウザに画像をアップロードして生成しました。
さいごに
AfterEffectの作業も初めて難しい部分もありましたが、なんとかなりました。
行き詰まったら、Google検索とAIに質問しまりましょう！笑
今後もちょっとアニメーションがある画像は需要があると思うので、徐々に精度と効率を上げていきたいです💫
コメント