Modern Syntax : CSでのWeb2.0スタイルの角丸上半分テカリボタンの作り方

Saved by 5 people (0 private), first by anonymouse user on 2006-11-29

Web2.0スタイルの角丸上半分テカリボタンの作り方を説明しているサイトなんですけど、PhotoShop CS2をベースに説明しているのでCSを使っている私には説明が足りない部分があったんで、「忘れないようにするために」日本語でメモを残しておきます。

1.作成しようと思うボタンのサイズが入るぐらいのサイズの新規ドキュメントをまず作成します。

2.「角丸長方形ツール」を選択して角丸な長方形を描画します。角の丸の角度は「角丸の半径」で好きな数値にしてください。ここでは10ｐｘにしました。

3.で、角丸長方形を作成したレイヤーで右クリックして「レイヤー効果...」を選択します。その後、「グラデーションオーバーレイ」を選択します。
で、カラーグラデーションの部分をクリックします。

するとこんなウィンドウが表示されます。

で、新規グラデーションで適当な名前の新しいグラデーションを作ったら、始点と中間点が#434343で終点が000000のグラデーションパターンを作成します。

4.「レイヤー効果...」の「境界線」で線の色を「#363636」に、太さを1ｐｘにします。

5.「光彩（内側）」をこんな感じにします。

6.そうするとこんな感じのボタンになっているはず。

7.次にボタンの光る部分を作ります。まず新規レイヤーを作ります。で、「レイヤー」メニューから「ベクトルマスクを追加」⇒「すべての領域を表示」を実行したらカラーパレットから白を選択したのち、また「角丸長方形ツール」を使って光る部分を作成します。

8.このレイヤーを右クリックして「レイヤーをラスタライズ」を実行します。

9.ツールバーの「クイックマスクモード」をクリックします。赤くなっているところですね。

10.その状態で「グラデーションツール」を選択して以下のような感じになるように上から真ん中までグラデーションを作成します。

11.その後「クイックマスクモード」を解除したらキーボードの「Delete」キーを押すと見事に光部分ができあがりです。

あとはこの上にアイコンや文字をのっければOKです。

まあ、この画像をコピーして拡大縮小したり色味を変えるのが一番楽なんだろうなあ（笑

ということでした。疲れた。

ついでにWeb2.0っぽい文字の作り方を解説したこの記事もよければご参考ください。

Highlighted by sleepydays