ボタンの作り方（Photoshop）

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

この記事を見た方は他にこんな記事も見ています