« 個室、せめてパーティション、それは夢? | メイン | 天才 »

今更ながらガラスボタンの作り方

なんか「ガラスボタン+作り方」っていうのがウチへの検索語に多いのに、作り方を書いたためしがないので、たまにはこういうのも書いてみようと思って3分くらいで作ってみた。エントリ書くほうが時間かかる。

ガラスっぽいボタンを作るにはいろんな方法があります。
それぞれ光り方とか質感が違うので、サイトデザインにあわせて作り方は変えますが、この方法はだいぶ手抜きだけど手軽にそれっぽく見えます。
使用ソフトはPhotoshopCS2です。

1)角丸長方形ツールでボタンの形を描く。「丸み」はボタンの高さの半分の値で。

btn01.jpg

2)「レイヤー効果>グラデーションオーバーレイ」で「描画モード:ソフトライト」「グラデーション:#999999→#FFFFFF」「スタイル:反射」「角度:90」

btn02.jpg

3)「レイヤー効果>境界線」で「サイズ:1px」「位置:内側」「カラー:(元のボタンの色)」

btn03.jpg

4)「新規レイヤー」を作成してボタンの上半分の大きさを白で塗りつぶし

btn04.jpg

5)(4)で作ったレイヤーで「クリッピングマスク作成 (option+command+Gもしくはレイヤー>クリッピングマスクを作成」。そして右上の「不透明度」を20%に。

btn05.jpg

6)できたボタンに文字をのっける

btn06.jpg

7)文字に「レイヤー効果>ドロップシャドウ」をかける。「描画モード:オーバーレイ(色は#000000)」「不透明度:30%」「角度:120(くらい)」「距離:2px」「サイズ:0px」

btn07.jpg

8)さらにボタン自体にもドロップシャドウをかけるとより「押せそう」ボタンに。でも効果は控えめに。この場合は「不透明度:20%」「距離:2px」「サイズ3px」です。

btn08.jpg

9)なんでこうするかというと、他の色のボタンを作る時に「シェイプレイヤーの色を変える」「境界線の色を変える」だけ(図でいうと赤枠部分をクリックすると変えられる)で済むからです。(ただし色によっては調整が必要)

btn09.jpg

お好みでシェイプレイヤーに「レイヤー効果>光彩(内側)」「描画モード:オーバーレイ(色は#FFFFFF)」「不透明度:50%くらい?」とかをかけるとより光ってるかんじになったり
(エントリ書いている間に元ファイルが消滅したのでキャプチャなし…)

トラックバック

このエントリーのトラックバックURL:
http://wacok.org/cgi/mt/mt-tb.cgi/1316

コメントを投稿

About

2007年09月27日 00:50に投稿されたエントリーのページです。

ひとつ前の投稿は「個室、せめてパーティション、それは夢?」です。

次の投稿は「天才」です。

他にも多くのエントリーがあります。メインページアーカイブページも見てください。

Powered by
Movable Type