Blog

※ブログ移転しました。 → hamashun.me

Web2.0風ボタンの作り方(メモ書き編)

Web2.0風のボタン、いわるゆテカテカ系ボタンの作り方を解説したサイトはたくさんあります。
CSS関連のコラムを書く時など、ちょっとした画像が必要な時に便利なのですけど、毎回そういったサイトを参照するのがちょっと面倒でした(記憶できない鳥頭が悪いのですけれど)。
そこで、今回自分用にまとめてみます。

なお、このエントリは激しく私的メモ書きです。
細かい数値が書いていなかったり、説明が十分で無かったりする場合があります。

解説画像1
まずは適当なサイズのべた塗りレイヤを用意します。

解説画像2
レイヤースタイルのグラデーションオーバーレイを指定します。
画像のグラデのポイントは3点です。

解説画像3
無くても良いのですけど、ここでは縁取りをしています。
選択からの範囲変更や、レイヤースタイルの境界線などで。

解説画像4
同じくレイヤースタイルの光彩(内側)で淡い光を付けます。
これもお好みで。

解説画像5
恐らくココが一番のポイントです。
新規レイヤを作成して、グラデーションオーバーレイがかかっていて、かつ光彩の内側を選択し、その中にグラデーションをかけます。
解説画像5の2
色は下部と同じ色で(ここでは#000000)。 これによって、なめらかなグラデーションが可能です。

解説画像6
最後に文字を入れて、ドロップシャドウなどを指定します。

他にも、ボタン自体にドロップシャドウを入れたり、各レイヤースタイルの数値を変えたりと様々な工夫が考えられると思います。

Contribution Form

Blog Search
Search
Recent Entry
Category
Monthly Archive