はじめに
先日Qiitaでは、記事投稿が完了したあとに、記事投稿を労うModalを表示するようにアップデートしました。
そのモーダルでは、以下のような 
Qiitanのアニメーションが表示されます。
 |
 |
|---|---|
| デフォルト | ふうせん |
※ Qiitanかわいい〜
このQiitanアニメーションを作成するにあたり、背景が透過したgifを綺麗に描き出せずに苦労しました。
そのためこの記事では、綺麗に描き出せない原因と
AfterEffectsで作った背景が透過したアニメーションを綺麗にgif書き出す方法を紹介します。
綺麗に描き出せないgif
気になるところ
AffterEffectsで作ったアニメーションをMedia Encoderでgifに書き出すとはこんな感じになっています。
このgifアニメーション で気になるポイントは以下の2点です。
- Qiitanの周りに白い枠線が出ること
- 風船部分の色のノイズがあること
原因
【Qiitanの周りに白い枠線が出ること】
Qiitanの周りの部分の白い枠線は、Gifが256色しか保存できないことが原因です。
背景を透過されるアニメーションでは、alpha(透明度)を含めて、256色になるため、圧倒的に色がたらなくなります。
そのため、1色（白）のグラデーションで表現をするため、枠線が白くなってしまうということです。
【風船部分の色飛びが出ること】
色飛びをする原因は、Media Encoderでの書き出しの仕様だと思います。
Media Encoderがgifでの書き出しが得意ではないのかもしれません。
解決法
これらの原因を解決するためには、以下のようにGIFにします。
- AfterEffectsから、movファイルで書き出す。
- PhotoShopでmovファイルをgifへ書き出す。
① AfterEffectsから、movファイルで書き出す
AfterEffectsで作成したアニメーションをmovファイルへ書き出すのは、透明度のある動画ファイルを作成できるからです。
なおかつ、綺麗に描き出せない原因を解決するため、PhotoShopで色を調整する必要があるため、PhotoShopで読み込める動画形式のmovファイルで書き出します。
以下の画像のように、ビデオ出力のチャンネルをRGB + アルファで書き出してください。
※ movファイルへ書き出す方法は、Media Encoderでも、レンダラーキューでもどちらでも大丈夫です。
② PhotoShopでmovファイルをgifへ書き出す
次に①で作成したmovファイルをPhotoShopでgifへ書き出します。
まずは、PhotoShopをひらき、movファイルをひらきます。
次に、「ファイル > 書き出し > web用に保存（従来）」で書き出します。
書き出しのモーダルから、「マット」をなしに設定して書き出して完成です。
まとめ
この記事では、AfterEffectsで背景が透過したgifアニメーションを綺麗に書き出す方法を紹介しました。
gifが綺麗に描き出せないという方は、ぜひこの方法をおためしください。
最後まで読んでくださってありがとうございます！
普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。