ここではPhotoshopとImageReadyを連携させた、ロールオーバー作成の方法を実習を交えて解説します。

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

• ロールオーバーとは
• ロールオーバーの作成

ロールオーバーの作成

ここでは、「マウスでクリックすると、へこんだように見えるボタン」を作成してみます。
この場合、「マウスでクリックする」というステート（状態）がトリガー（引き金）となって、「へこむ」という動作をさせることになります。

1. Photoshopを起動します（ここでは、Photoshop7.0のMacintosh版を使用しています）。
   
   
2. 新規ファイルを作成します。ここでは、200×200ピクセル、72dpiのファイルを作成しました。
   
   
   
   
3. 描画色に好きな色を選んで、楕円形ツール（ベクトルシェイプツール）で、ボタンの形状を作成します（Shiftキーを押しながらクリックすると、正円が描けます）。
   
   
   
   
4. ［レイヤー］→［レイヤースタイル］→［ドロップシャドウ...］を選択します。
   ここでは距離「10」、サイズ「10」でほかは規定値の設定のまま使用しました。
   
   
   
   
5. 続けて、ダイアログボックス左側リストの「べベルとエンボス」を選択します。
   これもサイズ「10」にしたほかは、規定値の設定のまま使用しました。
   
   
   
   
6. ［OK］ボタンで効果を確定します。
   
   
   
   
7. ツールボックスの下部にある、「ImageReadyを起動」をクリックします（7.0より前のバージョンでは、「他のアプリケーションを起動」となっており、一度ファイルの保存を要求されることがありますので、指示に従ってください）。
   
   
   
   
8. 自動的にImageReadyが起動します。画像は同じものですが、ImageReadyで操作対象になったファイルは、Photoshop上では暗く表示されています。
   
   
   
   
9. ImageReadyのロールオーバーパレットを表示します（7.0より前のバージョンでは、パレットは横型になっています）。画面上に見当たらない場合は、［ウィンドウ］→［ロールオーバー］を選択します。
   
   
   

   ヒント：ロールオーバーパレットの各ボタンは次のようになっています。

   
   
10. パレット上で「ロールオーバーステートを作成」をクリックします。パレット上にアイコンが増加し、いちばん下に「Over State」ができているはずです（7.0以前では、「Over」となり、アイコンの上にで「Over」の表記が出ます）。これが最終的に、動作時の画像となります。
    
    
    
    
11. 「Over State」の文字の部分をダブルクリックすると、次のようなダイアログボックスが表示されます（7.0より前のバージョンでは、シングルクリックでリストが表示されます）。
    ここでは、どのようなステートをトリガーにするかを選択します。今回は「 Down」を選択します（注意：「Clickステート」はマウスクリックの瞬間しか発生せず、へこんだように見えないことがあります）。
    
    
    
    
12. レイヤーパレットを表示します。
    「シェイプ１」をクリックしてアクティブなのを確認し、レイヤーパレットで「ドロップシャドウ」の目玉マークをクリックして、レイヤースタイルを隠してしまいます。
    
    
    
    
13. キーボードの［→］を５回、［↓］を５回押して、このボタンのイメージを少し動かします。
    
    
    
14. ここまででほぼ動作はできているので、ブラウザで確認してみます。
    ツールボックスの下のほうにある、「初期設定ブラウザでプレビュー」のボタンをクリックします。
    
    
    
    ブラウザ内に表示される画像は、クリックで動作確認できます。
    
    

    ヒント：ブラウザ内で下部に表示されているのは、そのロールオーバーを実現するために自動作成されたJavaScriptのプログラムです。ImageReadyがない場合は、このようなプログラムを自力で作成しなければなりません。これがかなり大変な作業であることは想像に難くないでしょう。

    
    
15. ［ファイル］→［最適化ファイルを保存...］を選択し、ファイルを保存します。動作用のJavaScriptを含むHTMLファイルと、画像が入ったimagesフォルダができます。
    
    
    

    ヒント：実際にボタンを活用して、例えばページをリンクするには、こうしてできたHTMLファイルをHTMLエディタなどに取り込んで編集することになります。

    
    

• ロールオーバーとは
• ロールオーバーの作成