用 fireworks 做雅虎菜单

7 ?* b$ [, M! ^; v最近，这种菜单好象很流行，不少网站都有了，这个菜单可以节约有限的空间，很有价值，经常设计中要用到，今天有Fireworks 的初学者，来问怎么做这种菜单，所以顺手做了一下，其实这样的菜单不复杂，无非是渐变的填充，用 fireworks 强大的交互式填充工具来制作，那简直是手到擒来。另外矢量化修改，也很方便，所以 fireworks 非常适合 web 设计创作。
3 h6 F' D+ X: Z* |3 P. o第一步，做底条，注意边框颜色和渐变设置
# d3 W5 S) [7 q0 |

: c' N& }, w" K% A+ X7 t

( c% c, f2 {4 i, P. P. Y) n( m6 C* C

第二步、做菜单条。其实就是复制一下底条，调整长宽和填充。

- X4 I* [- \, R' ^

第三步、做菜单条的突出效果。复制菜单条，去掉边框色，调整一下渐变。考虑到还有缺口显示，所以要做长一些，把深颜色加强。
9 f. w' C# y+ N8 [7 u! N* F* v
3 ?% P, J0 N$ h$ K
' t) P. N8 E1 G


/ r* S) m$ f; q7 C# y
第四步、做菜单条的投影。复制刚做的填充，转180度，调整长宽和渐变。


! ~# G% o$ z4 a3 }; B
5 Y% B- [- z/ @6 m* Z
第五步，做下面的档条，缺口可以用笔工具来加节点调整，也可以画一个正方形，转45度后冲制，反正方法是多样的。这个的渐变填充比较难一点，大家看一下示意图，并且多调整一下渐变填充的两个节点看效果。
( F  H) U0 P" v5 M- n+ a



7 l) V8 _( x% L! o: B7 L+ h& o
$ y5 \) s: Q  w, U3 b: G- J
另外，为了加强缺角效果，需要再加一条深色的路径。
. h9 k3 o" P' j1 x
) m. Y# y0 a4 i) z6 n
0 p& f$ Q' P( l& A
第六步、就剩下加文字和加分隔条了。

  @1 v" [0 g* ^

1 w3 M4 f4 E# b, f& b哈哈。效果还不错。

, c4 |8 ]+ L0 m% k8 E
: p3 j, n( Z, N* D# Q% f, w, Z* T; }
源文件下载