关于fireworks技术教程：制作雅虎菜单

作者:课课家教育更新于： 2016-08-30 17:02:56

　　每当我们在浏览网页的时候，就肯定会看到过一些菜单，菜单可以说是一个网页的灵魂。那么不知道大家在浏览雅虎网页时候，有没有注意过它的菜单，是不是感觉非常的酷炫？今天小编就为大家介绍一篇fireworks教程：制作雅虎菜单。

　　其实最近，雅虎的这种菜单好象还是挺流行的，不少网站都已经使用起来了。毕竟这个菜单可以节约有限的空间，十分的有价值，在平常的设计中经常要用到。今天有一个Fireworks的初学者，来问小编这种菜单到底应该怎么做，所以小编就顺手做了一下，其实这样的菜单真的不算是复杂，无非就是渐变的填充。只要我们用到fireworks强大的交互式填充工具来制作，那简直是就是手到擒来啊。另外矢量化的修改，也是十分是的方便，所以fireworks真的是非常适合web设计和创作。接下来，小编就为大家介绍雅虎菜单的制作过程吧。

　　制作过程：

　　第一步：制作底条

　　大家在这里要注意的两个部分是：边框的颜色和渐变的设置。如图所示：

　　第二步：制作菜单条

　　其实这里，就是复制一下底条，调整一下长宽和填充。如图所示：

　　第三步：制作突出效果

　　这里说的突出效果，就是制作菜单条的突出效果。复制菜单条，去掉边框的颜色，调整一下渐变。小编考虑到还有缺口的显示，所以要做长一些，把深颜色再加强一点。如图所示：

　　第四步：制作投影

　　我们在这里要制作的是菜单条的投影。我们复制刚刚做的填充，旋转180度，调整一下长宽和渐变。如图所示：

　　第五步：制作档条

　　接着我们就要制作下面的档条，缺口部分我们可以用笔工具来加节点调整，也可以画一个正方形，转45度以后冲制，反正方法还是比较多样的。这个的渐变填充就比较难一点了，大家可以看一下示意图，并且多调整一下渐变填充的两个节点，大家可以看一下得到的效果。如图所示：

　　另外，为了可以加强缺角的效果，那么我们就需要再加多一条深色的路径。如图所示：

　　第六步：增加文字和分隔条

　　教程的最后一步就只剩下增加文字和增加分隔条两个部分了。如图所示：

　　大家觉得效果怎样？效果还不错吧。哈哈。如图所示：

　　小编总结：

　　以上就是fireworks教程的全部内容了，只需要简单的六个步骤，那就可以制作出一个雅虎菜单，是不是非常的简单？如果你也喜欢，那就赶快动手来做一下吧。教程来源于课课家在线学习平台，希望这篇教程大家会喜欢。