デザイン

デザイン

【デザイナー必見】Adobe PhotoshopとAfter Effectsを使ったアニメーションGIFの書き方

Designmodo

Designmodo publishes web design articles, tutorials and has a great shop with the best WordPress and Bootstrap themes, plugins, UI Kits and more.

本記事は、How to Export an Animated GIF using Adobe Photoshop and After Effects (Part 3)
翻訳・再構成したものです。
配信元または著者の許可を得て配信しています。

619 views

読了時間 : 約1分46秒

アニメーションGIF画像は、Web上で最も人気のある画像の1つです。

デザインを作成してアニメーション化するプロセスは別の話ですが、今日のチュートリアルでは、アニメーションGIFをエクスポートする方法を紹介します。

 

 

ステップ1:添付のAfter Effectsファイルを開く

まず、GIF画像にしたいファイルを開きます。添付したファイルをダウンロードして、ファイル「bike」を選択します。

キーボードで0(ゼロ)を押すとファイルがレンダリングされます。自転車が動いているのが見えるでしょう。

 

これは簡単なアニメーションで、After Effectsに慣れているなら、あっという間に似たようなものを作れるはずです。

ステップ2:JPGシーケンスのエクスポート

ファイルがアニメーション化されてエクスポートの準備ができたら、下のように[ファイル] – [エクスポート] – [レンダーキューに追加]をクリックしてください。

 

画像をレンダリングする前に、設定を確認してください。最適設定をクリックします。

 

最高の設定にしたいなら、品質が「最高」、解像度が「フル」になっていることを確認してください。他の設定はそのままにしておきます。

 

下にある様に「劣化のない」をクリックします。これは今使用した「最高設定」オプションのすぐ下にあります。

 

「フォーマット」はドロップダウンで「JPEGシーケンス」を選択して[OK]をクリックします。

これであなたのAEオリジナルファイルから複数のJPG画像が作られます。

すべてのJPEG画像が合成されアニメーションができるのです。

 

「出力先」の横の名前をクリックして出力先を選択してください。

 

「レンダリング」をクリックします。これによりJPEGシーケンスがレンダリングされてフォルダに入ります。

ステップ3:アニメーションGIFをエクスポート

Adobe Photoshopを開いてJPEGシーケンスがあるフォルダに移動し、フォルダ内の最初の画像を選択して「画像シーケンス」にチェックを入れます。

これでビデオファイルが作成されます。 [開く]をクリックします。

 

新しいポップアップウィンドウが開きます。毎秒30フレームの設定のままにします。

すでにやった事があるのであれば、25fpsを選んでもかまいません。

 

[ファイル] – [エクスポート] – [Web用に保存]をクリックします。

 

このようなウィンドウが出てくるはずです。

 

GIF画像を作成するには、右の角にある「GIF」を選択してください。

 

下にある[繰り返し]を選択します。このオプションでアニメーションがループするので、ずっと動き続けます。

 

[保存]をクリックして保存先を選択します。

【コンビニでも使える!メルペイ初回利用1000円分招待コード】

当サイト限定招待コード:CMUTDF

 
・利用可能店舗:メルカリ、コンビニ、ドラッグストア等
・金額:1000円分
※さらにメルペイスマート払で2000円分ポイント!
 友達招待でお互いに1000円分ポイント!2人以上招待でUSJ貸し切りイベントに抽選招待も!

メルカリ-フリマアプリ&スマホ決済メルペイ

メルカリ-フリマアプリ&スマホ決済メルペイ

無料

 

ピックアップ! さらに今このキャンペーン中です↓

期間中の金・土限定でd払い利用で最大20%のdポイント還元中!
■エントリー期間:2020/2/29(土)23:59 まで
■キャンペーン期間:2020/2/24/(月)23:59 まで

 

 

Seleqtをご覧頂いた方だけに「朗報」
\当サイト限定特別クーポン/

【Uber taxi初回利用2000円オフクーポン】
JP20gd6nv7

 

以下のリンクから『プロモーション コードを追加する』で「JP20gd6nv7」を入れてください。初回利用が2000円オフになります!
※プロモコードは日本国内でのみ利用可能

 

2000円オフで登録» »当サイト限定の初回利用2000円オフのクーポンを使って登録はこちら!

 

アプリDLはこちらから↓

Uber

Uber

 

 

 

Seleqtをご覧頂いた方だけに「朗報」
\当サイト限定特別クーポン/

【UberEats初回1000円オフクーポン】
ins6je2v

 

対象店舗:マック、ガスト、スタバ、ピザハット、松屋 等
※1000円分無料で頼めます。〇〇円以上とかもナシ!完全無料でお試しOK
割引額:1000円引き

 

1000円オフで登録» »当サイト限定の初回利用1000円オフのクーポンを使って登録はこちら!

 

アプリDLはこちらから↓

Uber Eats: 地元で人気の料理をお届け

Uber Eats: 地元で人気の料理をお届け

無料

 

おすすめ新着記事

おすすめタグ