Photoshop

ついつい押したくなる!立体的なボタンのデザインをPhotoshopで作る方法


みなさん、こんにちはmayukouです。
今回は、ランディングページやバナーなどで使える、
立体的なボタンの作り方について解説していきます。
photoshopで簡単に作れますよ。
ぜひ試してみてください。

スポンサードリンク

1.ボタンの形を描く

photoshopを立ち上げたら、
ボタンより大きいカンバスサイズの新規ドキュメントを開き、
角丸ツールでボタンを描きましょう。
※今回は角丸10pxで、コンバージョン率が高いと言われる緑色で作ってみます。

02-btn

2.レイヤースタイルを設定する

角丸長方形のレイヤーをダブルクリックし、レイヤースタイルを開きます。

設定するのは、3つ(境界線、グラデーションオーバーレイ、光彩(内側))。

境界線

左側の境界線にチェックを入れ、選択して画面を開きます。

サイズを1px、位置は外側で、塗りつぶしカラーをボタンより暗めの緑を選びます。

(下図のように設定します。)

04-layer

 

09-btn-line

グラデーションオーバーレイ

左側のグラデーションオーバーレイにチェックを入れ、選択して画面を開きます。
描画モードをオーバーレイにし、
不透明度を30%程度にします。
うっすらとグラデーションができますね。

06-overlay

 

10-btn-gradiation

光彩(内側)

光彩(内側)にチェックを入れ、洗濯して画面を開きます。
描画モードをスクリーンにし、不透明度を30%にします。
すると、うっすらボタンの内側の淵に明るいラインができます。

07-layer

この設定でOKを押します。
これでボタンの完成です。簡単ですよね!

08-kansei

最後に

いかがでしたか?最近ではフラットデザインが主流になってきてますが、
ランディングページやバナーなどは、やっぱり立体的デザインが
わかりやすいと思います。ぜひお試しください!

そのほかにランディングページに使えそうな洒落てるボタンの作り方も書きました!
https://web-design-cafe.com/archives/991

投稿者プロフィール

mayukou
mayukou
Webデザイナー修行中のmayukouです。webデザインのお仕事を始めてなんとか約6年が経ちました。とにかく技術を高めようと思っています。仕事で得た知識やお役立ち情報をご紹介いたします。宜しくお願いします。水彩画を勉強中です。趣味は音楽鑑賞(洋楽)、料理、読書、ブログです。
詳しくはこちら

Twitterをフォローしていただくと、最新情報を見逃しません♫

関連記事

  1. Photoshop

    画像からフォントを探してくれる!Photoshopのマッチフォントが素敵。

    みなさんこんにちは、mayukouです。「このフォント何を使っている…

  2. free font

    デザイン

    デザインの質が上がる!私が利用しているフリーフォントサイト

    こんにちは。mayukouです。遅くなりましたが、新年明けましてお…

  3. Illustrator

    メリハリがつく!Illustratorでドロップキャップを作る方法

    みなさんこんにちは、mayukouです。先日、雑誌広告のデザインを担…

  4. Tutorial

    簡単!photoshopでスタンプ風のかすれた表現をする方法

    今回は、スタンプ風のかすれた表現をご紹介します。私は、仕事で使うこと…

  5. Web Design

    デザインが成功するテンプレがここに。「なるほどデザイン」を読みました

    みなさんこんにちは、mayukouです。今回は、デザイン関連のお勧め…

  6. Photoshop

    必見!Photoshopでスタンプ風のかすれた表現をする方法まとめ

    こんにちは、mayukouです。だいぶ、暖かな気候になってきて、過…

コメント

  • コメント (0)

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。

CAPTCHA


メルマガを購読する

Web Design Cafeの メルマガを購読する

更新情報や、お知らせ、お得情報をゆる〜く配信(月1程度)。


最近の記事

instagramもやっています

facebook更新中!

スポンサー

こんなサイトも作ってます。

  1. Web Design

    グーペは、デザイン費をかけられない、個人お店経営者、作家、アーティストにおすすめ…
  2. Web Design

    モバイルフレンドリーなwebデザインするときにおすすめなツールまとめ
  3. デザイン

    楽天ショップのデザインの参考に!おしゃれな楽天ヘッダー7選
  4. Photoshop

    Photoshopでかすれたスタンプ風表現をする方法 その2
  5. Illustrator

    スキャンした画像をIllustratorでベクターにする方法2 (追記)
PAGE TOP