PhotoshopでIllustratorのイラストからGIFアニメを作る

Adobe Illustratorで描いたイラストレーションをPhotoshopを使用してGifアニメーションにする方法をご紹介します。

動画専用のソフトを使用しなくても、Photoshopの機能だけでアニメーションを作成する事が可能です。

1. アニメーションのコマを作成

Illustratorでオブジェクトを動かして、アニメーションのコマ毎に画像に書き出します。

Adobe Photoshopを開きファイル＞スクリプト＞ファイルをレイヤーとして読み込み

1.で作成した動画用の画像ファイルを全て選択してレイヤー
として読み込みます（以降は全てPhotoshopでの作業）。

ウィンドウ＞タイムラインでタイムラインパネルを表示

タイムラインパネルのフレームアニメーションを作成を選択しクリックすると一コマ目がタイムラインに読み込まれます。

残りのレイヤーを全て選択しタイムラインパネルのレイヤーからフレームを作成を選択

残りのレイヤーが読み込まれるので順番を調整します。

タイムラインパネルでコマ毎の表示される秒数を調整します。

完成したアニメーションをファイル＞書き出し＞Web 用に保存＞GIF32ディザで書き出します。

書き出したGIFファイルをSafariやChromeにドラッグ＆ドロップして動きを確認します。

IllustratorとPhotoshopを使い、このようなGifアニメを作る事が出来ます。