[1] 新規のRGB画像を開きます。作りたいボタンより少し大きいサイズで、＜初期表示内容＞は透明にしてください。作例では幅64×高さ64ピクセル、72pixels/inchの画像で説明しています。

[4] グラデーションツールをダブルクリックしてグラデーションオプションを表示し、図のように設定します。

[6] 円形テンテン内の中央より少し右上から左下にドラッグします。立体的な円の画像ができました。まだ選択範囲は解除しないでくださいね。

[7] 「選択範囲」メニュー→「選択範囲の変更」→ 「縮小....」で縮小量=3pixelsに設定してOKを押します。

[8] 「選択範囲」メニュー→「境界をぼかす....」で半径 =2pixelsに設定してOKを押します。

[9] 「レイヤー」メニュー→「新規レイヤー」→「コピーしたレイヤー」を実行します。選択範囲の部分がコピーされて新規レイヤーになります。

[10] 上側のレイヤーを、 「イメージ」メニュー→「色調補正」→「階調の反転」 を実行して反転させます。

[11] レイヤーパレットの左側の表示を＜除外＞に変えます。だんだん水滴っぽくなってきました。
「レイヤーメニュー」→「表示部分の結合」 を実行し、2つのレイヤーを結合します。

[12] 「イメージ」メニュー→「色調補正」→「明るさ・コントラスト...」でコントラスト=50に設定して、陰影を強調します。

[13] 「イメージ」メニュー→「色調補正」→「色相・彩度...」で ＜色彩の統一＞にチェックを入れてからスライダーを動かし、水色にします。
作例では、色相=-150、彩度=100、明度=60にしています。

いったんファイルを保存してください。