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

AfterEffects 投稿日:2017.2.20  更新日:

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とデータサイズを相談しながら決めていきます。) 今回使用したサンプルデータはこちらからダンロードできます。

 

Adobeのソフトがまるっと使える

「After Effects」に関する書籍のご紹介

google広告

google広告

この記事を書いた人:

おすすめ記事

[After Effects CC] Illustratorで作成したパスに沿って線を描く最も簡単な方法

aiデータをAfterEffectsに読み込んで、線をなぞる動画をつくる簡単な方法をご紹介します。初心者向けに書いてますので、動かす部分だけを見たい方は[4. …