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

（注意）PhotoshopとImageReadyを同時に動作させるには、PCに比較的高いスペックが必要です。
特にWindows95/98/Meでメモリが128MB以下の場合は、アプリケーションの状態によっては画面の切り替え時などにメモリ不足を起こすことがあります。

• GIFアニメーションとは
• アニメーションの作成

アニメーションの作成

1. Photoshopを起動します（ここでは、Photoshop7.0のMacintosh版を使用しています）。
   
   
   
2. 適当な画像を開くか、新規ファイルを作成します。このときのファイルは、GIF形式でなくてもかまいません。
   今回は、写真画像を用意しました（ロケ地：東山公園（名古屋市））。
   
   
   
   
3. 文字ツールで任意の文字を入力します。
   
   
   
   
4. ［レイヤー］→［レイヤースタイル］→［ドロップシャドウ...］を選択します。
   ここでは規定値の設定のまま使用しました。
   
   
   
   
5. ［OK］ボタンで効果を確定します。
   
   
   
   
6. ツールボックスの下部にある、「ImageReadyを起動」をクリックします（7.0より前のバージョンでは、「他のアプリケーションを起動」となっており、一度ファイルの保存を要求されることがありますので、指示に従ってください）。
   
   
   
   
7. 自動的にImageReadyが起動します。画像は同じものですが、ImageReadyで操作対象になったファイルは、Photoshop上では別のウィンドウ暗く表示されています（PhotoshopCS以上では、ウィンドウはひとつだけ表示されます）。
   
   
   
   
8. ImageReadyのアニメーションパレットを表示します。画面上に見当たらない場合は、［ウィンドウ］→［アニメーション］を選択します。
   
   
   

   ヒント：アニメーションパレットの各ボタンは次のようになっています。

   
   
9. パレット上で「現在のフレームを複製」をクリックします。
   
   
   
   
10. パレット上にアイコンがひとつ増加します。
    
    
    
    
11. 「フレーム１」をクリックして選択し、レイヤーパレットで、
    ・文字レイヤーの不透明度を「0」
    ・ドロップシャドウの効果の目玉マークをクリックでオフ
    に設定します（この時点で文字は見えなくなっているはずです）。
    
    
    
    
12. 今度は、「フレーム２」をクリックして選択し、文字レイヤーの不透明度を「100」に設定します。
    
    
    
    
13. Shiftキーを押しながら、「フレーム１」と「フレーム２」をクリックして選択し、「アニメーションフレームをトゥイーン」ボタンをクリックします。
    
    
    
    
14. 表示されるダイアログボックスで、追加するフレームに「5」を指定して［OK］ボタンをクリックします。
    
    
    
    
15. 自動的に複数（ここでは５つ）のフレームが挿入されます。
    
    
    
    
16. パレット上の「アニメーションの再生」（）ボタンをクリックします。文字が現れるアニメーションが繰り返し表示されます（繰り返しのため、点滅しているように見えます）。
    
    
    
    
    
17. 確認できたら、「アニメーションの停止」（）ボタンをクリックして、アニメーションを停止させます。
    
    
    
18. パレットで、「フレーム7」をクリックして選択します（見えない場合は、右側に少しスクロールさせてみてください）。
    
    
    
    
19. 「現在のフレームを複製」をクリックして、「フレーム8」を作成します。
    
    
    
    
20. 「フレーム8」が選択されている状態で、レイヤーパレットの、「ドロップシャドウ」の目玉マークをオンにします。
    
    
    
    
21. Shiftキーを押しながら「フレーム7」と「フレーム8」をクリックして選択し、「アニメーションフレームをトゥイーン」をクリックして、先と同じ要領でフレームを追加します。
    
    
    
    
22. パレット上の「アニメーションの再生」をクリックしてみます。今度は、文字が表示されたあと、ドロップシャドウが現れる状態になります。
    
    
    
    
23. パレットの左端下にある「無限」と表示されているボタンをクリックします。ここでアニメーションの
    繰り返し回数を指定できます。
    「一度」でも「無限」でもないときは、「その他...」をクリックして、ループ数を設定します。
    
    
    
    この例では３回を指定しています。
    
    
    
24. ［ファイル］→［最適化ファイルを保存...］を選択し、ファイルを保存します。ファイルは自動的にGIF形式となります。これでGIFアニメーションファイルは完成です。
    
    
    

    ヒント：ImageReady内部と、実際にできあがったファイルをブラウザで表示したとき、特に「ディレイ」が「０」設定の場合に、再生速度が異なることがあります（ブラウザで表示したときのほうが速いことが多い）。 この場合は、ImageReadyのアニメーションパレットで、各フレームにある「ディレイ」を調整してください。

    
    繰り返し回数：３、各フレームのディレイを0.2秒にしたファイル。
    動作を確認したいときは、こちらをクリックしてください（別ウィンドウに表示されます）。
    
    

• GIFアニメーションとは
• アニメーションの作成