表面にグラデーションをもち、周りにシャドウをかけた立体的な質感のあるボタン

半透明pngで異なる背景色にも対応

必要なもの

Photoshop CS 以上

新規レイヤーに長方形を描く

新規レイヤーを120x40pxの長方形で塗りつぶしたあと、カンバスサイズ変更で周囲に10pxの余白を用意

レイヤー

レイヤーは2枚。こんなかんじ

レイヤースタイル

レイヤーで「レイヤー1」の箇所をダブルクリックしてレイヤースタイルウィンドウを表示する

グラデーションオーバーレイ

コントラスト(色の濃淡の差)がきつくならないように調整する

ドロップシャドウ

距離を「0」にすることで全方位の周囲に影をつくる

シャドウ(内側)

チョークを「100」にすることでグラデーションのない内側枠線としての効果をもたせる

枠線の幅は2px、色は白を指定してハイライトの役割をもたせる

境界線

シャドウ(内側)の上に境界線を被せて、ドロッップシャドウとの協会を明確にする

半透明

背景は非表示にして、半透明png対応にする

角丸処理

最後に「選択範囲選択」→「選択範囲を変更」→「滑らかに」「4px」でボタンを角丸にする

Web用に保存

「ファイル」→「Web用に保存」、ファイルの圧縮形式は「PNG-24」に設定する

完成