现在不管是Windows Media Player播放器，还是MSN浏览器，甚至于腾讯的QQ浏览器都将前进后退的按钮改成了这种哑铃形状，下面我就教给大家如何在Fireworks MX 2004中制作这种简单的按钮。
' W. x! s5 ^ M/ q; b
1.新建300像素白色画布，选择“椭圆”工具按住Shift键画一个正圆形，复制这个圆形，并按住Shift键将其缩小，放在紧贴在第一个大一些的圆形的旁边。（如果怕对不整齐，可以按Ctrl Alt R打开工作区中的标尺，并从标尺中拖出辅助线用以助于对齐圆形）
8 N' w" {# S$ x: ~% Y% U
) b, Y+ q7 M4 O1 x) u I; `! `* R
/ ?5 E, T0 M6 B" w! g/ k$ k; R. W& R6 H
0 _8 Y' p8 [2 s- C
* @" z7 n# F1 ^& X Q4 e$ g/ k( {& M6 W
2.注意刚刚大小两个圆形的相交处刚刚是汇合了一点点，然后选中两个圆形，选择菜单--修改--组合路径--联合，这样两个圆形就形成了一个路径。
6 y0 z" ]: n( L1 U
5 \- V3 z; G k/ f3 e. q* X
; }7 D+ N3 X2 u$ X
; n3 S1 i7 ]3 o ?( F
) V/ X1 d9 K% l9 m
. b9 g1 _8 v+ e( ] `
( P! D5 H* S* M 3.选择“部分选定”工具，调节组合后双园型路径的上半部分中间处的锚点，仔细调节成尽量平滑的过渡。如图：
# i$ s$ D( K- J4 X
" |& B$ X' R- q# \# `7 H8 u$ j2 h* I+ Q, j; _. ~; A- s! ?0 C% A
. e1 @: ~* q! s1 V0 s7 f# p( C! U2 x: M Y$ i
) b5 M$ ]5 Z0 E' E; _) L; d3 B5 _
4 _7 c/ j+ _2 R8 O0 n 4.选择“刀子”工具，延中间的横向辅助线将双圆形切开，删除下半部分（因为没有对下半部锚点做调解，所以就删掉了）
; c$ C7 K1 O! P
1 ]2 w5 \! Z6 D' c8 X/ c. F* I/ t7 k7 b: t
2 O8 B* J- V* D8 n( P$ o- |( ]- o& P U; {% ?
: Q" \. A3 R) g3 U
! l! j$ D) C/ D! M% F. M! J
5.选中剩下的上半部分轮廓，复制，垂直翻转，然后对齐到中间辅助线位置，在选择上半部分路径联合。
% {5 ^# l2 {2 e' p3 T: a: r% `
/ C" @- `4 w" W3 @6 J8 w1 {' k5 K+ [8 _, d4 e& s& W' N
/ d8 q- A9 h. P# a1 I, l- l
p: z' K H3 [5 h
8 L Z8 x8 T3 p* {: D( {
2 R5 V5 Z; w! ]# C/ J7 [6 ?) q, G 6.使用线性过渡色填充，方向是从上到下，颜色参照#CBDCED---#FFFFFF，当然这里也可以自己根据需要随便填充。
! F4 S2 Y2 n7 c- [; _0 S
7 W7 _! k3 y3 Y2 I" C( e9 e: P# G5 r9 F% |
' X$ z- ?9 S" U! l1 U& Q4 U# n
* q7 m; m- V* h' n9 |
) ^2 y" ]9 c, Q; g2 ^6 X5 J4 o0 `" F& y( K( U/ d+ z$ u
7.选择效果--内侧阴影，距离4-透明度65%-柔化3-角度315-颜色#4775A3
% U: G/ l* q9 D; O! K: X1 L
" O2 A) M( n6 |0 F* _! ]( x
. ^) Z# [% v2 ]0 y! z) M, H8 f
* L- }" N6 n( l+ G' o: q/ K
3 C& x/ \0 r6 T' H' f! z4 u
3 ^; q& J9 o* a1 x
5 b* D( |+ L5 T; ?2 { C
8.依旧画一个正圆形，内部用放射性填充，填充颜色可以参照刚才的#CBDCED---#FFFFFF，边框可以选择稍微深一些的蓝色，然后在效果中选择投影，设置为距离2-透明度100%-柔化1-角度135-颜色#FFFFFF；
) }# T0 ?2 N! E- p/ \) n0 } 再作一次投影效果，设置为距离2-透明度100%-柔化1-角度315-颜色#000000；增加圆形按钮的隆起感觉。
+ q! I, i/ V* T- n 选择自定义形状中的箭头形状，在圆形按钮上画一个箭头，如果方向不对选择水平翻转，加效果内侧阴影，设置为距离3-透明度65%-柔化2-角度315-颜色#000000，再增加效果投影，设置为距离2-透明度100%-柔化1-角度135-颜色#FFFFFF；
2 Y0 {* a7 Q! s3 j; P! | 复制刚才的圆形按钮和箭头，做水平翻转，并缩小，如有的效果会翻转，根据情况修改投影的角度即可。
- l& X" Q2 ^5 C1 Y8 ~2 C& g& d9 N. i
' O2 [" N) U) r8 t: t% o( ^% }5 b2 f1 n0 Y+ M) A
* @4 q; N$ M, I" h* }& L3 ^+ Q3 g% G8 X/ W9 S
7 C) U) D; @/ \- G" Y# g7 @* \
7 u: ~8 a8 n- w$ M T" b1 J5 R
9.给做好的哑铃按钮选择一个背景，增加效果投影，设置为距离2-透明度100%-柔化2-角度315-颜色#FFFFFF，再增加一次投影效果，设置为距离2-透明度65%-柔化2-角度135-颜色#73A2D0；这样就可以叫按钮和背景完美融合在一起了。
t8 m8 V9 w' E% v x
4 [' I) ^# Y* [2 f A
1 t5 E7 x3 L0 u% j' ~( F' Y6 r- k5 y5 J8 f- [
: L* _& ^7 w7 l5 ?$ ?( d
! a7 I; r9 ?& c! M
; \/ G3 [" _/ j& @2 H 色彩的搭配大家可以根据自己所需自行改变，以上只是一个制作过程的参考。
# B. @) \ t+ B" B' K3 q
源文件下载
% P Z G" d5 v8 K i
9 a2 [2 V+ B' Q1 c- ~
& t2 c) f1 M9 [+ Q! s% t4 Y4 n" ]
" F8 n' g" S1 o9 g
" i9 T5 J9 n, h% ?3 K
