PhotoshopとAfterEffectsで簡単に透過gifアニメのアイコンを作る方法 | bakuBLOG+

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=””]

「AfterEffects」に関する記事一覧はこちら

Related article

「AfterEffects」の関連記事

Comment

コメント

コメントを残す

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。