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

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

    もっとあなたに作って欲しい!とどんどん注文がくるwebデザイナーになり…

  2. Illustrator

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

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

  3. Photoshop

    スキャンで取り込んだイラストの線をPhotoshopで抽出するSeparate Lineartが便利…

    みなさん、こんにちは、mayukouです。デザインやイラストの仕事…

  4. Photoshop

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

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

  5. CSSフレームワーク

    サイト制作が早くなる!Bootstrapの特徴

    サイト制作のスピードを上げたい、そんな方に。6、7年くらい前にこのB…

  6. Illustrator

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

    みなさんこんにちは、mayukouです。今日は福岡ではめずらしく雨…

コメント

  • コメント (0)

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

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

CAPTCHA


メルマガを購読する

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

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


最近の記事

instagramもやっています

facebook更新中!

スポンサー

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

  1. indesign

    デザイン

    Indesignを使って、冊子を作りました!
  2. デザイン

    【随時更新】クリスマス&年賀状に使えるイラスト素材を無料配布します♩
  3. illustration

    混色できる水彩画テイストの表現が可能なipad proアプリ!Tayasui S…
  4. Sass

    使わない方が良い?WordPress 案件をsassでカスタマイズして思う3つの…
  5. Mac

    アプリケーションをすぐに起動できる!Alfredの使い方
PAGE TOP