PhotoshopでiPhone風のボタンを作る | I love Photoshop

iPhone-button

PhotoshopでiPhone風のボタンを作る

2011年9月13日


Step1:新規ドキュメントの作成

新しいドキュメントを開き、背景レイヤーを#434343で塗りつぶします。
ここではドキュメントサイズを900×500pxとしています。

なおこのチュートリアルではRetinaディスプレイ用のサイズでボタンを描きます。

Step2:ボタンまわりのふちを描く

角丸長方形ツール(U)で丸みを24pxに設定し、ふちの中央に幅598px高さ104pxの長方形を描きます。
ふちを描く位置にあらかじめガイドを引いておくと楽に描くことができます。

色は任意で構いません。

Step3:ふちにレイヤースタイルを適用する

Step2で作成したレイヤーに下図のパラメータで「グラデーションオーバーレイ」、「境界線」のレイヤースタイルを適用します。

Step4:ボタンの形を描く

角丸長方形ツール(U)で丸みを20pxに設定し、幅583px高さ87pxの長方形を描きます。
ふちと同様、ボタンを描く位置にあらかじめガイドを引いておくと楽に描けます。

色は任意で構いません。

Step5:ボタンにレイヤースタイルを適用する

Step2で作成したレイヤーに下図のパラメータで「ドロップシャドウ」、「グラデーションオーバーレイ」のレイヤースタイルを適用します。

Step6:テキストを配置する

ボタンのレイヤー内中央にテキストツール(T)で白のテキストを配置します。
テキストレイヤーに下図のようにレイヤースタイル:ドロップシャドウ」を適用すれば、ボタンの完成です。

Step7:ボタンのバリエーション(完成)

赤いボタンはStep5のグラデーションオーバーレイを下図の設定にします。

PSD Download