近未来風光沢のあるボタン

メニューボタンなどに使えそうなちょっとカッコイイ感じのボタンの作り方です。


照明効果によるグラデーションを利用するだけなのでとても簡単なチュートリアルになっています。カラーバリエーションも沢山作りやすいテクニックです。



まずはじめに新規で以下のサイズを作成します。

最初に背景を薄いグレー（#eeeeee）で塗りつぶします。

次に新規レイヤーを作成し、下画像のような範囲を選択範囲ツールで選択し、オレンジ色（#eb6100）で塗りつぶします。















次に上のメニューのフィルタ⇒描画⇒照明効果を選択し、下画像の数値で摘要します。

すると下画像のようになります。

このオレンジのレイヤーにシャドウ（内側）を下画像の数値で適用します。

すると下画像のようになります。

新規レイヤーを一番上に作成し、鉛筆ツール1px、50%グレーで下画像のような線を引きます。

その線のレイヤーの描画モードを覆い焼きカラーにします。

またひとつ新規レイヤーを作成し、選択範囲ツールで上半分を選択し、白で塗りつぶしたあと透明度を14%にします。

最後にテキストを入力し、ドロップシャドウを下の数値で適用して完成です。

真ん中の四角を好きな色で塗りつぶした後に照明効果をつける事でいろいろなカラーバリエーションが簡単に作成できます。

近未来的なスタイリッシュなボタンの完成です。ウェブ素材としてはもちろん、ちょっとしたポップの背景などに使ってもかっこいいかもしれません。

Posted in: ウェブボタン・パーツ