Photoshop

ちょっと洒落てる!Photoshopで作る、白いシャドーが入った押したくなるボタンの簡単な作り方


みなさんこんにちは、mayukouです。
最近は暑すぎず、どちらかというと涼しいので過ごしやすいですねー。
さて、今回は以前から使っている便利なボタンデザイン方法をご紹介します。
以前ご紹介したものよりも立体感があり、上部に白いシャドーが入ってより今風な感じが漂うボタンです。

では、ご説明します!

スポンサードリンク

1pxにこだわったボタンの作り方

1.500pxx500pxほどの新規カンバスを開く

2.角丸四角ツールで、130px x 30pxほどの四角を描きます(任意でサイズを決めていただいて構いません)

12-btn-01

3.レイヤー効果パネルを開きます

4.グラデーションオーバーレイをかける

グラデーションオーバーレイにチェックを入れて、以下のように設定します

13-btn-02-panel

12-btn-02

ボタンが立体的になりました

5.境界線を設定

14-btn-03

境界線にチェックを入れて、以下のように設定します

15-btn-03-panel

14-btn-03

1pxの境界線を入れることで、ボタンに締まりが出ました。

境界線の色は、グラデーションの暗い部分の色より少し暗い(濃い)色に設定すると良いでしょう。

6.白いシャドウ(内側)をかける

16-btn-04

シャドウ(内側)にチェックを入れて、以下のように設定します

17-btn-04-panel

16-btn-04

より立体感が素敵に強調されましたね!

文字を入れて出来上がりです!

18-btn

参考サイト

http://lab.aratana.jp/entry/2015/02/03/133224

最後に

いかがでしたか?ランディングページやECサイトのバナーなどにも使えると思います。
ぜひ活用してみてください!

投稿者プロフィール

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

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

関連記事

  1. Web Design

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

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

  2. Photoshop

    Photoshopでスタンプ表現が簡単に!PSD素材で一発表現!

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

  3. Photoshop

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

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

  4. Web Design

    書評「だからそのデザインはダメなんだ」で適切なUIデザインを考える

    みなさんこんにちは、mayukouです。最近では、webデザイナーと…

  5. Web Design

    【有料記事】スキルアップしよう。デザイン力が育つ方法とは。

    みなさんこんにちは、mayukouです。デザイナー5年目の私が、仕事…

コメント

  • コメント (0)

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

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

CAPTCHA


メルマガを購読する

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

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


最近の記事

instagramもやっています

facebook更新中!

スポンサー

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

  1. free font

    デザイン

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

    表現の幅が広がる!photoshopのパスでラインを引く方法
  3. Web Design

    【有料記事】スキルアップしよう。デザイン力が育つ方法とは。
  4. Photoshop

    Photoshopでスタンプ表現が簡単に!PSD素材で一発表現!
  5. Web Design

    クライアントに喜ばれる!集客用ホームページを作る手順
PAGE TOP