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

    WordPressでポートフォリオサイトをリニューアルしました。wordpressで作るメリットとデ…

    みなさんこんにちは、mayukouです。約3年ぶりにポートフォリオサ…

  2. Web Design

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

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

  3. Photoshop

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

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

  4. Illustrator

    面倒じゃない!簡単なIllustratorでシームレスなパターンの作り方

    みなさんこんにちは、mayukouです。デザインを作る上で、背景がシ…

  5. Illustrator

    簡単!Illustratorで写真の淵をぼかす方法

    みなさんこんにちは、mayukouです。まだまだ梅雨の時期ですが、…

  6. Photoshop

    かすれや濃淡が出る!かわいい手描き感のあるブラシのご紹介♩(有料)

    皆さんこんにちは、mayukou です。以前の記事に書きました通り、…

コメント

  • コメント (0)

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

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

CAPTCHA


最近の記事

instagramもやっています

facebook更新中!

スポンサー

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

  1. ブログリニューアル

    wordpress

    ブログリニューアルしました。そのときやったことなど。
  2. デザイン

    スターバックスに学ぶブランディング:デザインコンセプトとは
  3. Illustrator

    助かった!Illustratorが重たい時の対処方法
  4. 日記

    wordpressでコーギーブログ始めました♫
  5. Illustrator

    画像のベクター化が簡単に!Adobe Capture CCがおすすめ♩その使い方…
PAGE TOP