ちょっと仕事でボタンを作らないといけなかったので、せっかくなのでここで作り方も公開する。
今回、特に新しいテクニックがあるわけではないが、
これらのボタンは簡単に作れるし、そこからバリエーションを増やせば簡単にカッコいいものがたくさん作れる。
今回大切なのはこれらのボタンの形をどうやって作るか。
シェイプの使い方がわかっていれば簡単。

１．ボタンの枠を作る

まずはボタンの形を作る。
全てに共通するのは枠なので、とりあえず枠の作り方。
枠の作り方はシェイプの組み合わせが扱えれば問題ない。
この枠は円の大小のシェイプを２つ重ねている。
ここは後で応用が効く基本部分なので少しだけ詳細に説明する。

次に同じレイヤーに小さめの円を作る。
円を作るときに目的のレイヤーを選択して[Shift]を押しながらシェイプを描く。
このとき、カーソルに[+]マークがつくのがわかると思う。

これが１つのレイヤーに２つのレイヤーが重なった状態。
さて、このままではだめなので、それぞれの円を選んで整列させよう。
その後に、まん中の円をくり抜くために重なっている部分をくり抜く。
２つの円を選択状態で下のアイコンを選べばよい。
※ちょっと説明をはしょってるのでわからない人はコメント欄とかに書き込んでください

じゃあ、下のようになったはず。

２．ボタンのベースを作る

とりあえず重要な部分は終わったのでここからは一気に。
順番はどうでもいいが、
ボタンのベースを作るのにまずは背景を入れる。
色をつけた円を枠のレイヤーの下にもぐりこませるだけ。

次にまん中の記号を作る。
何でもいいが、例えば今回はバッテン。
バッテンは長方形の組み合わせで作る。
※日本語フォントであれば[×]を拡大しても良い。
とりあえずできればなんでもよいのだ。

ベースが出来たので、背景をグラデーション
・グラデーションを[オーバーレイ]でかけてみた

外枠をメタルチックにするだけ
・外枠をグラデーションを使ってメタル風に
・ベベルをかけて少し盛り上がってる感じに

これだけで十分カッコいいボタンが作れた。

３．バリエーション

まん中の記号を変えたり、背景の色を変えるだけで様々なバリエーションが出来る。

他にも中央のロゴだけ金色にするとか
※作ってみたはいいものの、あんまりかっこよくなかった・・・

とにかく、こんな感じでなんぼでもバリエーションを作れるので、
PSDファイルとかで残しておくと便利だと思う。

WEB素材MaterialandExでアイコンを配布したのでよかったらどうぞ
かっこいいメタリックボタンアイコン