Tweet

Pocket

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

では、ご説明します！

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

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

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

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

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

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

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

5.境界線を設定

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

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

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

6.白いシャドウ（内側）をかける

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

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

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

参考サイト

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

最後に

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

投稿者プロフィール

mayukou

Webデザイナー修行中のmayukouです。口下手ですが、webデザインのお仕事を始めてなんとか約５年が経ちました。続けられているのが不思議です。仕事で得た知識やお役立ち情報をご紹介いたします。宜しくお願いします。水彩画を勉強中です。趣味は音楽鑑賞（洋楽）、料理、読書、ブログです。
詳しくはこちら

最新の投稿

この著者の記事一覧

• 2017.06.18写真現像すると写真が生き生きする！Macの写真アプリが素敵
• 2017.06.17書評売り上げアップを実感♪目から鱗の本「どうすれば売れるのか」を読んで
• 2017.05.27iPad Pro購入して半年♪iPad Proで描いたイラストをご紹介。（主にProcreateアプリ使用）
• 2017.05.20カメラブロガーの味方？高級コンデジ、Panasonic LX9を買いました。