Adobe Illustratorで描いたイラストレーションをPhotoshopを使用してGifアニメーションにする方法をご紹介します。
動画専用のソフトを使用しなくても、Photoshopの機能だけでアニメーションを作成する事が可能です。
Contents
1. アニメーションのコマを作成
Illustratorでオブジェクトを動かして、アニメーションのコマ毎に画像に書き出します。
2. 作成したコマをPhotoshopに読み込む
Adobe Photoshopを開きファイル＞スクリプト＞ファイルをレイヤーとして読み込み
1.で作成した動画用の画像ファイルを全て選択してレイヤー
として読み込みます（以降は全てPhotoshopでの作業）。
3. Photoshopのタイムラインパネルを表示・設定する
ウィンドウ＞タイムラインでタイムラインパネルを表示
タイムラインパネルのフレームアニメーションを作成を選択しクリックすると一コマ目がタイムラインに読み込まれます。
4. アニメーションのコマをタイムラインパネルに取り込む
残りのレイヤーを全て選択しタイムラインパネルのレイヤーからフレームを作成を選択
残りのレイヤーが読み込まれるので順番を調整します。
5. コマ毎の表示時間を編集
タイムラインパネルでコマ毎の表示される秒数を調整します。
6. GIFに書き出す
完成したアニメーションをファイル＞書き出し＞Web 用に保存＞GIF32ディザで書き出します。
7. ブラウザで動作確認
書き出したGIFファイルをSafariやChromeにドラッグ＆ドロップして動きを確認します。
完成したアニメーションの作例
IllustratorとPhotoshopを使い、このようなGifアニメを作る事が出来ます。
Adobe Illustrator CC + Photoshop CC|12か月版|Windows/Mac対応|オンラインコード版
ヘッダー画像
BokskapetによるPixabayからの画像