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でスタンプ表現が簡単に!PSD素材で一発表現!

    こんにちは、mayukouです。最近ランニングウェアを新調して、ち…

  2. Illustrator

    空を可愛く!Illustratorで虹を簡単に描ける方法&ダウンロードできる素材を作りました

    みなさん、こんにちはmayukouです。台風も過ぎ去り、梅雨ももう…

  3. Photoshop

    便利!Photoshopで描いた絵をIllustratorで使えるパスに変換する方法!

    みなさんこんにちは、mayukouです。今回は、Photoshopで…

  4. Photoshop

    あっという間に!Photoshopのブラシで写真を手描き風にする方法

    みなさんこんにちは、mayukouです。今回は、Photoshop…

  5. Illustrator

    自分で作れると便利!illustratorでチェック柄を描く方法

    みなさんこんにちは、mayukouです。※熊本・大分で地震の被害に…

  6. Photoshop

    アナログにも負けない水彩画風表現を!Photoshopで混色しながら色を塗る方法

    こんにちは、mayukouです。みなさん、いかがお過ごしですか?…

コメント

  • コメント (0)

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

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

CAPTCHA


メルマガを購読する

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

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


最近の記事

instagramもやっています

facebook更新中!

スポンサー

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

  1. Web Design

    丸からスライドして出てくる検索ボックスの作り方
  2. Mac

    仕事が早く終わる!集中力を持続して生産性アップできるPomodoroのアプリがオ…
  3. CSSフレームワーク

    サイト制作が早くなる!Bootstrapの特徴
  4. 書評

    超クール!webマーケティングが学べる「沈黙のwebマーケティング」を読みました…
  5. Mac

    気に入った画像を切り抜いて保存できる!スクラップアプリ、Pixaveの使い方
PAGE TOP