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デザインのお仕事を始めてなんとか約5年が経ちました。とにかく技術を高めようと思っています。仕事で得た知識やお役立ち情報をご紹介いたします。宜しくお願いします。水彩画を勉強中です。趣味は音楽鑑賞(洋楽)、料理、読書、ブログです。

詳しくはこちら


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

関連記事

  1. Photoshop

    Photoshop の水彩画ブラシで描いた植物イラストのご紹介

    みなさんこんにちは、mayukou です。肌寒いような暖かくなった…

  2. Sass

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

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

  3. Web Design

    WordPressブログを同じサーバーに複数作る方法

    これ、実は知らなかったのですが、とっても簡単でした。そんなことも知…

  4. Web Design

    CSS nite in FUKUOKA vol.6に行ってきました。

    みなさんこんにちは。今日は福岡はあいにくの雨ですが、いかがお過ごし…

  5. CSS

    レスポンシブ対応!CSSで二重線のボーダーボックスを作る方法

    みなさんこんにちは、mayukouです。先日、ホームページを作る際に…

  6. jQuery

    横幅いっぱいに表示可能なスライダーのjQueryプラグイン 「Skippr」が便利!

    みなさんこんにちは。11月に入り寒くなりましたね。今年もあと2ヶ月と…

コメント

  • コメント (0)

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

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

CAPTCHA


最近の記事

instagramもやっています

facebook更新中!

スポンサー

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

  1. Illustrator

    webデザインのトレンド!文字によって変形するゴーストボタンをイラレで作る方法
  2. ipadmini

    Mac

    iPad mini retinaとcookpadがいい感じ
  3. CSSフレームワーク

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

    レスポンシブ対応!CSSで二重線のボーダーボックスを作る方法
  5. ブログ

    webデザイナー4年目!その間に身につけたスキル
PAGE TOP