Fireworks交互式填充绘精致网页导航菜单

最近这种菜单好象很流行，不少网站都有了。这个菜单好处在于可以节约有限的空间，很有价值，会经常在设计中用到，
# O' m( @  c) u' T0 q& f其实这样的网页菜单并不复杂，无非是渐变的填充，用Fireworks 强大的交互式填充工具来制作，那简直是手到擒来，即使是Fireworks 的初学者也能顺利掌握。另外这种矢量图修改起来也很方便，所以 fireworks 非常适合 web 设计创作。文章末尾提供原文件供大家下载参考。
4 Z1 z3 j- Y7 `; T
1 X- ?$ {9 F, j# ~6 `% e) G3 X0 Q  x
2 p3 H) ~0 Y7 ?$ g


3 t' U, P! E1 T
# m) W# m$ Q/ {) a' G8 X第一步，做底条，注意边框颜色和渐变设置
1 v2 f' S  I3 N# c

7 k5 U* l# F! p6 D- C
3 k5 ~/ ?3 G9 {" u


4 L2 p7 c% ^+ o+ t! |0 K

0 M9 m+ H7 b+ x0 k" u% l# r
. P4 N+ X; ~$ Z% G+ s: O  U6 U2 d
! Y7 Z0 z" L. \. ?3 C8 }9 X

9 h( A+ H8 v1 D' e1 u$ b, [& V

第二步、做菜单条。其实就是复制一下底条，调整长宽和填充。
: j6 N2 V; ~0 b! H6 [# f; @
1 E9 K8 g" x) H5 A: j# Y0 A% j: V
1 V9 Z/ s" _4 T$ b* p



第三步、做菜单条的突出效果。复制菜单条，去掉边框色，调整一下渐变。考虑到还有缺口显示，所以要做长一些，把深颜色加强。

! w3 t, V( z5 B


; x6 B6 ]0 a1 Y, ?( z

& E9 Y; Y6 z! D) j0 C) M) s


* {4 i" w$ w- ?! L
8 ]2 _" l% k, v5 B
& ^' V& `0 u$ P" v+ y; K
. c2 H! L* Y- `: C

4 }  j( o2 l7 C% z" [2 n! W第四步、做菜单条的投影。复制刚做的填充，转180度，调整长宽和渐变。




3 ~8 z# w# L% P, ^$ x1 e( D2 f

第五步，做下面的档条，缺口可以用笔工具来加节点调整，也可以画一个正方形，转45度后冲制，反正方法是多样的。这个的渐变填充比较难一点，大家看一下示意图，并且多调整一下渐变填充的两个节点看效果。
: y! C5 y* o, z  ?$ M' z4 R2 P


; w2 ^- j/ j) c; b4 j: Y/ j( e" @

* `# R( D4 `& E( C0 X4 [! c- }* x: E





/ Q5 k" ?+ M6 l( D
1 h( D, ~5 C; H: ?
0 T2 D" n" s# Y6 f7 d) B
另外，为了加强缺角效果，需要再加一条深色的路径。





. c4 @4 z  B9 R
第六步、就剩下加文字和加分隔条了。
4 l& I( v. }1 h& y2 [8 v" w1 n& `





效果还不错吧?png源文件下载

, Z$ Q% \8 s% Z/ w; {
/ ?5 G6 F) ^; J* `