グローバルナビゲーション、押したくなりますか？
ボタンですね、これってサイトにとってはスゴく重要な位置づけで、ボタンの存在感だけで、見てもらえるページも見てもらえなくなる可能性も否めないと思います。
ここでは、自然にクリックしたくなる、そんなボタンを作ってみたいと思います。
もちろん、シンプルなボタンが悪いとはいってないです、全体のデザインによっては、こんなにボタンだけ立体的にならない方がイメージに合ってるという場合もありますので、場合によりけりです。
実は上記サンプルの右の完成形はPhotoshopで作りました。レイヤーは2つだけです（下図参照）。
ポイントは「レイヤースタイル」を有効に使うところにあります。
微妙なグラデーションや光彩、やりすぎたら大味になってしまうから、つねに客観的に見て調整していこう。
まずはシェイプレイヤーで角丸長方形ツールを作ってみましょう。
サイズはだいたい横が200pxくらい、縦は50pxくらいで。
光彩（外側）に光を少しだけつけて、本体の角丸長方形の周りに境界線で1px内側に白を入れる、すると、本体の角丸長方形の周りに極細ケイ線が1本入ったような感じになります。、こんな感じです（下図）。
さて、結構大事な要素になってくるグラデーションを入れてみましょう。
細やかな部分になりますが、本体の角丸長方形のフチから中央に向かって内側に光っているように見せたら、ちょっとだけ柔らかくなります、違いがわかりますか？
不透明度は90、色は白で、チョークが7、サイズが6にしてみました。
さて、ひとまず本体はこれで完成とします。
さらに1つレイヤーを作ります、新規レイヤーでレイヤーの不透明度は35%にしました。
本体のレイヤーのサムネイルをCommand+クリック、Windowsの場合はCtrl+クリックで選択範囲が選択できます。（下記）
ここは大事なんで、よ〜く読んで下さい。
今から反射しているような質感の部分を作るわけですが、大概こういう場合、反射している部分がフチの境界線から1〜2ピクセル内側である方が、よりリアリティが生まれます、と、僕はそう思っています。
なので、今、点線になっている選択範囲を、「選択範囲」→「選択範囲を変更」→「縮小」、値を2pxにすると、今の選択範囲から2px狭くなってくれるはずです。
そこで、塗りを入れましょう、白を塗ります。
まだちょっとカタい気がするので、下記のような設定を施してあげました。
若干柔らかくなったかな？という気がします。
では、本体のレイヤー（今作業したレイヤーの一つ下）に戻って、お好みで、ドロップシャドーを少々、軽くいれてみましょう。
さらにベベルとエンボスを入れてみました、これも入れるか入れないかはサイト全体の雰囲気で決めるようにしましょう。設定は下図です。
ボタンが完成しました、文字を入れてみましょう、これもお好みですが、あんまり大味にならないようにしましょう。
どうでしたか？もちろんこれは一例なので、あくまで参考程度に、あとは皆さんも自分流のボタン作成に挑戦してみて下さい。
ではでは、おつかれさまでした。
