« アイ・オー・データ機器、コンセント経由のLANを構築するPLC対応ネットワークアダプター | メイン | ジャコ・パストリアズとピーター・アースキンがいた頃の全盛期のウェザー・リポートの2時間越えライブDVD »


 2006年11月28日

この日のCOTOBACO

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


IRIS Design - Archive - Web 2.0 style buttons

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

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

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

kadomaru1.jpg

kadomaru2.jpg

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

kadomaru3.jpg

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

kadomaru4.jpg

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

kadomaru5.jpg

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

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

kadomaru6.jpg

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

kadomaru7.jpg

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

kadomaru8.jpg

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

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

kadomaru9.jpg

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

kadomaru10.jpg

kadomaru11.jpg

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

kadomaru12.jpg

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

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

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

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

ポリッシュド・テキストの作り方


 投稿者 nagasawa : 2006年11月28日 17:48

 トラックバック

このエントリーのトラックバックURL:(モダシンへのリンクが記事中にない場合は弾かれます)
2524

 コメント

GJ!

もう遅い?

投稿者 t.o : 2006年11月29日 15:42