この文書では、Adobe Photoshop でロールオーバー用の画像を作成する方法について、一例を紹介します。

A. ロールオーバーとは

ロールオーバーとは、Web サイトなどでボタンや文字などにマウスカーソルを合わせた際に、ボタンのデザインや文字色などが変わる動作のことです。画像でロールオーバーを作成する場合、通常の画像、カーソルを合わせた時の画像(マウスオーバー状態)、クリックした時の画像(マウスダウン状態)、というように同様の画像で効果が異なる複数の画像を用意します。

B. ロールオーバー画像の作成

Photoshop では、レイヤーパネルとスタイルパネルを使用してロールオーバー用の画像を簡単に作成することができます。

ロールオーバー用の画像を作成

ロールオーバー用の画像を作成するには、レイヤーを使用します。 あるレイヤー上にコンテンツを作成したら、そのレイヤーを複製して編集し、類似したコンテンツを作成します。 また、レイヤーのスタイル、表示 / 非表示または位置を変更したり、カラーまたは色調を調整したり、フィルタ効果を適用したりすることができます。

以下の手順では、例として通常時の画像作成し、それを基にマウスオーバー時およびマウスダウン時の画像を作成する方法について説明します。

  1. Photoshop を起動します。
  2. ファイル/新規 を選択します。
  3. 新規 ダイアログボックスで、作成するボタンサイズを入力し、「OK」をクリックします。



  4. 背景色を設定したり文字を入力して、通常の状態のボタンをデザインします。
    ※ 例として、以下の画像ではレイヤースタイルを適用し、ボタンを凸状態の画像に加工しています。
    レイヤースタイル「ベベルとエンボス」を設定するには、レイヤー/レイヤースタイル/ベベルとエンボス を選択し、レイヤースタイル ダイアログボックスで設定を行います。

  5. 作成したレイヤーを選択した状態で、レイヤー/レイヤーをグループ化 を選択し、ひとまとめにします。

  6. レイヤー/レイヤーを複製 を選択します。

  7. グループを複製 ダイアログボックスが表示されたら、新規名称を入力して OK をクリックします。

  8. 複製したグループ内のレイヤーをマウスオーバー時のボタンになるよう編集します。
    ※ ここではテキストとボタン色を変更し、ボタン色にグラデーションを適用しています。

  9. 手順 6.~8. と同様に、グループを複製し、マウスダウン時のボタンをデザインします。
    ※ ここではレイヤースタイルを適用し、テキストを凸にしてボタンが凹状態の画像に加工しています。

  10. イメージ/カンバスサイズ を選択します。

  11. カンバスサイズ ダイアログボックスが表示されたら、高さをデザインしたボタンがすべて表示されるように広げます。基準位置を一番上の真ん中に設定し、OK をクリックします。
    ※ ここでは、3パターンのボタンを作成したので、99pixel (33×3)に設定しています。

  12. 作成したボタンデザインを重ならないように並べて1枚の画像にします。

  13. ファイル/Web 用に保存 を選択します。
  14. Web 用に保存 ダイアログボックスでファイル形式などを設定して「保存」ボタンをクリックします。

  15. Web ページ制作の際は、画像をボタンの状態に応じてそれぞれ設定します。

ボタンのデザインについて

ボタンのデザインの方法は様々ありますが、レイヤースタイルやスタイルパネルを使用すると簡単にバリエーションを持たせることができます。

レイヤースタイル

レイヤースタイルはレイヤーに設定し、カラーオーバーレイ、ドロップシャドウ、光彩、エンボスなどの効果を適用することができます。

レイヤースタイルを適用するには、レイヤー/レイヤースタイル/レイヤー効果 を選択し、レイヤースタイル ダイアログボックスから適用するスタイルを設定します。 

スタイルパネル

ボタンスタイルなどのプリセットを使用して、通常の状態、マウスオーバー状態およびマウスダウン状態のロールオーバーボタンを簡単に作成することができます。 長方形ツールを使用して基本形状を描画し、ヘベル(標準)などのスタイルを適用するだけで、効果的なボタンに変換できます。

ウィンドウ/スタイル からスタイルパネルを表示します。サムネイルをダブルクリックしたりレイヤーにドラッグしてスタイルを適用します。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー