ここではPhotoshopを使って、トゥイーン（フレーム間を補完する機能）によるGIFアニメーション作成の方法を実習を交えて解説します。

• GIFアニメーションとは？
• GIFアニメーションの作成（トゥイーンによるアニメーション）
  

アニメーションの作成（トゥイーンによるアニメーション）

1. Photoshopを起動します。
   
   
2. 適当な画像を開くか、新規ファイルを作成します。
   
   
   
   
3. 文字ツールで任意の文字を入力します。
   
   
   
   
4. ［レイヤー］→［レイヤースタイル］→［ドロップシャドウ...］を選択します。
   適当な設定で適用してください。
   
   
   
   
5. アニメーションパレットを表示します。画面上に見当たらない場合は、［ウィンドウ］→［アニメーション］を選択します。
   
   
   
   
6. パレット上で「選択したフレームを複製」をクリックします。
   
   
   
   
7. パレット上にアイコンがひとつ増加します。
   
   
   
   
8. 「フレーム１」をクリックして選択し、レイヤーパレットで、
   ・文字レイヤーの不透明度を「0」
   に設定します（この時点で文字は見えなくなっているはずです）。
   
   
   
   
9. 今度は、「フレーム２」をクリックして選択し、文字レイヤーの不透明度を「100」に設定します。
   
   
   
   
10. Shiftキーを押しながら、「フレーム１」と「フレーム２」をクリックして選択し、「アニメーションフレームをトゥイーン」ボタンをクリックします。
    
    
    
    
11. 表示されるダイアログボックスで、追加するフレームに「5」を指定して［OK］ボタンをクリックします。
    
    
    
    
12. 自動的に５つのフレームが挿入され、合計で７つのフレームになります。
    なにもない（フレーム１）の状態から、文字がある（フレーム７）状態へ、徐々に変化するようにフレームができあがっています。
    
    
    
    
13. パレット上の「アニメーションを再生」ボタンをクリックします。文字が現れるアニメーションが繰り返し表示されます（繰り返しのため、点滅しているように見えます）。
    
    
    
    
    
14. 確認できたら、「アニメーションの停止」（）ボタンをクリックして、アニメーションを停止させます。
    
    
    
15. パレットの左端下にある「ループオプションを設定」ボタン（「無限」と表示されている）をクリックします。ここでアニメーションの繰り返し回数を指定できます。
    「一度」でも「無限」でもないときは、「その他...」をクリックして、ループ数を設定します。
    
    
    
    
    
    この例では３回を指定しています。
    
    
16. 次に、フレームのディレイ（遅延）設定を行ってみます。
    Shiftキーを押しながらクリックして、アニメーションパレットのアイコンの１〜７までを選択します。
    
    
    
    
17. 任意のフレームのアイコンの下にある小さな三角マーク（「0秒」の横）をクリックして、「0.5」を選択します。
    
    
    
    
18. ［ファイル］→［Webおよびデバイス用に保存...］を選択し、プリセットに、GIF形式のいずれかを指定してファイルを保存します。ファイルは自動的にGIF形式となります。これでGIFアニメーションファイルは完成です。
    
    
    
    繰り返し回数：３、各フレームのディレイを0.2秒にしたファイル。
    動作を確認したいときは、こちらをクリックしてください（別ウィンドウに表示されます）。
    
    
    ＊注意＊
    いったんGIFアニメーションとして保存されたファイルは、Photoshopで読み込んでもその最初のフレームが表示されるだけです。もとのファイルをPSD形式で保存しておきましょう。
    
    

• GIFアニメーションとは？
• GIFアニメーションの作成（トゥイーンによるアニメーション）