20th Anniversary

Web制作・ホームページ作成なら、東京・新宿のビットビーンズ

BLOG

Beans ブログ

Bit Beansのデザイナーやエンジニアを中心としたスタッフによる情報発信ブログです。
Web制作、デザインや技術、ワークスタイルに関する情報を日々お届けします。

AfterEffectsでGIFを書き出す方法紹介

こんにちは!社会人になって1年、東京に住んで1年が経ち、建物や展示会など日々いろんなところへ行って東京エンジョイしてるショウメイです!

実はAfter Effectsで直接gif書き出しする方法が現在ありません・・・なので違うソフトを用いてAfterEffectsでGIFを書き出す方法を2つ紹介します!
一つ目はAfterEffectsからPhotoshopで書き出す方法、2つ目はAfterEffectsからMedia Encoderで書き出す方法です。
今回制作したGIFはこちら!作り方は次回紹介します。

After EffectsからPhotoshopでGIFを書き出す方法

普段私がやっている、Photoshopを使用して書き出す方法を紹介します。

After Effectsのコンポジション<レンダーキューに追加を選択

出力モジュールを選択して、形式をQuickTime、ビデオ出力のチャンネルをRGB +アルファに変更<OKを押してレンダリングする

先ほどレンダリングしたmov動画をPhotoshopでひらき、ファイル<Web用に保存(従来)を選択

GIFに変更して保存で完了です!

おさらい

1.After Effectsのコンポジション<レンダーキューに追加を選択

2.出力モジュールの形式をQuickTime、ビデオ出力のチャンネルをRGB +アルファに変更<レンダリングをする

3.Photoshopを開き、ファイル<Web用に保存(従来)を選択

4.GIFで保存

After EffectsからMedia EncoderでGIFを書き出す方法

次に、Media Encoderで書き出す方法を紹介します。

After Effectsのコンポジション<Adobe Media Encoderキューに追加を選択(Media Encoderが起動します)

H.264など書かれているところを選択

書き出し設定の形式をアニメーションGIFに変更<OK<右上の再生ボタンを押したら書き出し完了です!

おさらい

1.After Effectsのコンポジション<Adobe Media Encoderキューに追加を選択

2.H.264など書かれているところを選択

3.形式をアニメーションGIFに変更<OK<右上の再生ボタンを押す

いかがだったででしょうか?After Effectsで作った動画をGIFにする方法を2つ紹介しました。WEBサイトにGIFアニメがあることで、グッとデザインが素敵に見えることもあります。
どちらも簡単にできますのでぜひGIFを作ってみてください!

御社の魅力発信、お手伝いします。

まずはお気軽にご相談ください。

この記事を書いた人

武将(デザイナー)

ショウメイ

大阪が生んだスーパーデザイナー。テンションが上がると関西弁が出る。ハンターハンター大好き委員会

大阪が生んだスーパーデザイナー。テンションが上がると関西弁が出る。ハンターハンター大好き委員会

CATEGORY

記事カテゴリー

RECOMMEND

おすすめ記事

TAGS

タグ

  • SHARE