miraiz
ウェブ関係2010-03-29

Windows Vista Windows7風 透明ボタン

Windows Vista Window7風 透明ボタン

Windows Vista Windows7風 透明ボタン

Windows Vista、Windows7ライクな透明なボタンをWebサイト上に配置するのはどうでしょう?

IE6では透過PNGが正常に処理されないので、javascriptなどを使用しないといけませんが・・・。

サンプルは画像なので、クリックできません。

Photoshopのレイヤースタイル的には、

ドロップシャドウ、ベベルとエンボス、輪郭、サテン、グラデーションオーバーレイ、境界線を適用させてます。

ドロップシャドウは、乗算35%、距離5、サイズ10、角度はお好みで。

ベベルとエンボスは、ベベル(内側)、滑らか、深さ100%、サイズ1、輪郭はアンチエイリアスにチェック。

サテンは スクリーン50%、角度-90、距離9、サイズ55

グラデーションオーバーレイは、スクリーン10%、#000000~#ffffffのグラデーションを反射で、角度は180

境界線は、1で内側に。

上記、レイヤースタイルを適用するとサンプルのようなイメージになります。

あとは、お好みの気持ちいいところを探してください。

ホームページ制作 MIRAiZ-ミライズ-


コメントをどうぞ