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. Sass

    使わない方が良い?WordPress 案件をsassでカスタマイズして思う3つのこと。

    みなさんこんにちは、mayukouです。先月、仕事の案件でwordp…

  2. CSSフレームワーク

    簡単にBootstrapで!100%表示のレスポンシブ対応のカルーセルスライダー

    こんにちは、mayukouです。お盆も過ぎて、後半戦が始まった感じで…

  3. CSSフレームワーク

    押さえておきたい!代表的なCSSフレームワークまとめ

    みなさんCSSフレームワークをご存知ですか?最近CSSフレームワー…

  4. Photoshop

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

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

  5. jQuery

    簡単設置で見やすい!レスポンシブ対応メニューslicknavの使用方法

    みなさんこんにちは、mayukouです。さて、4月21日から、goo…

  6. Web Design

    意外と知らなかった…google map をホームページに貼付ける方法

    みなさま、こんにちは。mayukouです。今回は、仕事で必要に…

コメント

  • コメント (0)

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

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

CAPTCHA


メルマガを購読する

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

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


最近の記事

instagramもやっています

facebook更新中!

スポンサー

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

  1. Web Design

    作るごとに成長しよう!キュレーションメディアを作るときに気をつけること。
  2. デザイン

    デザインの引き出しを増やすために!スクラップがオススメ♪
  3. Mac

    macbook “12 goldが届きました。使用感、メリット・デメ…
  4. Photoshop

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

    いい味が出る!リアルな水彩画風タッチに最適なPhotoshopのブラシ
PAGE TOP