WEB素材 - アクアボタン | Web素材 |
今回は、↓のようなアクアボタンを作る方法をご紹介します。
「進む」や「戻る」「ホーム」など、ページのちょっとしたアクセントなんかにどうぞ！
STEP.1
新規ファイルを作成し(Ctrl + N)、新規レイヤー(Ctrl + Shift + Alt + N)上に、円形の選択範囲を作って塗り潰します(Shift + F5)。
STEP.2
塗りつぶしたレイヤーのスタイルを、以下のように設定します。
「ドロップシャドウ」
「グラデーションオーバーレイ」
「境界線」
STEP.3
新規レイヤーを作成し(Ctrl + Shift + Alt + N)、今度は一回り小さい円形範囲を塗りつぶします(Shift + F5)。
さらに、このレイヤーにもスタイルを追加していきます。
「シャドウ（内側）」
「光彩（外側）」
「グラデーションオーバーレイ」
STEP.4
カスタムシェイプツール(U)で、デフォルトで読み込まれている矢印を描きます。
このシェイプにも、レイヤースタイルを追加します。
「シャドウ（内側）」
「ベベルとエンボス」
STEP.5
レイヤーパレッドで、小さい方の塗りつぶし円のサムネイル画像部分をCtrl + クリックして選択範囲を作成します。
次に、グラデーションツール(G)を選択して、下のような不透明度１００?０％の白黒グラデーションを作ります。
グラデーションができたら、モードを「ソフトライト」・不透明度を「３０％」に変更して選択範囲内を左上から右下に塗ります。
STEP.6
新規レイヤーを作成し、さらにもう1回り小さい円形の選択範囲を白く塗りつぶします。これは、光の模様になります。白で塗りつぶしたら、不透明度を「２０?３０％」程度に下げます。背景の色とのバランスで調整してください。
ここで一度、選択範囲は解除します（Ctrl + D）。
次に、この円を自由変形（Ctrl + T）して楕円形にします。
STEP.7
さらに、同レイヤー上に選択範囲を作成し、白円の一部を消します。
STEP.7
最後に、このレイヤーに「フィルタ > ぼかし > ぼかし(ガウス）」を適用します。
これで、完成です！
お疲れ様でした、ちょっと時間がかかりましたね。
しかし、苦労した分だけ、ボタン１つにも愛着が沸いてくるというものです！
こういう作業をコツコツ積み上げていけば、サイトが完成したときの喜びや大切にする心持が違ってくるんです！
そこまで手間がかかるというわけではないですから、オリジナルボタンにも是非挑戦してみてくださいね！
