GIFアニメ - Illustrator→Photoshop

イラレとフォトショップでGIFアニメを作る！

• 作成例

www.soubi.co.jp
watanabedesign511.info
※この場合、画像を１枚ずつ作成するため、手間がかかります。

Illustratorで新規ドキュメント作成

• プロファイル「Web」、幅「600px」高さ「600px」
• 2022CCでは、「印刷」カラーモード「CMYK」でもPhotoshopレイヤーに書き出し可能です

適度な大きさのイラストを描く

レイヤーをコピーしてイラストを変化させる

• 動かない部分と動く部分の変化を付ける
• レイヤー名は「01」「02」〜のようにわかりやすくすると編集しやすい

書き出し

• ファイル形式を変更する

• ファイル形式「Photoshop」で「書き出し」

• カラーモード「RGB」、解像度「スクリーン（72ppi）」、「レイヤーを保持」、アンチエイリアス「アートに最適」

書き出したデータをPhotoshopで開く

• 以下のようにIllustratorと同じレイヤーにするためには、Illustrator上でグループ化をしないことが重要です

タイムラインパネル

• 「ウィンドウ」メニュー → 「タイムライン」を選択

• 「フレームアニメーションを作成」ボタンを押す

• タイムラインパネルのオプションから「レイヤーからフレームを作成」を選択

• 各フレームの時間を設定

Web用に保存

• ファイル形式「GIF」、色数「16」程度で、透明部分にチェックを入れて保存