DesignTips > ボタン・アイコン等 > Photoshopでナチュラルなwebボタンを作る方法

Photoshopでナチュラルなwebボタンを作る方法

Photoshopでナチュラルなwebボタンを作る方法

今回はPhotoshopでナチュラルなwebボタンを作る方法をご紹介します。

近年のwebデザインはパッと見て分かるか分からないかといった細かいデザインが主流となっています。とくにwebボタンは顕著で、かすかなグラデーションやわずかな陰影など細かい設定が求められます。

今回はPhotoshopを用いてwebボタンを作りたいと思います。Photoshopの[レイヤースタイル]を使うことで、グラデーションや陰影など、近年求められる細かいボタンのデザインが可能となります。

Step01 長方形を描く

Photoshopで長方形を描く

Photoshopを開き、長方形ツールで長方形を描きます。

Step02 レイヤースタイルの適用

レイヤースタイルの適用

長方形に[レイヤースタイル]を適用させます。

[レイヤー→レイヤースタイル→グラデーションオーバーレイ]をクリックし、[レイヤースタイル]ダイアログボックスを開きます。左側の[グラデーションオーバーレイ]にチェックを入れ、上図のように設定します。

設定を終えても、まだOKはクリックしないで下さい。

関連記事:Photoshopでグラデーションをプロっぽく仕上げる方法

Step03 ボタンにグラデーションを適用

webボタンにグラデーションを適用

長方形に黒のナチュラルなグラデーションが適用されました!

まだ、[レイヤースタイル]は閉じないで下さい。

Step04 境界線の設定

webボタンに境界線の設定

続けて、左側の[境界線]にチェックを入れ、上図のように設定します。

まだ、[レイヤースタイル]は閉じないで下さい。

Step05 ボタンにシャドウ(内側)を適用

webボタンにシャドウ(内側)を適用

続けて、左側のシャドウ(内側)にチェックを入れて上図のように設定します。

まだ、[レイヤースタイル]は閉じないで下さい。

Step06 より立体的なボタンに

より立体的なwebボタンに

ちょっとボタンの様子を見てみましょう。

ボタンに境界線が適用され、内側に白いかすかな影が適用されました。より立体的なボタンになってきましたね。

Step07 ボタンにドロップシャドウを適用

ボタンにドロップシャドウを適用

最後にボタンに[ドロップシャドウ]を適用させます。

左側のドロップシャドウにチェックを入れて、上図のように設定します。

これで[レイヤースタイル]の設定は終わりですので、OKをクリックします。

Step08 立体感のあるボタンができた!

立体感のあるwebボタンができた

立体感のあるwebボタンができました!

最後に、文字を入れて完成です。

出来上がり!

Photoshopでwebボタンを作る方法(完成)

ナチュラルなボタンができました。いかがだったでしょうか?

非常にシンプルなwebボタンですが、グラデーション、境界線、シャドウ(内側)、ドロップシャドウの4つのレイヤースタイルが適用されています。

シンプルでナチュラルなボタンですので、どんなwebデザインにも溶け込みますね。

Photohopのレイヤースタイルは非常に細かい設定が可能です。自分が納得のいくボタンができるまで色々と設定をいじってみて下さい。

この投稿文は次の言語で読めます: 簡体中国語, 英語

凹凸感のあるアイコン素材の作り方
ブロンズプレート風フレームの作り方
Photoshopで水滴のイラストをリアルに作る
Photoshopで作る凹凸ロゴとテクスチャ
写真をポラロイド風に加工する方法(Photoshop)
ちょこっと凹んだ猫の足跡のデザイン(Photoshop)
スピード感のある背景イメージの作り方(Photoshop)
Photoshopで光のラインを作る方法
イラストレーターで反射するアイコンの作り方