みなさんこんにちは、mayukouです。
最近は暑すぎず、どちらかというと涼しいので過ごしやすいですねー。
さて、今回は以前から使っている便利なボタンデザイン方法をご紹介します。
以前ご紹介したものよりも立体感があり、上部に白いシャドーが入ってより今風な感じが漂うボタンです。
では、ご説明します！
スポンサードリンク
1pxにこだわったボタンの作り方
1.500pxx500pxほどの新規カンバスを開く
2.角丸四角ツールで、130px x 30pxほどの四角を描きます（任意でサイズを決めていただいて構いません）
3.レイヤー効果パネルを開きます
4.グラデーションオーバーレイをかける
グラデーションオーバーレイにチェックを入れて、以下のように設定します
ボタンが立体的になりました
5.境界線を設定
境界線にチェックを入れて、以下のように設定します
1pxの境界線を入れることで、ボタンに締まりが出ました。
境界線の色は、グラデーションの暗い部分の色より少し暗い（濃い）色に設定すると良いでしょう。
6.白いシャドウ（内側）をかける
シャドウ（内側）にチェックを入れて、以下のように設定します
より立体感が素敵に強調されましたね！
文字を入れて出来上がりです！
参考サイト
http://lab.aratana.jp/entry/2015/02/03/133224
最後に
いかがでしたか？ランディングページやECサイトのバナーなどにも使えると思います。
ぜひ活用してみてください！
投稿者プロフィール
-
Webデザイナー修行中のmayukouです。webデザインのお仕事を始めてなんとか約６年が経ちました。とにかく技術を高めようと思っています。仕事で得た知識やお役立ち情報をご紹介いたします。宜しくお願いします。水彩画を勉強中です。趣味は音楽鑑賞（洋楽）、料理、読書、ブログです。
詳しくはこちら
最新の投稿
- 2022.05.20jQueryfullpage.jsで全画面表示＆スクロールを実現できます。その方法をご紹介
- 2022.03.27デザイン【制作実績】店舗の壁画を描きました。壁画の描き方をご紹介
- 2022.02.23デザイン人は色で判断している！？ブランディングにおける色彩設計の基本
- 2022.02.23CSSデバイスに合わせて全画面表示したいときは、CSSのheight:100vhを使おう。
この記事へのコメントはありません。