STEP 1 新規作成

[ファイル(F)−新規作成(N)] （Ctrl＋N）で、新しくキャンパスを開きます。
ファイル名は、好きな名前で結構です。
ここでは、幅(W)「150」pixels、高さ(H)「60」pixels・解像度「72」pixel/inch・モード(M)RGBカラー・内容は透明(T)で作成します。

STEP 2　ベースになるボタンを描画します

角丸長方形ツール(○)を選び、角丸の半径を20pixel、色は白で図形を描画します。

STEP 3 レイヤーの複製

[レイヤー(L)−レイヤーを複製(D)]で、複製レイヤーを作ります。
レイヤーを右クリックしても複製するダイヤログボックスが開きます。

これは後でボタンに色をつけるときに使いますので、今は非表示にしておきます。
目のマーク（○）を一回クリックすると、マークが消えて画面上では見えなくなります。

STEP 4 レイヤースタイルの設定１

元のレイヤーをクリックしてアクティブにし、効果を加えていきます。
[レイヤー(L)−レイヤースタイル(Y)]からレイヤー効果を選ぶと、各種スタイルを設定するダイヤログボックスが開きます。
レイヤーウインドウの下、一番左側のマーク（○）をクリックしてレイヤー効果を選ぶか、レイヤーの右側（オレンジ矢印）をダブルクリックしても同じボックスが開きます。

STEP 5 レイヤースタイルの設定２

今回設定するのは、ドロップシャドウ・シャドウ内側・ベベルとエンボスです。キャプチャー画面を参考にしながら、順番に設定していきましょう。
まずドロップシャドウにチェックを入れ、設定していきます。カラーは「#666666」です。

STEP 6ボタンに色をつける

次にボタンに色をつけます。
STEP3で作っておいたレイヤーをクリックすると、目のマーク（○）も見えるようになりアクティブになります。

□（オレンジ矢印）の部分をダブルクリックすると、色を選択するダイヤログボックスが現れますので、好みの色を選んでください。
今回は「#0000FF」を選びました。

レイヤーはオーバーレイを選択します。
※この時点で一度PSD形式で保存しておくと、色だけ変えたボタンを作るときに便利です。

STEP 7文字を入れる

文字ツール（○）を選択し、ボタンの上に文字を乗せていきます。
今回はFONT「NimbusRomNo9T」サイズ「16」ptカラー「#3300CC」で『AQUA BUTTON』と入れました。

見やすさを考えて、この文字にもレイヤースタイルを設定しておきましょう。
STEP4と同様にダイヤログボックスを開き、ドロップシャドウを設定します。カラーは「#666666」です。

STEP 8 完成

[レイヤー(L)−表示レイヤーを結合(V)]（Shift＋Ctri＋E）して[ファイル(F)→Web用に保存(W)]を選びます。
使いたいページの背景に合わせ、マットの色を選んで保存して下さい。今回は白を選びました。

ちょこっとヒント：レイヤースタイルの登録

自分で設定した効果は、新規スタイルとしてスタイルパレットに保存しておくことができます。
いろいろ試行錯誤してできあがったお気に入りのスタイルを、登録しておいてはいかがでしょう。
やりかたは、レイヤースタイルダイヤログボックスの新規スタイルボタンをクリックし、そのスタイルに適当な名前を付けてOKをクリックするだけです。

すると、スタイルパレットにそのスタイルが追加され、次回からはそのスタイルを選択するだけで、画像にレイヤースタイルが適用されます。