超簡単、iPhoneっぽいボタンのデザイン

ということで、最近いろんなサイトで見かけるiPhoneぽいボタンのデザインを、簡単に作っちゃいましょう！という企画(?)です。
我流なので、ここ無駄じゃん！とかあるかもしれませんがツッこまないであげてください。

では、早速はじめましょう！

ステップ１「角丸の画像を描こう」

ステップ2「グラデーションを塗ろう」

次に、描いた角丸長方形に色を付けます。
シルバーっぽい色が出るように、かなり薄めの灰色で上から下にグラデーションを付けます。

ステップ３「境界線を引こう」

さて次は、境界線を引きます。
グラデーションの一番濃い色よりも、ちょっとだけ濃い色を使うのがポイント。

ステップ4「べベルとエンボスで立体感を出そう」

ここでべベルとエンボスを使います。
サイズを2px、ソフトを0にすることが重要です。
あとは、ハイライトとシャドウの不透明度を調整します。

ステップ5「シャドウ(内側)で仕上げ」

次は、シャドウ(内側)を選択し、角丸長方形の上部に光沢を入れます。
角度を90度にして、距離2、サイズ0にしましょう。

ステップ6「文字に立体感を出そう」

最後に、角丸長方形の中に文字を入れます。
文字を入れた後、文字のレイヤースタイルでドロップシャドウを選びます。
そして白色、90度、距離1、サイズ0に指定してください。

これで、iPhoneぽいボタンデザインの完成！



とっても簡単でしたね。

ボタンのPSD画像も用意しました。参考にしてください。
 →btn.zip

• 
• Tweet