用Photoshop打造动感网页按钮-中国展示论坛

在开始制作以前你必需要掌握相关的PHOTOSHOP基础知识。希望你能喜欢这个教程。。
( j0 _% V3 @. |通过本教程，你将学会如何制作一个下图所示的一个动感十足的网页按钮。。

, E3 `6 J* i! z$ Z; z' I+ X3 \

6 ?+ K  i+ q# d+ k

下面我们开始制作。
- j& A1 A8 @( l2 X! A首先你需要用钢笔工具作出一个和图中相类似的形状，形状完成后用CTRL+ENTER转换成选区；再随便使用一个颜色填充；在打开双击此图层打开图层样式对话框，勾选渐变叠加做以下设置：
! j9 H0 }# j. |& ~

/ ?3 V6 |4 l5 z$ L0 ^$ q4 i


3 T. S# I5 x1 ]% f& a再在其上面建立一个新图层并用链接按钮将它们链接起来，在按CTRL+E将这2个图层合并。（这么做的目的是用一个空的图层与带有图层样式的图层链接合并后，可以把带有图层样式的图层样式效果保留下来。
如果没有做的话，下面的加深减淡工具在对带有图层样式的图层进行编辑的时候，将看不见加深减淡工具对此图层编辑后的效果。）
! a: z, B! O* {/ t4 [6 m/ c. z- w* C现在在选用工具箱中的减淡工具，选中顶部色设置栏中的喷枪按钮，设置画笔的大小为100PX，范围为中间调。在球体上部区域给球体增加立体效果：
/ V. ]! a. h0 e: {3 U0 \
& q! Z' V1 A' t. T& L# `$ s$ f0 x+ i
) h5 D& S! [: o. C


6 u; i& E1 i! G/ t6 j* g8 ?
再用加深工具在球体下部对其加深做进一部细化，设置和上面设置相同。现在执行选择-修改-收缩命令，将球体的选择区收缩2个象素后点确定；在执行选择-反选命令，用图象-调整-色阶命令将球体的外边缘调的亮些。
* l1 `! ]" c+ i' c" u

- z  x3 D; E. B) m) L( T9 \4 {# ?
9 ~. s& d/ a# A" P

现在按CTRL+单击球体图层，在载入球体选择区后用选择-变换选区命令将球体选区上移
1 G6 B1 s+ k* l! w( q9 K9 ?- p
% F2 D: j( D! H0 }

' W$ R- W8 L4 m* s8 u4 t  Z: N- L6 X
2 o5 L7 i8 {* ?- l8 w8 C& ^) X
在用图象-调整-色阶命令将内部的选择区调的亮些。

6 x" E5 P4 o3 a
3 `# g: B) r( p, K3 m: y: X
+ S* h9 K( G. |  _7 }( o1 n5 w

. W) a6 c! a' f* c在次重复以上步骤将选择区下移到球体中合适位置用图象-调整-色阶命令进行调整。
) A& S" ?$ G' s" n3 c  S9 l
+ Z4 h6 L' ?! D
/ K3 L/ w3 O" q% v; G) Q, Q1 n# X
  O* j( u. Z( W; D& r

现在用减淡工具在对球体局部进行亮度处理，设置喷枪，画笔大小为30。
) `8 d* c2 H$ J2 F# b) K
1234下一页



* |  i0 H5 L9 S8 l
8 e7 D; B  t9 W7 \
: z9 }0 d5 |6 p$ \$ M3 q# f
% m8 k; Z: o* F; r6 z& a


用加深工具对球体底部进行暗调的亮度处理，加大球体的对比度及高光与暗调部分亮度的反差。
; b2 Q/ ?( s) N, ~. U) w1 v

9 M3 `5 g6 E% ?- ?6 r

5 M; k5 |8 h6 X: e
- p' F# D1 H. l# G! i$ ?, k6 `: u现在在球体图层下面建立一个新图层，然后按CTRL单击球体图层载入选区，用变换选区命令将选择区扩大一些并填充一个单色。双击刚建立的用单色填充了的图层用以打开图层样式设置，选中渐变叠加样式作出一个从黑色到深灰色的垂直渐变。

4 i9 h) _/ s3 u7 j. @3 h- B



在背景层上面建立一个新的图层，用椭圆选框工具从球体中心位置作出正圆选区在用黑色填充取消选择。





- Y( V6 D0 M4 V: m5 C" E在用椭圆选框工具逐一选中并删除该层中不需要的部分。
& I  Z- y* _1 _8 X! F6 ^9 p
1 J5 Q5 G7 _- Y$ Z7 V$ m


: V5 S& M" M, k) L$ U3 o$ u
现在回到球体下那个用渐变样式编辑了的图层，在它上面建立一个新的空白图层然后用链接将2者链接起来后按CTRL+E与起合并。（为什么要这么做？原因我前面已经讲过这里不在赘述）在用减淡工具对边缘进行高光部分的亮度处理。

* x9 v% H: h8 ?5 K

" j6 T" B6 {' U; h( A3 x7 D7 j8 U


现在选中背景图层上的用黑色填充的图层，双击打开其图层样式设置，设置渐变叠加样式：渐变编辑器中的设置为深灰-灰-深灰-灰-深灰。在在上面建立一个空图层链接后合并。


% \+ Z0 B" g: `: b3 E

# M8 W: b4 Z) u% j$ d
! S2 z  Q, W$ w1 [: ]3 q在用加深减淡工具加大局部对比，画笔大小50象素。
$ }! y. w2 b. c* r6 [/ }& G) ^
' q+ q9 f- D( Z& {! Q' C


* W/ E7 R/ E. l' a/ ^( k/ T
在保持此图层选择区是选中的情况下，执行选择-修改-收缩命令，收缩2个象素值；接着执行选择-反选，用图象-调整-色阶命令，将外部边缘的亮度值调的低一些。


( h$ J( y+ V. E$ b* S5 l) N/ M$ D
' o& e0 h( Y7 Q6 I

1234下一页


" A/ y/ L. x7 G5 N% A

# s4 g% n$ K" F2 @现在在背景层上建立一个新图层，用多变形套锁工具作出和以下相类似图象。




1 f. I, ]- Q, q0 s0 s8 [
5 T4 D4 K7 y. V6 A# q8 C  e在这个刚作好的图层上执行选择-修改命令修改2个象素。用色阶命令将选择区中的亮度值调的低些。

/ O0 l4 h, R1 ?0 J' e

3 v# q' k" A; D


6 S! i5 z) m; w* T, l用加深工具对内部加深处理。
1 }& U9 g2 R' b/ N0 F% d
2 D( y2 [- K" x  j
5 o/ Z4 X9 O( R/ o7 q( m) n
' B1 r. B- Q# T6 \) @7 e( P

+ _7 T* L6 Q7 C在用选择-变换选区命令将选择区缩小些，在用加深工具进行加深处理。
* {# J# ]9 l, n
3 I9 n0 V; o0 u5 g# v" w. R

* ?) f/ J  G8 X

继续重复以上步骤，直到认为满意为止。


1 b9 e9 f: Z7 v6 t9 |4 ]
* n9 M1 `' l* I" ~
' ~9 a+ S6 y. c
" S9 s7 `9 X1 S5 Z, c+ _' s1 d- q现在按CTRL+j把此图层复制出4个放置在图象中的合适位置。
; J1 v/ {' s( r
7 W4 @, I' M  p! f% l
2 n9 I% G+ K4 Q: `' b+ [# t: S
5 S5 s+ E! @# e3 M0 r
; A3 f% M& O; w2 V: g  n' v
' r8 _( a0 d( Y" A
5 _* [! x) t8 K  r& h. W# L在背景图层上建立一个新图层，在用钢笔工具作出线状的路径转换成选区后用深点的天蓝色填充，注意不要取消选择。

: H6 L/ t' [9 x: O- ?( O



& O0 F7 d' c# j  G' s: y. I在保持选择情况下执行选择-修改收缩命令，收缩3个象素。对“线”内部的颜色用减淡工具进行处理到合适的亮度；在执行选择-反选命令对“线”的外部进行暗调处理。
" u- Y9 t# y( h




! ]7 F8 g. p1 A- I/ K6 D0 h$ ]1234下一页

' d6 r+ j; i/ ^: p1 I: M$ ^; T2 N
' B' J, b; w) v, k" n
3 e0 u: h" V3 M, g: y
4 _+ G& t& A2 [$ O5 O, C在把线的这个图层也多复制几个合并后移动到图象中的合适位置。


; [( o$ Y2 [) J


( Z: b4 p  T- p+ d: h现在来添加文字，在最顶部的图层上建立文字图层。

0 w( ?& |6 j2 u, K/ N. c
4 d# O/ q7 j) ^
  {7 W. _+ B+ {( E

8 G' i1 }0 X* p1 Y# w, S. N按CTRL+j把文字图层复制一份，执行编辑-变换-垂直翻转命令，移动到合适位置在设置图层混合模式为叠加


/ m+ q! }8 ]( H; p


5 d& y8 {( n3 P  \9 U9 @
现在把文字图层与其文字倒影层一起合并在用橡皮擦工具擦除多余的部分。

% H8 N% e, w) {2 z6 M) s9 P


) G% @/ X4 @; E$ e: I
现在双击此图层打开图层样式设置做以下设定：
$ H2 B+ m' H7 G" @  ?
4 `8 x6 e! e  R; Z
  G  F. h9 P: |9 B* U% J  [5 C
! C. P1 U( _- u8 ^

以上就是这个教程的全部制作经过，到此全部结束，在来看看结果吧。


# e( s8 f0 b9 c2 }/ S; V3 P
1234