アクアボタンの作り方
WEBのデザインをリードしているのは、間違いなくAppleです。
Mac OS XやAppleのサイトに使われている部品の作り方を覚えておくとかっこいいデザインのサイトが作れると思います。その1つがアクアボタン。
では、実際に作ってみましょう。
［ファイル］→［新規］で新規ドキュメントを開きます。
ファイル名：アクアボタン
幅300pixel、高さ300pixelと入力し、[OK]をクリックします。
[ビュー]→[表示]→[グリッド]（またはCtrl+@）でグリッドを表示させます。
[角丸長方形ツール]を選択し、上にあるオプションバーで丸みを20pxと指定します。
今回は幅100×高さ20pixelとして、カラーは# 27279aとしました。
レイヤー名は、baseとしました。
baseレイヤーをダブルクリックして、レイヤースタイル画面を表示させ、以下の通り設定します。
画面右側の[スタイル]欄の[ドロップシャドウ]をクリック。
下図の通り、各項目を設定してください。
次に、[スタイル]欄の[シャドウ（内側）]を下図の通り設定します。
構造欄
描画モード：乗算
不透明度：30％
角度：90度
包括光源を使用：チェックしない
距離：5px
チョーク：0％
サイズ：5px
画質欄
輪郭：線形
アンチエイリアス：チェックしない
ノイズ：0％
[スタイル]欄の[べベルとエンボス]を設定します。
各項目の設定は下図を参照。
次に、[スタイル]欄の[サテン]を選択します。
描画モードの色は、#18a0ffとしました。
輪郭は、半円を選択。これは、線形のすぐ下にあります。
最後に[スタイル]の[グラデーションオーバーレイ]を設定します。
下図を参照に設定してください。
グラデーションの色を設定するには、グラデーションバーをチェックしてグラデーションエディターを開きます。
スライダー左下の四角をダブルクリックし、カラーピッカーを表示。色を指定します
（#27279a）。
スライダー右下の四角をダブルクリックし、カラーピッカーで色を指定します（#80dbff）。
境界ポイントの位置は30%に設定。
これで、ボタンのベースが出来上がりました。下図のようになっていますか？
次に上面の反射部分を作ります。
レイヤー baseを選択し、[パス]タブをクリックします。
baseベクトルマスク上で右クリックし、[選択範囲を作成]を選択します。
下図のダイアログボックスが表示されたら、
[新しい選択範囲]を選んで、[OK]をクリックします。
角丸四角部分が選択範囲として指定されました。
次に、[長方形選択ツール]アイコンをクリックして、角丸四角形の下部分を覆うようにAltキーを押下しながら、選択します。
角丸四角の上半分が選択範囲に指定されました。
メニューバーの[選択範囲]→[選択範囲の変更]→[縮小]を選択すると表示されるダイアログボックスで、縮小量：1ピクセルと入力し、[OK]をクリックします。
角丸四角の上部半分より1ピクセル小さな選択範囲が作成されていることも確認します。
[レイヤー]→[新規]→[レイヤー]で新しいレイヤーを作成し、レイヤー名をupとします。
ツールバーの前面描画色をクリックし、カラーピッカー（描画色）ウィンドウを表示させ、色を白（#ffffff）に設定し、[OK]をクリックします。
ツールバーで[グラデーションツール]を選択し、メニューバー直下のグラデーションマークをクリックして、グラデーションエディターを表示させます。
[描画色から透明に]を選択し[OK]。
選択範囲の上から下の方向にドラッグします。この時、Shiftキーを押しながらドラッグすると、垂直にグラデーションを設定できます。
upレイヤーをダブルクリックしてレイヤースタイルを表示します。不透明度80％にします。
[フィルタ]→[ぼかし]→[ぼかし(ガウス)]で、半径1.0pxを指定します。
これで、上面の反射部分が出来上がりました。
次に、角丸四角の下半分に入れるボカシを作ります。
上半分のテカリを作ったときと同じ手順で進みます。
baseレイヤーを選択した状態で、[パス]タブを選択。baseベクトルマスク上で右クリックし、[選択範囲を作成]。
[新しい選択範囲]が選ばれていることを確認し、[OK]をクリック。
次に、[長方形選択ツール]アイコンをクリックして、角丸四角形の上部分を覆うようにAltキーを押下しながら、選択します。
角丸四角の下半分が選択範囲に指定されました。
メニューバーの[選択範囲]→[選択範囲の変更]→[縮小]を選択する表示されるダイアログボックスで、縮小量：1ピクセルと入力し、[OK]をクリック。
下部分は境界色を残さないので、更に[選択範囲]→[選択範囲の変形]で選択範囲を下に1px伸ばして、ベースのボタンの境界線と一致させます。
[レイヤー]→[新規]→[レイヤー]で新しいレイヤーを作成し、レイヤー名をbottomとします。
下半分にグラデーションをかけます。
[ツールバー]でグラデーションツールを選択し、今度は下から上に向けてドラッグします。
bottomレイヤーをダブルクリックして、不透明度を30％に設定します。
[フィルタ]→[ぼかし]→[ぼかし(ガウス)]で、半径1.0pxを指定します。
どうでしょう？それっぽっくなってきましたね。
最後に文字を入れます。
[横書文字ツール]アイコンをクリックして、ツールバーの描画色を#000000（黒）にし、文字を入力します。
ここでは、MSゴシックを10ptで使いました。
入力した文字の位置を調整するのは、移動ツールを使います。
奥行き感を出すために文字の部分にもドロップシャドウを付けようと思います。
テキストレイヤーをダブルクリックしてレイヤースタイル画面を表示させ、以下の通り設定します。
画面右側の[スタイル]欄の[ドロップシャドウ]をクリックします。
構造欄
描画モード：乗算
不透明度：75％
角度：90度
包括光源を使用：チェック
距離：1px
スプレッド：0％
サイズ：1px
画質欄
輪郭：線形
アンチエイリアス：チェックしない
ノイズ：0％
レイヤーがドロップシャドウをノックアウト：チェック
これで、Mac OS Xのアクア風なボタンが出来ました。
これで、「アクアボタンの作り方」は終了です。
