PhotoshopとAfterEffectsで簡単に透過gifアニメのアイコンを作る方法
AfterEffects
WEBサイト内のアイコン等を、ワンポイントでgifアニメにする際の作り方をご紹介します。 今回はボタン等に使った際、背景色が変わってもいいように透過gifアニメを作成しています。
1AftterEffectsでアニメーションを作成する。
まずは動かしたいアイコンのデータを読み込んで、AfterEffectsで数秒でループするアニメーションを作成します。あとでPhotoshopで編集する際に変更も可能ですが画面幅はこの時点で決めておいたほうがいいと思います。（こちらのサンプルデータでは300×300pxの画面幅で1秒でループするようにしています。）
2透過情報(アルファチャンネル)を残して書き出す。
今回は透過gifアニメを作成するので、アルファチャンネルの情報を持ったデータを書き出します。 1. メニューの[コンポジション]＞[レンダーキューに追加] 2. レンダーキューの[ロスレス圧縮]をクリック 出力モジュール設定ダイアログが出るので…
・形式：QuickTime
・チャンネル：RGB＋アルファ
・色深度：数百万色＋
・カラー：ストレート（マットなし）
・形式オプション：アニメーション （オーディオ出力オフ）
を選択し、[OK]。 出力先を設定して書き出します。
3Photoshopで読み込んでgifで書き出す。
②で書き出しだ動画データをPhotoshopに読み込むとレイヤーパネルに[ビデオグループ]が生成され、タイムラインが表示されますので、動作確認ができたら[Web用に保存(command＋shift＋option＋S)]からgifデータを書き出します。
ループオプション：無限 を選択して保存すると完成です。 （設定は書き出すiconとデータサイズを相談しながら決めていきます。） 今回使用したサンプルデータはこちらからダンロードできます。
「After Effects」に関するその他の記事
[st-catgroup cat=”83″ page=”5″ order=”desc” orderby=”id” child=”on” slide=”on” slides_to_show=”3,3,1″ slide_date=”” slide_more=”ReadMore” slide_center=”on” fullsize_type=””]
Related article
「AfterEffects」の関連記事
Comment
コメント