Photoshop制作玻璃质感导航菜单-中国展示论坛

　　许多网页元素都可以使用Photoshop来制作完成，今天我们就来学习一下如何用Photoshop来打造质感十足的彩色玻璃按钮，并用按钮组成漂亮的导航菜单，最后再在Photoshop中将导航菜单输出为HTML网页文件。

　　本文以Photoshop CS2中文版为例，其它版本的Photoshop在操作步骤上可能会略有差异。先看一下最终效果。
　　

　　最终效果
- M4 q0 A1 o& \# A- |8 w. ^　　具体操作步骤如下。
　　1.启动Photoshop CS2中文版，按Ctrl+N打开“新建”对话框，根据需要稍做设置(大小应该能放得下将来的导航菜单)后，单击“确定”按钮新建一个文档。
4 ~, O; U2 J( k5 W) {　　2.单击图层面板下方的“创建新图层”按钮新建一个图层。选择工具箱中的“圆角矩形工具”，在选项栏中将其半径设置为15px，然后在新图层上画一个如图1所示的圆角矩形。
: a, ~1 r- C* ^; S　　
0 u% A- o# V& p" I5 v% e
　　图1
　　3.现在对上述形状应用如下图层样式。
　　投影：
  {. Q% H  R4 h1 [0 }7 G　　

6 [6 B4 x& q) M1 x
　　图2
　　内阴影：
　　


- F/ b! N! n( u6 ?& B# o% o9 L! @　　图3
: h8 X3 N3 ]- u* \7 b, j　　内发光：
　　
! l( M: A1 A8 a1 H- Y7 p" v
- H% |3 g: K( T' g8 [" W8 F
* [8 {: s! c. U6 Y2 L　　图4
　　颜色叠加：
" R& R1 q! g! V# n0 u　　
) s$ A# W7 w% w! ?

　　图5
　　描边：
　　
  P/ P% n0 k3 I: n% {' N

　　图6
9 V0 ~0 a. u! g4 t+ X) i( J　　应用上述样式后，得到如图7所示的按钮效果。
　　
: x# a! r' p. ^7 ^7 {* F* d, r( D
　　图7
/ f( K, W  F" Y0 y1 F& M/ h. Q
& }  |1 w$ ]8 h/ T3 p6 n! k12下一页



4 K% ~$ ?2 J. }. Y( s　　许多网页元素都可以使用Photoshop来制作完成，今天我们就来学习一下如何用Photoshop来打造质感十足的彩色玻璃按钮，并用按钮组成漂亮的导航菜单，最后再在Photoshop中将导航菜单输出为HTML网页文件。

　　本文以Photoshop CS2中文版为例，其它版本的Photoshop在操作步骤上可能会略有差异。先看一下最终效果。
. r, @* a8 [1 T! X+ h; H8 v: d- |1 s　　

7 ]- t2 S0 Z# j5 Q! F　　最终效果
　　具体操作步骤如下。
- l) `4 q$ B% w2 A* ?. J0 A　　1.启动Photoshop CS2中文版，按Ctrl+N打开“新建”对话框，根据需要稍做设置(大小应该能放得下将来的导航菜单)后，单击“确定”按钮新建一个文档。
　　2.单击图层面板下方的“创建新图层”按钮新建一个图层。选择工具箱中的“圆角矩形工具”，在选项栏中将其半径设置为15px，然后在新图层上画一个如图1所示的圆角矩形。
　　
% y2 T! W6 Q* v* s* R" \0 ~2 K
. g; r, L3 O( B  x2 R/ W# }　　图1
, m. w  T: e. c9 k　　3.现在对上述形状应用如下图层样式。
2 C1 j0 p6 x, b/ L" x9 |* |　　投影：
　　
6 ]4 }5 W1 [' n8 {9 B/ }

　　图2
　　内阴影：
: I  s- o$ `  s+ J: o! H- _　　
' P: o% o! m* Q5 Z9 `# |$ J
( j3 r/ }+ ~$ ^" z& u* a, g8 B
. u' T5 Y9 E# O2 Z0 `　　图3
　　内发光：
　　

5 a5 e9 R8 B1 N, d7 M% ]9 f9 D
　　图4
& Z: |1 [0 E# r' ]7 ~3 @　　颜色叠加：
% z' }# \& [! O# j　　

: v1 q$ d. n& U& g
' G* T5 }( N% ?9 F, i" \　　图5
　　描边：
3 m6 r  `* }' X  W6 @8 k7 d　　
3 a' Z5 l1 E4 D: ]+ s
6 N" s" K1 [* }# n; i5 d( g( V
( {4 `3 t: `4 t1 w' d　　图6
$ u$ m" a% a. B& R1 M　　应用上述样式后，得到如图7所示的按钮效果。
' g+ E4 V( q6 {; r) {　　
" z. }$ F& ]9 V+ l; G
　　图7
8 Q: ~' S3 t, _3 B9 }　　7.选择工具箱中的“切片工具”，打开“视图”菜单，确认“对齐”左边有一个对勾，这样可以使切片自动对齐边缘，从而创建出更为准确的切片。使用“切片工具”一个按钮一个按钮的切割，每个切片中包含一个按钮，结果如图11所示。
　　

　　图11
- m" b# O4 T% E* k* d　　8.既然已经做好切片，那么现在可以将其输出为HTML文件，从而为后来的网页设计做准备了。选择菜单命令“文件｜存储为Web所用格式”，为了得到最好的图像效果，采用如图12所示的设置。设置完毕单击“存储”按钮。
　　

图12
　　9.在“将优化结果存储为”对话框中选择网页文件要保存的位置，并如图13所示输入文件名，选择保存类型为“HTML和图像(*.html)”，然后单击“保存”按钮。
9 q* U8 ^) h) g! M　　

6 M4 l4 y/ F/ D1 d$ ~　图13
　　这样就会得到一个HTML页面，一个images文件夹，这个文件夹中即包含按钮图片。
　　现在只需要将HTML代码拷贝到其它网页中就可以使用了，不过在拷贝时不要拷贝由Photoshop生成的header/body标签。12