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

  最近这种菜单好象很流行,不少网站都有了。这个菜单好处在于可以节约有限的空间,很有价值,会经常在设计中用到,

  其实这样的网页菜单并不复杂,无非是渐变的填充,用Fireworks 强大的交互式填充工具来制作,那简直是手到擒来,即使是Fireworks 的初学者也能顺利掌握。另外这种矢量图修改起来也很方便,所以 fireworks 非常适合 web 设计创作。


  第一步,做底条,注意边框颜色和渐变设置


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


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


  第四步、做菜单条的投影。复制刚做的填充,转180度,调整长宽和渐变。


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


  另外,为了加强缺角效果,需要再加一条深色的路径。


  第六步、就剩下加文字和加分隔条了。


  效果还不错吧?

时间: 2024-08-31 18:54:34

Fireworks交互式填充绘精致网页导航菜单的相关文章

PS制作iphone风格网页导航菜单教程

教程学习如何用Photoshop打造专属于你自己的iphone风格导航菜单,主要用到了图层样式来完成的,下面让我们一起来学习吧.         三联推荐:photoshop7.0迷你版免费下载    |  Photoshop CS5 中文免费下载  |  photoshop免费下载 先看效果图. 新建文档450x450像素,背景填充#32363c,新建图层画一个白色矩形. 把不透明度改为6%,类似下图效果. 新建图层,前景色#5b6573在顶部再画一个矩形. 分类: PS入门教程

js 网页导航菜单效果

首 页 综合特效 菜单特效 文本操作 图形特效 图形特效 状态栏类 时间日期 按钮特效

用CSS制作的很不错的简洁的网页导航下拉菜单

用CSS和javascript制作的非常简洁的网页导航菜单,而且还具有下拉的功能啊!呵呵 <style type="text/css">/*Credits: Dynamic Drive CSS Library *//*URL: <a href="http://www.dynamicdrive.com/style/" target="_blank">http://www.dynamicdrive.com/style/<

点靓网页的10种导航菜单设计

  网页导航菜单设计关系到你的网站整体设计成败,所以不少优秀的网站设计通过颜色.排版.形状和一些图片的精心修饰来帮助网站创造更好的视觉效果,我们从设计师们的收集中精选了这些从极简到拥有众多细节的不同设计,它们都符合所属网站的设计风格. 此网页的导航菜单设计重在让用户专注于惊艳的摄影作品,所以采用了大量的白色空间. 这也是一个极简设计,但加了一些细节.顶部文字全部采用大写,而小号的字体与渐变灰的渲染让它们显得简单优雅,此外,下方页面设计为导航菜单占比的两倍,弱化了导航菜单的展示. CHEF-S 网

Photoshop教程:打造实用网页导航

Photoshop设计教程:打造实用的网页导航菜单. 话不多说来看一下效果图是什么样的. 1.打开PS新建一个新文档,尺寸大小由你的网站规格决定.并填充背景#1a1a1a.(木木:在这一步你可以新建一个图层,这样好方便你以后的修改.) 2.双击该图层,弹出图层样式,选择颜色渐变.并设置如下: 3.为了增强效果,添加内阴影. 4.新建一个图层,并便用矩形选区工具,在导航上画出一个矩形大小约有原来的一半.填充#FFFFFF.透明度40%,更改混合模式:叠加. 5.现在来做一个光标滑过的效果.用矩形工

div+css实现仿猪八戒首页导航菜单效果

本文实例讲述了div+css实现仿猪八戒首页导航菜单效果.分享给大家供大家参考.具体如下: 这是一款仿猪八戒2010年首页的网页导航菜单,蓝色风格,非常漂亮大气.简洁专业,在此推荐给大家.菜单上有一个标记,指引当前的位置,也是本菜单的亮点.用CSS究竟是如何实现的呢?那么就请一起看代码吧. 先来看看运行效果截图: 具体代码如下: 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h

CSS网页布局入门教程:纵向导航菜单

核心提示:纵向导航菜单也是网站应用中的一种重要形式,所谓纵向导航菜单是指放置在网页左侧或右侧的从上至下排列的一种导航形式.先看一下效果吧! 纵向导航菜单也是网站应用中的一种重要形式,所谓纵向导航菜单是指放置在网页左侧或右侧的从上至下排列的一种导航形式.先看一下效果吧!  如图所示的效果,我们先看一下代码结构: <div id="nav">    <h1>CSS</h1>        <h2><a href="#"

Fireworks打造标签式网页导航条

现在标签式网页导航条效果在很多大网站都非常常见,本文告诉您如何使用fireworks打造此类标签式导航条效果.首先让我们来看下最后的效果: 1.打开FW 8.0 (笔者使用的是8.0版,当然其它版本也是可以的了) 2.新建一个稳当大小760X400 3.用矩形工具画一个渐变的矩形,这里这个矩形是要做为导航条的背景,所以你可以调配自己喜欢的颜色. 4.然后用直线工具画两条线:见下图,做为分隔线来用. 5.然后按住Shift+G把这两条线组合成对象,复制这个对象,从窗口对齐面板最后见下图: 6.下来

在网页中设计导航菜单的三个原则

  导航菜单可能是网页设计中最重要的部分了.每个用户浏览网站时一定有所需,因此导航菜单能够帮助用户寻找信息.好的导航菜单像是导游,告诉用户网站是干什么的,内容分类有哪些,在哪里可以找到什么信息. 而且导航栏也是整体布局的重要组成. 总结一下,导航栏的重要性. 1. 浏览完Logo后,导航栏是用户第一个看到的组件. 2. 导航栏的作用是引导用户. 3. 导航栏的作用也类似于索引,快速帮助用户找到所需信息. 想让导航栏更加优雅.美丽.响应式么?看看导航栏设计的三大要点吧! 1) 别再让导航胖下去了,