Tweet

Pocket

みなさん、こんにちはmayukouです。
今回は、ランディングページやバナーなどで使える、
立体的なボタンの作り方について解説していきます。
photoshopで簡単に作れますよ。
ぜひ試してみてください。

1.ボタンの形を描く

photoshopを立ち上げたら、
ボタンより大きいカンバスサイズの新規ドキュメントを開き、
角丸ツールでボタンを描きましょう。
※今回は角丸１０pxで、コンバージョン率が高いと言われる緑色で作ってみます。

2.レイヤースタイルを設定する

角丸長方形のレイヤーをダブルクリックし、レイヤースタイルを開きます。

設定するのは、３つ（境界線、グラデーションオーバーレイ、光彩（内側））。

境界線

左側の境界線にチェックを入れ、選択して画面を開きます。

サイズを1px、位置は外側で、塗りつぶしカラーをボタンより暗めの緑を選びます。

（下図のように設定します。）

グラデーションオーバーレイ

左側のグラデーションオーバーレイにチェックを入れ、選択して画面を開きます。
描画モードをオーバーレイにし、
不透明度を30%程度にします。
うっすらとグラデーションができますね。

光彩（内側）

光彩（内側）にチェックを入れ、洗濯して画面を開きます。
描画モードをスクリーンにし、不透明度を30%にします。
すると、うっすらボタンの内側の淵に明るいラインができます。

この設定でOKを押します。
これでボタンの完成です。簡単ですよね！

最後に

いかがでしたか？最近ではフラットデザインが主流になってきてますが、
ランディングページやバナーなどは、やっぱり立体的デザインが
わかりやすいと思います。ぜひお試しください！

そのほかにランディングページに使えそうな洒落てるボタンの作り方も書きました！
https://web-design-cafe.com/archives/991

投稿者プロフィール

mayukou

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

最新の投稿

この著者の記事一覧

• 2022.05.20jQueryfullpage.jsで全画面表示＆スクロールを実現できます。その方法をご紹介
• 2022.03.27デザイン【制作実績】店舗の壁画を描きました。壁画の描き方をご紹介
• 2022.02.23デザイン人は色で判断している！？ブランディングにおける色彩設計の基本
• 2022.02.23CSSデバイスに合わせて全画面表示したいときは、CSSのheight:100vhを使おう。