カッコいいボタンの作り方

Webクリエイターボックスさんの「【実践編】少しの手間で大きく変わる、細部にこだわったWebデザインを」という記事を見かけてすごく勉強になったので、記事を参考に実際に手を動かして作ってみました。

実際に書いてみてわかる元記事のクオリティの高さすごいです。
 

ボタンレイヤーと文字レイヤーを用意する

角丸長方形ツールを使って図形を描画してボタンレイヤーを作成し、文字レイヤーに文字を入力します。

 

ボタンレイヤーにグラデーションをかける

ボタンレイヤーを選択し、レイヤースタイル画面を開きます。
「グラデーションオーバーレイ」にチェックを入れ、描画モードを「スクリーン」、不透明度を50%、角度を90°に設定します。

 

ボタンレイヤーに1pxのラインを加える

ボタンレイヤーのレイヤースタイル「境界線」にチェックを入れ、サイズを1px、色はベースの色より少し濃い色を設定します。

 

レイヤースタイル「シャドウ(内側)」からハイライトの設定をします。
描画モードを「通常」、色を「白」、距離とサイズをそれぞれ2pxにしました。

 

シャドウを加える

ボタンレイヤーの下に新規レイヤーを作成し、黒い楕円を描きます。
それを選択し、フィルター => ぼかし => ぼかし(ガウス)でぼかした後、不透明度を50%前後に調整します。

 

ノイズを加える

海外サイトの背景などはよくノイズが加えられたサイトが見られますが、こういった効果を使って作られていたんですね。

一番上に新規レイヤーを作成しそのレイヤーを白く塗りつぶします。
フィルター => ノイズ => ノイズを加える からノイズを加えます。
(今回は9.5%程度のノイズにしました。)

 

ボタンレイヤーをノイズをかけたレイヤーでマスクします。
ここが、元記事のやり方だとボタンレイヤー、文字レイヤー含めてノイズをかけたレイヤーでマスクする方法を紹介されているのですが、自分の環境だとなぜだかうまくできませんでした。。
文字にテクスチャ効果がかからない方法になりますが取りあえず、ボタンレイヤーのみをマスクすることにしてみます。
レイヤーの境界線を選択し、 alt+クリック でマスクできます。
レイヤーのモードを「通常」から「乗算」に変更するとボタンレイヤーにノイズが加わっているのがわかります。

 

文字に効果を加える

レタープレス効果というらしいですね、カッコいい!

文字レイヤーを選択し、レイヤースタイルを設定していきます。
「グラデーションオーバーレイ」にチェックを入れ、描画モードを「乗算」、不透明度を30%、角度を90°にしました。

 

「ドロップシャドウ」にチェックを入れます。
描画モードを「通常」、色を「白」、距離・サイズを2pxに設定しました。

 


 

「シャドウ(内側)」にチェックを入れます。
サイズと距離を2pxに設定しました。

 

完成

これで一応完成です。
思わず押したくなる雰囲気が出てきました。
何も見ずに作れるように時間をあけて復習しておきたいですね。

大変勉強になりました。

 

いじょ