下载安卓APP箭头
箭头给我发消息

客服QQ:3315713922

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

作者:课课家教育     来源: http://www.kokojia.com点击数:704发布时间: 2016-08-31 11:00:52

标签: 渐变填充fireworks工具栏

想学设计?来看看大师是如何完成作品的?

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

关于fireworks技术教程:制作雅虎菜单_渐变填充_fireworks_工具栏_课课家

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

  制作过程:

  第一步:制作底条

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

制作底条

  第二步:制作菜单条

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

制作菜单条

  第三步:制作突出效果

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

制作突出效果

  第四步:制作投影

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

制作投影

  第五步:制作档条

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

制作档条

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

加多一条深色的路径

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

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

增加文字和分隔条

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

效果

  小编总结:

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

赞(0)
踩(0)
分享到:
华为认证网络工程师 HCIE直播课视频教程