Adobe
Tutorials
ロールオーバーボタンの作成
Adobe® Illustrator® 10およびAdobe Photoshop® 7.0を使用すると、ダイナミックなWebボタンを作成できます。ロールオーバーを使用すると、マウスが画像をロールオーバー、またはクリックしたときに表示される画像を変更できます。IllustratorでWebボタンをデザインしてから、Photoshop 7.0に付属のAdobe ImageReady® 7.0のロールオーバーパレットを使用して、ロールオーバーを追加します。ボタンの透明度、複合パス、スライス、編集可能テキストは保持されるので、アプリケーション間を移動してもボタンを編集できます。
メイン
1. レイヤー上にアートワークを作成
Illustratorでボタンの形を描いてから、必要に応じて描画やテキストを追加します。次に、レイヤーパレットのメニューから「[レイヤー名]を複製」を選択します。（レイヤーパレットを開くには、ウィンドウ／レイヤーを選択します。）新しいレイヤー内のボタンは元のボタンの上に表示されるので、ページの空きスペースに移動します。選択ツールと文字ツールを使用して、新しいボタンのテキストとアートワークを変更し、レイヤーの複製とボタンの変更を繰り返して、ボタンを必要な数だけ作成します。
   
 
step01_int
2. Illustratorでアートワークをスライス
ボタンを選択してから、オブジェクト／スライス／選択範囲から作成を選択します。Illustratorはオブジェクトベースでスライスを作成し、ページ上のその他のオブジェクト用にも自動スライスを追加します。別のボタンを選択し、オブジェクト／スライス／選択範囲から作成をもう一度選択すると、このボタン用に新しいスライスを作成し、自動スライスを再設定します。このようにして、各ボタンのスライスを作成していきます。 スライスは、ロールオーバー、リンク、またはアニメーションのアクティブエリアを定義する四角形の画像エリアです。スライスを作成すると、アートワークをWebページとして保存するときに、HTMLテーブルとして書き出され、その際に必要なスライスは自動的に追加生成されます（自動スライス）。また、ファイルをPhotoshop形式で書き出すときや、アートワークをSVGファイルとして保存するときにもスライスは含まれます。
   
 
step02_int
3. アートワークをPhotoshop形式で書き出す
ファイル／データ書き出しを選択してから、ファイルの種類としてPhotoshop（*.PSD）形式を選択します。Photoshopオプションダイアログボックスで、カラーモデルポップアップメニューから「RGB」を選択し、「レイヤーを保持」と「スライスを書き出す」の両方を選択していることを確認します。ボタンのテキストをImageReadyで編集する場合は、「テキストを編集可能にする」も選択します。
   
 
step03_int
4. ボタンのロールオーバーステートを作成
ImageReadyでPSDファイルを開きます。Illustratorで作成したスライスがロールオーバーパレットに表示されます。ロールオーバーパレットでボタンのスライスを選択し、メニューから「新規ロールオーバーステート」を選択すると、ボタンのOverステートが作成されます。Overステートを選択してから、スタイルパレットのスタイルスウォッチをボタンのアートワークにドラッグし、ボタン用に定義する各ステートを作成および変更します。ステートを変更するには、ロールオーバーパレットのメニューから「ロールオーバーステートオプション」を選択し、他のステートを選択します。 ロールオーバーステートは、スライス上でマウスアクションを実行したときのスライスの外観を、Over（マウスをスライス上でロールオーバーしたとき）、Down（マウスボタンを押したとき）、Click（ボタンをクリックしたとき）、Up（マウスボタンを放したとき）、およびOut（マウスが離れたとき）について定義します。ボタンの外観を変更するときに、どのステートで表示するのかまだわからない場合は、Noneを選択します。Noneステートの属性は保存されますが、Webページには表示されません。
   
 
step04_int
5. ロールオーバーをプレビュー
ツールボックスのロールオーバーのプレビューボタンをクリックします。ボタン上でマウスをロールおよびクリックして、作成したロールオーバステートの効果を確認します。ロールオーバーのプレビューボタンをもう一度クリックしてプレビューモードを終了し、必要な場合はさらにロールオーバーステートを変更します。 Webブラウザでロールオーバーをプレビューするには、ツールボックスの初期設定ブラウザでプレビューボタンをクリックします。
   
 
step05_int
6. Webページをエクスポート
ファイル／最適化ファイルを別名で保存を選択し、ファイル形式メニューから「HTML」と「画像」を選択します。スライスメニューで「すべてのスライス」を選択します。 ImageReadyは、各ロールオーバーステートを別々の画像ファイルとして保存してから、ロールオーバーステートを指定するJavaScriptコードを含むHTMLファイルを作成します。ボタンを表示するページの大きさが十分な場合は、HTMLファイルをそのまま使用できます。また、より大きいHTMLファイルに統合することもできます。
   
 
step06_int
その他関連チュートリアルや製品情報については以下のURLをご覧ください
http://www.adobe.co.jp/framemaker/
2002 Adobe Systems Incorporated. All rights reserved.