Fireworks基础教程

知识博客专集

Fireworks如何绘制精致打印机图标


  由于工作的原因,前一段时间我开始了图标的设计,从此也喜欢上了做图标。今天用这个fireworks的图标绘制教程和大家交流一下。

先简单说一下思路:我们在画一个东西之前,可以先观察这个物体的结构。比如这个打印机,机体的形状就是一个圆柱的1/4,而这个部分也就是打印机最基本的部分。所以我们先画这个基本的部分,再具体的操作其他细节!

1、用钢笔画出打印机的外壳,加上线形渐变。(也可先画一个矩形,然后再变形)

2、用钢笔画出打印机的侧面,选择黑色的线性渐变。

3、复制第一步的外壳,并调节节点到适当大小,再改变渐变色。

4、复制上一步,并调节节点到适当大小,再改变渐变色(灰色)。

5、画两个矩形,一个小的用纯黑色,用来做送纸口;大的用灰色渐变用来做送纸口的托盘,然后再复制一个并加深颜色,向左移动两个像素。

7、画两个矩形,变形使之有些卷曲的感觉;在接近入口和出口的地方加渐变。

8、画一个黑色的矩形,变形并使之处于最底层。

9、用钢笔画条曲线,并加模糊处理,放在打印机的接缝处;再画两个放射渐变的圆做按钮。

10、最后写上字,摆在打印机正面就完成了

Fireworks CS3如何制作蒙版


这是即将出版的fireworks cs3经典教程的部分章节,看到有些朋友对蒙版的概述还不是很清楚,所以放上来供大家学习借鉴,请多支持,谢谢!

fireworks cs3中蒙版的应用

很多人在学习蒙版的时候会有困惑,不知道蒙版是做什么的,总是觉得蒙版的概念很深奥,不好理解。其实在学习蒙版之前,我们需要首先来了解蒙版都能做什么,知道蒙版的作用以后,再来学习如何创建蒙版就不会觉得那么难以理解了。

一、蒙版概述

简单来说,蒙版的作用就是实现透过某个形状看另外一个图形的效果。如图5-62所示。

除了能够把图像显示在任何一种形状内以外,蒙版还能够制作图像渐隐效果,如图5-63所示。

图像渐隐效果是指图像由清晰到透明的一种过度效果,过度的形式有很多,上面这张图像是图像由右到左的逐渐变透明,在网页设计中经常可以使用图像渐隐效果,使图像逐渐过度到网页的底色上,如图5-64所示。

二、fireworks cs3的蒙版属性

在fireworks cs3中创建蒙版之后,【图】面板中的图层会变成两个缩略图,左侧的缩略图为被蒙对象,右侧的缩略图为蒙版,如图5-65所示。

选中右侧的蒙版缩略图之后,在【属性】面板中会显示蒙版的属性,如图5-66所示。

1. 路径轮廓蒙版

这种类型的蒙版可以透过路径轮廓清楚的看到被蒙对象,而且跟矢量路径的颜色没有任何的关系,也就是说作为蒙版的路径不管填充了什么颜色,蒙版效果仍旧是非常清晰的。如果选中了“显示填充和笔触”那么可以显示蒙版的边缘路径效果,如图5-67所示。

2. 灰度外观蒙版

这种类型蒙版也是透过路径看到被蒙对象,但是看到被蒙对象的清晰度就会受到路径的填充色和描边色的深浅影响,这种类型蒙版的填充色和描边颜色都为灰度图,如果蒙版的颜色为白色,则蒙版下的图像能够清晰显示。如果蒙版的填充颜色为黑色,则蒙版下的图像则完全透明。如果蒙版的填充颜色为中间的灰色,则蒙版下的图像将以半透明装显示。填充下边的边缘属性中可以设置边缘羽化。

利用灰度外观蒙版受填充色深浅的影响,我们可以轻松实现图像渐隐效果,其原理就是给用来蒙版的矢量路径填充由黑色到白色的渐变色,这样蒙版后黑色的一边将为透明,白色的一边为清晰的效果,从而实现图像渐隐的效果,如图5-63所示。

三、 在fireworks cs3中创建蒙版

在fireworks cs3中创建蒙版的很多,但是最终的目的只不过是生成蒙版,所以基本上记住一两种生成蒙版的方法,重点掌握蒙版的属性就足够了,另外再了解蒙版的删除禁用和启用就可以了。

粘贴于内部

使用粘贴于内部命令是fireworks cs3中最简单的创建蒙版的方法,需要注意的是,粘贴于内部创建的蒙版默认是路径轮廓蒙版,所以和作为蒙版的路径颜色无关,下面通过一个具体的实例来给大家进行介绍,具体的操作步骤如下:

1. 新建一个fireworks文件。

2. 在弹出的【新建文档】对话框中设置画布的宽度为“350”像素、高度为“250”像素,背景颜色为白色。如图5-69所示。

3. 把准备好的手机图像素材复制到创建的画布中,并且调整好大小和位置,如图5-70所示。

4. 使用【椭圆】工具,在画布的右侧绘制一个正圆,这个正圆要比画布大很多,如图5-71所示。

5. 打开准备好的素材图像,由于准备的素材图像尺寸大于我们的目标尺寸,所以需要选择【修改】@@【画布】中的【图像大小】命令来缩小图像素材,以适应我们的需求,如图5-72所示。

6. 选中缩小后的图像素材,选择【编辑】菜单下的【复制】命令,然后选中刚刚绘制的正圆,选择【编辑】菜单下的【粘贴于内部】(快捷键为:【ctrl shift v】)命令,这样就可以把图像素材显示在正圆中了,如图5-73所示。

7. 这时图像素材虽然显示到了正圆的内部,但是并不是我们所需要的位置,如果直接使用【指针】工具拖拽的话,是正圆和内部的图像一起移动,如果我们只需要调整正圆内部图像素材的位置,而不希望改变正圆的位置,可以点击【层】面板中的关联图标,取消图像和蒙版之间的关联,这样就可以任意调整图像素材的位置,而不改变正圆的位置了,如图5-74所示。

8. 位置调整完毕后,可以把蒙版中图像和正圆的关联继续关联起来,整个图像效果就制作完毕了,最终效果如图5-75所示。

通过掌握【粘贴于内部】命令,我们可以把任何一张图像素材显示到任意一个形状中去。

组合为蒙版

使用组合为蒙版,同样可以创建蒙版效果,需要注意的是,组合围蒙版默认创建的是灰度外观的蒙版。下面通过一个简单的实例来给大家进行说明,具体操作步骤如下:

1. 新建一个fireworks文件。

2. 打开准备好的图像素材,如图5-76所示。

3. 复制另外一张鱼类图像素材到画布中来,并且调整好大小尺寸,如图5-77所示。

4. 使用【矩形】工具,在绘制一个和画布一样尺寸的矩形,并且填充线性渐变色。设置渐变色的方向为垂直方向,最上方填充白色,最下方填充黑色,如图5-78所示。

5. 同时选中鱼类的图像素材和这个矩形,选择【修改】@@【蒙版】@@【组合为蒙版】命令,得到的效果如图5-79所示。

6. 在【层】面板中选择右侧的矩形蒙版,调整渐变色的范围,适当增加黑色部分所占的面积,这样可以让蒙版下方的透明部分增加,最终得到的效果如图5-80所示。

在【层】面板中创建蒙版

使用【层】面板,同样可以创建蒙版,这种创建的方式和photoshop中创建蒙版的方式一样,具体操作步骤如下:

1. 打开一张图像素材,如图5-81所示。

2. 点击【层】面板下方的【添加蒙版】按钮,fireworks cs3会自动给这张图像添加一个白色位图蒙版,如图5-82所示。

3. 使用【刷子】工具,设置路径颜色为黑色,在图像素材中的窗户部分涂抹,这样所有涂抹的地方都会变透明,如图5-83所示。

4. 这时可以导入另外一张素材图像,放置到当前图像的下方,最终完成效果如图5-84所示。

四、禁用蒙版

如果觉得前面制作的蒙版效果不尽如人意,能不能不要这个蒙版了呢?当然是可以的,fireworks cs3也提供了很多种取消蒙版效果的方法,下面来给大家介绍一下常用的一些命令。

1. 取消组合

【取消组合】是我们取消蒙版效果最常用的一个命令,选择【修改】@@【取消组合】(快捷键为:【ctrl shift g】)命令,就可以把蒙版还原到图像和蒙版图形分层的效果,相当于恢复到了组合为蒙板之前的状态,即两个对象都是独立存在的。

【提示】在图层面板中,选中蒙板图标并像移动图层那样按住蒙板图标将其移动到其他位置,这样也可以删除蒙板,并且保留下了蒙板对象。

2. 禁用蒙版和启用蒙版

选择【修改】@@【蒙板】@@【禁用蒙板】命令选即可临时去掉蒙板效果。选择选择【修改】@@【蒙板】@@【蒙板】命令可以再次启用已经禁用的蒙板。选择【修改】@@【蒙板】@@【删除蒙板】命令可以永久的删除蒙板。

Fireworks怎样制作水平或垂直的彩条背景


  fireworks制作彩条背景_天极软件
  图示:制作好的颜色条效果

  fireworks制作彩条背景_天极软件
  图示:添加花朵前景

  具体的制作方法如下:

  1、启动fireworks,新建一个画布,尺寸任意。

  2、使用【矩形】工具,在画布中绘制一个和画布同意尺寸的矩形,并且填充线性渐变色,颜色为白色过度到任意色彩,效果如下图所示。

  fireworks制作彩条背景_天极软件
  图示:给矩形添加线性渐变色

  3、切换到【两幅】的预览窗口,打开fireworks的【优化】面板,在【优化】面板中选择格式为“gif”,【索引色调色板】为“最合适”,【颜色】可以选择“16”或“8”,这里选择的是“8”,效果如下图所示。

  fireworks制作彩条背景_天极软件
  图示:对图像进行优化

  4、和上面的做法一样,按键盘上的【print screen】键截屏,然后在fireworks中创建一个新的画布,按快捷键【ctrl v】,把截取的屏幕图像粘贴到画布中,如下图所示。

  fireworks制作彩条背景_天极软件
  图示:复制截取的屏幕图像

  5、使用【裁剪】工具裁剪需要的部分,然后在【属性】面板中添加2到3次【锐化】滤镜即可。

  6、如果需要不同颜色的效果,可以直接使用【色相/饱和度】滤镜来进行调整,不需要重新制作。

Fireworks“外发光”特效的另类妙用


 fireworks软件的“外发光”是常用的一种特效,如果灵活运用可以解决不少平面设计中的小问题。
  一、用fireworks“外发光”特效消除图像边缘锯齿

fireworks“外发光”特效的另类妙用 贵州新华电脑学院 贵州新华电脑学校

  二、用fireworks“外发光”特效为文字描边

fireworks“外发光”特效的另类妙用 贵州新华电脑学院 贵州新华电脑学校

  三、用fireworks“外发光”特效羽化图像

fireworks“外发光”特效的另类妙用 贵州新华电脑学院 贵州新华电脑学校

  四、用fireworks“外发光”特效表现水晶按钮的底光效果
fireworks“外发光”特效的另类妙用 贵州新华电脑学院 贵州新华电脑学校

在Fireworks4中制作弹出菜单全过程技巧大揭密-2


二、 在Fireworks4中如何制作弹出菜单

  5、接下来进入的向导窗口是用来定义弹出菜单的外观及文字属性的。

  如下图所示,我们将在这个窗口中定义弹出菜单的外观和文字属性,这个窗口有下面这几部分组成。

  (1) Cell选项:该选项用来定义将来输出的弹出菜单格式,有两种格式可以选择,一种是HTML表格形式的,另一种是图片形式的。需要说明的是,很多人以为使用图形格式的弹出菜单将比使用HTML格式的弹出菜单载入速度要慢许多,其实不然,不论您的图形格式的弹出菜单有多么复杂,Fireworks仅仅使用两个图片来定义它们:一个是Up状态,一个是Over状态,所以您可以根据您的实际情况挑选自己满意的弹出菜单格式。

  (2) Font选项:用来指定文字的字体格式的,我们可以从字体下拉列表中选择我们需要的字体,此时我们会发现可选的字体种类非常少。这主要是因为我们输出的弹出菜单中的文本,不管您选择的弹出菜单是图形形式还是HTML表格形式,其实文字都是纯文本格式,我们必须考虑大多数浏览者的系统中都有的字体,以使弹出菜单的内容在大多数人的机器上都能正常显示。值得注意的是,如果想在弹出菜单中使用中文字体,您只能选择最后一项(Georgia,Times New Roman,Times,serif)。

  (3) Size选项:用来定义弹出菜单中的文字大小,默认的为12象素。您可以从其下拉列表中选择合适的字体大小或是自己根据需要在输入框中输入一个字体大小数值。

  (4) “B”按钮、“I”按钮分别用来设定弹出菜单中应用字体的粗体和斜体。

  (5) Up State和Over State选项根据选择的菜单输出类型不同而存在不同的选项,分别对应HTML和图形的不同外观。

  在HTML样式中,左边是Up状态时的菜单外观(既菜单默认的显示状态),右边是Over状态时的菜单外观(鼠标通过时的菜单外观)。我们分别可以定义两种状态下文字和单元格的色彩。

  在Image样式中时,唯一不同的一点就是我们可定义菜单图片的样式,Fireworks内置了几种样式,除此外我们还可以定制自己的样式,并将它应用到我们的菜单上,通过定制菜单样式,我们可以实现更为个性化的菜单,稍候我们将介绍详细的内容。

  (6) Preview选项:从该选项窗口中我们可以观察到定义的弹出菜单的外观和文字属性。

  (7) 根据需要选定合适的弹出菜单显示样式及文字颜色和单元格颜色,点击Finish按钮完成弹出菜单的制作过程。


二、 在Fireworks4中如何制作弹出菜单

  6、 返回到弹出菜单页面,您可能会惊奇的发现,什么也没出现,我们看不到做好的弹出菜单,仅仅能看到一级弹出菜单的外框图,这是因为由Fireworks4制作的弹出菜单只能在浏览器中查看到最终的效果,如果您等不及想看最终的结果按F12键就能在浏览器中看到效果了。

  7、 将鼠标移动到弹出菜单的位置时,鼠标会变为小手的形状,您可以拖动弹出菜单到任意位置。当您取消对该带有弹出菜单行为的切片选择时,弹出菜单会隐藏,再次选择此切片时,弹出菜单会再次显示。

  8、 如果您对弹出菜单中的内容感觉不满意想再次修改菜单的内容或格式,您可以选中该切片后双击弹出菜单轮廓图,或者打开行为(Behavior)面板,双击POP-Up属性,此时弹出菜单制作向导窗口会再次出现,您可以反复多次修改,直到满意为止。

  9、 至此在Fireworks4中所能做的弹出菜单的工作算是全部完工了,使用菜单命令File→Export选择一个站点文件夹进行输出,具体的我们分HTML表格形式和图像形式在定制弹出菜单文件中介绍。

三、 如何在Dreamweaver中修改弹出菜单的外观及定位

  如果在Fireworks4中您选择的弹出菜单的样式是HTML表格形式,那么输出的站点文件夹中就只会有这么几个图片:arrows.gif图片和菜单本身的图片。此外就是一个HTML文件和一个控制弹出菜单的JS文件。

  在Dreamweaver中打开该HTML文件,切换至Show Code Views模式,此时您看到的将是代码模式的网页文件。Copy了其中一段来进行说明:

  \”window.fw_menu_0_1 = new Menu(\”艺术字效果\”,110,19,\”Georgia, Times New Roman, Times, serif\”,12, \”#cccccc\”, \”#ffffff\”,\”#006699\”,\”#009ce8\”);\”

  这一段讲的是菜单项\”艺术字效果\”所引出的子菜单的格式,\”110\”和\”19\”是指该弹出菜单的宽度,你可以根据实际需要对该值进行修改;\”Georgia, Times New Roman, Times, serif\”是刚才在Fireworks4的向导窗口中选定的字体格式;\”12\”是指字体尺寸大小;\”#cccccc\”,\”#ffffff\”,\”#006699\”,\”#009ce8\”这些颜色值分别代表的是默认的弹出菜单的文字颜色、当鼠标移到弹出菜单上时文字的颜色、默认的弹出菜单的背景颜色、当鼠标移到弹出菜单上时背景的颜色。所有的这些值您都可以根据需要进行修改,然后保存一下就能在浏览器中看到修改后的效果。

  弹出菜单中的同级菜单的设置标准都是相同的,不同级菜单却可以有不同的外观设置,例如本例?quot;艺术字效果\”和\”动态字效果\”算是同级菜单,而\”卡通艺术字\”、\”变形艺术字\”和\”卷边艺术字\”也是同级菜单。\”艺术字效果\”这一级的菜单和\”卡通艺术字\”这一级菜单可以有完全不同的外观设置及文字属性设置,只要您设计得好,五颜六色的弹出菜单有什么不好吗?这些在Fireworks4中是不能简单地定义的。

  改变弹出菜单的定位。当我们将Fireworks4中输出的弹出菜单插入HTML文档预览时,我们常发现它并不象我们期望的那样出现在指定位置,特别是当插入的位置不是紧靠左和顶端的位置时,情况会显得更加糟糕。其实Fireworks4在输出弹出菜单文件时,会同时生成一个javascript文件,并定义一个CSS层,Jvascript代码赋予这个层一个绝对定位,这是为了确保弹出菜单和它的子菜单总是出现在同一个固定位置。但当触发弹出菜单的按钮被移动到其他位置时,由于层是绝对定位的,因此这个弹出菜单就会出现在错误的位置。

  解决这个问题需要我们修改在Dreamweaver中插入的这个弹出菜单的javascript代码。

  下图指出了弹出菜单的定位和相关代码的对应关系:

  首先我们需要选中触发弹出菜单的按钮,然后打开Dreamweaver中的Show Code Views窗口,相关的代码会高亮显示,在此代码中寻找下面的一句:

  \”window.FW_showMenu(window.fw_menu_#,#,#)\”

  最后两个数字就是弹出菜单定位点的左边和顶部的坐标绝对位置,将这两个数字修改为您期望的值就可以了。

  如果在Fireworks4中您选择的弹出菜单的样式是图片形式,那么输出的站点文件夹中就会多这么二个图片fwmenu1_114×26_over.gif、fwmenu1_114×26_up.gif,该图片是以尺寸大小来命名的。而且它在Fireworks4的弹出菜单文件输出时会根据选择的字体的大小来自动调节本身的尺寸。这两个图片是弹出菜单选项的两个不同状态,它在整个弹出菜单中都存在。还有一个arrows.gif文件,该文件是弹出菜单中指示下级菜单存在的箭头。

  我们可以将这三个文件都在Fireworks软件中打开,修改为我们所需要的样式,再将它们按原名覆盖回去。值得注意的是,Fireworks输出的菜单上的文字是真正的文本格式,我们不需要每个菜单项都有Up和Over两个状态的图片,fw_menu.js文件只是在重复利用上面的两个图片作为菜单项的背景图片。

在Fireworks4中制作弹出菜单全过程技巧大揭密-1


一、 弹出菜单介绍

  随着动态交互式网页制作技术的发展,目前有很多网站都采用了一种弹出菜单的技术来实现网站的导航效果,例如微软及Macromedia的网站。在以前这都必须是具有专业的网页编程技术人员花费一定时间才能制作出来的效果,如今在Macromedia Fireworks4.0版本中能够轻松地制作了。弹出菜单的制作是Fireworks4中新增的一项强大的功能,利用它我们可以制作出常见的弹出菜单效果,甚至不需要花一点点的&106avascript编程技术。看来Macromedia Fireworks已经不满足于单纯的网页设计而是逐渐向丰富多彩的交互式网页设计制作靠拢了。

  何谓弹出菜单技术呢?或许有些人会这样问。所谓的弹出菜单通常是在Web页中由鼠标来触发的一种菜单导航效果,当鼠标移动到导航菜单上触发条件满足,就会显示出弹出菜单。当鼠标从导航菜单上移开,弹出菜单自动消失。触发条件既可以是鼠标通过(On Mouse Over),也可以是鼠标单击(On Click),这种结构的菜单使我们能更加灵活的组织我们的菜单结构,而且下载时间又比较迅速。弹出菜单结构非常类似于一个表格,每一个导航菜单条目就好 比一个单元格。当然,Fireworks4中提供了四种鼠标动作,还有两种是鼠标移出(On Mouse Out)和页面加载(On Load),但显然他们不适合用在这里,因为这和通常浏览者的浏览习惯不符合。

二、 在Fireworks4中如何制作弹出菜单

  看了上面的介绍,或许有很多人想知道该如何在Fireworks4中来制作这个看似高难度其实非常简单的效果呢,这部分我们就通过实例来讲解在Fireworks4中如何制作弹出菜单的基本制作过程。

  1、首先我们先来制作一个带有三个选项的菜单导航条,并为每个选项增加切片对象。Fireworks4的弹出菜单行为与其他行为一样,只能应用在按钮对象、切片对象或是热区对象上。(注:在Fireworks4中按钮对象上会自动添加切片对象,因此可以直接在按钮对象上使用各种行为。)

  2、为菜单导航条增加弹出菜单行为,首先必须选中一个按钮上的切片,有三种方法请选择其一:
  (1) 打开Behaviors面版,点击\” \”按钮添加弹出菜单行为命令Set Pop-Up Menu
  (2) 使用菜单命令Insert>Pop-Up Menu
  (3) 单击鼠标右健,在弹出的命令列表中选择Add Pop-up Menu命令

  3、选择了增加弹出菜单命令后,Fireworks4会出现弹出菜单制作向导窗口,您可以根据弹出菜单制作向导一步步地执行下去,其实过程非常的简单,仅仅只有二个步骤。

二、 在Fireworks4中如何制作弹出菜单

  4、首先出现的一个向导窗口是用来增加弹出菜单中的子菜单选项和为子菜单添加相关属性的。如下图所示:

  下面我来解释一下各个选项的作用:

  (1) Menu选项:其右边有“ ”、“-”二个按钮,根据Fireworks软件应用习惯,这二个按钮是用来添加或删除一个菜单选项时起作用的。

  (2) Text选项:定义菜单选项的内容

  (3) Target选项:用来选择点击菜单选项链接时打开的窗口位置,其选项和Dreamweaver之类的网页制作软件的链接选项内容一样,这儿不再介绍。

  (4) Link选项:用来设置菜单选项的链接属性

  (5) 这两个按钮可以控制子菜单的显示层次,点击右边的按钮可以使菜单项缩为下一级,点击左边的按钮可以使下一级菜单项向上升一级,这二个按钮不是随时随地都能使用的,而是会根据实际情况让您进行使用。利用这二个按钮可以方便的制作出多级弹出菜单。

  (6) 如果您改变了某一条菜单项中的Text选项、Target选项或是Link选项中的一些值,可以点击Change按钮确定改变。

  向导窗口下面的大窗口表格中显示的是弹出菜单的结构,您定义的弹出菜单的各级内容都显示在这里。在本例中我定义了艺术字效果和动态字效果这二个菜单,在艺术字效果菜单中另外还分为卡通艺术字、变形艺术字、卷边艺术字这三个子菜单,在动态字效果菜单中也有其子菜单。您可以通过点击Menu 选项中的\” \”按钮来增加菜单项,并分别设定它的链接地址和目标窗口;通过\”-\”按钮来删除选定的菜单项;您还可以选定一个菜单项后,修改已经填好的一些选项值,然后单击Change按钮改变它;您也可以选中一个菜单条目后上下拖动它到一个新的位置,以改变菜单的排序。当您将一个菜单项缩进时,它就自动变为下级子菜单。

  菜单结构设定好后就,点击Next按钮进入下一步向导窗口。

在 Fireworks 4 中作抽线图


  我们要制作图像的抽线图效果,一般首先考虑使用Photoshop制作,现在我们介绍如何在Fireworks 4中制作这种效果。请看原图:

  打开图像,用矩形工具画一个与图像同样大小的矩形。
  打开fill(填充)面板,选择solid(基本色),取黑色,texture(纹理)为line-horiz4,纹理总量100%,勾选下面的transparent(透明)。

  在层面板上将对象的混合模式改为multiply(色彩增埴)。

  降低透明度。效果图:

用FireWorks做铬金图形效果制作


  很多朋友可能在使用PS来进行图形处理的过程中会进行一些铬金特效的制作,在FW中直接对图形进行铬金特效的制作是不现实的,即使你已经安装了完整的Eye Candy 4000的滤镜,但是换一种思路来思考问题的话,我们发现有些不可能也变成了可能,本节教程我们就来学习如何使用FW来制作铬金图形特效,首先还是先来看下图所示已经制作完成的效果图。





【制作步骤】

  1、按“Ctrl R”组合键导入需要进行图形特效处理的图片,本例导入图片如下图所示,



  [注意]为了便于随后操作步骤的讲解,大家可以直接在图片上右击,将“图片另存为”到本地机器上,来进行和本例相同的图形处理操作。

  2、在编辑区上绘制一个矩形对象,为了便于理解,矩形略小于位图对象,此处使用的填充颜色为白色,此刻编辑区的图形效果会如下图所示。



  3、选中白色矩形对象,选择属性面板上效果菜单中的“Eye Candy 4000|Chrome”效果命令,在弹出的 “Chrome”效果设置窗口中进行设定。“Reflection Map”选项使用默认的“Outdoor.tif”不作调整;Bevel Width的数值设定要做到使得整个矩形对象都实现了滤镜的效果,不留一点儿原来的颜色,所以要尽量大些;Ripple Width的数值可以设置的小些,这样界面的起伏感会更强烈些。具体的参数设置可以参看下图所示。


  4、经过设定后,编辑区的对象会如下图所示。



  5、关键的一步,也是产生最终效果的最后一步。选中位图对象,按“Ctrl X”组合键,选中应用滤镜特效的矩形对象,选择菜单命令 “修改|蒙版|粘贴为蒙版”,出现如下图所示的铬金图形效果。



  对整体图形还可以做一些其他方面的效果处理,比如对其作添加投影效果操作,最终效果如下图所示。



  [提示]为了使的最终完成的效果更为突出,在挑选需要进行铬金效果处理的位图对象时需要注意,尽量选择一些图像色彩丰富的图片来进行处理,对于使用单一色系或者通篇为相近色系的图像进行本节的操作话,最终效果不是很理想的。这点希望大家注意。


  好了,有关铬金图形效果制作的内容就全部讲解完毕,配合其他的滤镜还有蒙版命令的操作,不知道还能制作出多少漂亮的效果来!加油啊!

用Fireworks做出苹果的晶亮透明


??? 苹果的导航(下图)总体的感觉是清淡的色彩配上透明的效果。其实这种效果在Fireworks(看多了在PS里的长篇大论)里简简单单,远没有想象的那么复杂。用的技术也是最简单的:渐变填充,层的透明度调节,简单效果(effect)。我们就是要用最简单的技术做出最好的效果 。好的,开始做了,注意听讲。?

??? 1.首先画一个圆角矩形,用渐变填充,效果如图:


??? 2.做出导航按钮的高光,这是点睛之笔,一般在这一步效果就出来了。有两种方实现:一个用效果(effect)的内阴影(Inner Shadow)参数和最终效果如图:
?

??? 另一个是做一个高光的shape,将这个shape的层透明度调成30,参数和最终效果如图:


??? 大体的原理弄懂了,我们再看看其他的按钮就觉得很好做了。换换颜色,形状可以做出太多的效果,正所谓一通百通了。下面是一些例子:



用Fireworks制作环绕文字


在网页制作过程中,我们常需要制作环绕路径的文字.而制作它在FW中是非常轻松就可以实现的。如在Flash使用的运动的环绕文字就可以采用在FW中做出效果再导入到FLASH中。因为FW与FLASH同是MacROMEDIA的产品,因此FLASH非常支持FW中制作的图形。

1.File–>New建立一个工作区。

2.用shift 鼠标左键在工作区画出一个正圆。
如果此时圆内填充有颜色,请选择Fill面板中的none和stroke面板中none.使圆成为空心和边缘无色。
当鼠标在空白处点击后将看不到圆,但它是实际存在的.鼠标滑过时会显现红色,此时点击会成为蓝色,表示选中目标。

3.用Text工具在工作区任意处点击一下,会出现Text Editor面板,这时输入你要加入的文字,设置好间距,颜色,大小等,点击Apply,再点击OK。

4.此时在工作区只见文字.按住shift不放,用鼠标左键点击文字区,再点击隐藏的圆.同时选取二者,选择Text–>Attach to Path(附加到路径)。就成为环绕路径的文字. 如果此环绕的范围和别的效果不够好,可以再次编辑文字.双击文字,会出现Text Editor。

此时只可以改变文字的设置却不能更改圆的设置.如果需要更改圆,选中文字(此时文字与圆已经合二为一,所以无法对圆进行修改),可以使用Text–>Detach from Path,就可以分离文字和圆。那么分离以后就可以对圆进行修改了,如填充颜色,加边线等及其它各种效果,完成后再次使用Attach to Path命令。
我们可以在任意路径中使用Attach to Path命令.结合其它命令做出很多效果。



Powered By wordpress Copyright Fireworks基础教程 © 2009-2012 版权所有