色違いのボタン用バーを作る
このページでは、「ボタン用の小さなバーを作る」の5.までに作った、次のバーのPSDファイルを利用しています。
このバーのレイヤーは、次のような構造になっています。
 | レイヤー名 | 内容 |
| レイヤー4のコピー | 下部のぼんやりした光沢 | |
| レイヤー4 | 上部の明るい光沢 | |
| レイヤー3 | 境界線（縁）の色 | |
| レイヤー2 | バーの基本色 | |
| レイヤー1 | バーの形の基礎（非表示） | |
| 背景 | -- |
このバーから色違いのボタンを作ってみましょう。上書きを防ぐためにも、まず、ファイルを別名で保存しておくことをお勧めします。
1. バーの本の色のレイヤー［レイヤー2］と、境界線のレイヤー［レイヤー3］を削除します。
2. ボタンに付ける色がよく見えるよう、2つの光沢レイヤー［レイヤー4］と［レイヤー4のコピー］の目アイコンを押して、非表示にしておきます。
3. 新規レイヤー［レイヤー5］を作成したら、［レイヤー1］のすぐ上に移動します（［レイヤー1］はずっと非表示のまま）。［レイヤー5］は、バーの基本色をつけるためのレイヤーです。
4. ［レイヤー5］が選択されていることを確認したら、Ctrlキーを押しながら［レイヤー1］をクリックして、選択範囲を表示します。
このあとの手順は、「ボタン用の小さなバーを作る」の3.の3)以降を参照してください。変更する個所は次の通りです。
- グラデーション「描画色から背景色へ」で使う描画色と背景色を変えます。描画色がバーの基本の色になります。背景色は、描画色を白に近くした色に設定します。
- 境界線の色を変えます。上記の描画色を暗く設定します。
- 光沢は上下ともすでに作ってあるので（［レイヤー4］と［レイヤー4のコピー］）、あらためて作る必要はありません。
- ドロップシャドウの色を変えます。上記の描画色を黒に近く設定します。
ボタンサイズに縮小する前に、［レイヤー4］と［レイヤー4のコピー］の目アイコンを押して、ボタン上下の光沢を表示します。
| 色違いのバーの例 |
次の表は、上記の手順で作った色違いのバーと、その色設定です。「描」と「背」はそれぞれ「描画色」、「背景色」を表し、グラデーション「描画色から背景色へ」で使う色です。「境」は境界線の色、「ド」はドロップシャドウの色です。
 |  |  |
|
描：#0000ff（RGBブルー） 背：#c4c4fe 境：#00009f ド：#000060 |
描：#00ffff（RGBシアン） 背：#c0fcfc 境：#009696 ド：#006d6d |
描：#00ff00（RGBグリーン） 背：#beffbe 境：#009f00 ド：#006200 |
 |  |  |
|
描：#ff0000（RGBレッド） 背：#ffc0c0 境：#900101 ド：#6d0000 |
描：#ff8a00 背：#fedbb1 境：#b56200 ド：#7e4400 |
描：#ffff00（RGBイエロー） 背：#fcfcc1 境：#b0b001 ド：#666600 |
| こんなボタンを作ってみました |
グラデーションの描き方など、変えたところも多少ありますが、基本的な構造は上述のバーと同じです。テキストや絵を加えてから、バー全体を縮小しました。
最終更新：2007年7月2日