インデックスに戻る
bullet 印刷用
ロールオーバーボタンの作成
page: 1 2
Adobe® Illustrator® 10およびAdobe Photoshop® 7.0を使用すると、ダイナミックなWebボタンを作成できます。ロールオーバーを使用すると、マウスが画像をロールオーバー、またはクリックしたときに表示される画像を変更できます。IllustratorでWebボタンをデザインしてから、Photoshop 7.0に付属のAdobe ImageReady® 7.0のロールオーバーパレットを使用して、ロールオーバーを追加します。ボタンの透明度、複合パス、スライス、編集可能テキストは保持されるので、アプリケーション間を移動してもボタンを編集できます。
メイン
レイヤー上にアートワークを作成
Illustratorでボタンの形を描いてから、必要に応じて描画やテキストを追加します。次に、レイヤーパレットのメニューから「[レイヤー名]を複製」を選択します。(レイヤーパレットを開くには、ウィンドウ/レイヤーを選択します。)新しいレイヤー内のボタンは元のボタンの上に表示されるので、ページの空きスペースに移動します。選択ツールと文字ツールを使用して、新しいボタンのテキストとアートワークを変更し、レイヤーの複製とボタンの変更を繰り返して、ボタンを必要な数だけ作成します。
step01_int
Illustratorでアートワークをスライス
ボタンを選択してから、オブジェクト/スライス/選択範囲から作成を選択します。Illustratorはオブジェクトベースでスライスを作成し、ページ上のその他のオブジェクト用にも自動スライスを追加します。別のボタンを選択し、オブジェクト/スライス/選択範囲から作成をもう一度選択すると、このボタン用に新しいスライスを作成し、自動スライスを再設定します。このようにして、各ボタンのスライスを作成していきます。
スライスは、ロールオーバー、リンク、またはアニメーションのアクティブエリアを定義する四角形の画像エリアです。スライスを作成すると、アートワークをWebページとして保存するときに、HTMLテーブルとして書き出され、その際に必要なスライスは自動的に追加生成されます(自動スライス)。また、ファイルをPhotoshop形式で書き出すときや、アートワークをSVGファイルとして保存するときにもスライスは含まれます。
step02_int
アートワークをPhotoshop形式で書き出す
ファイル/データ書き出しを選択してから、ファイルの種類としてPhotoshop(*.PSD)形式を選択します。Photoshopオプションダイアログボックスで、カラーモデルポップアップメニューから「RGB」を選択し、「レイヤーを保持」と「スライスを書き出す」の両方を選択していることを確認します。ボタンのテキストをImageReadyで編集する場合は、「テキストを編集可能にする」も選択します。
step03_int
トップへ戻る
next