瑞星卡卡安全论坛

首页 » 技术交流区 » 系统软件 » Fireworks基础教程
流浪●剑尊 - 2010-5-23 17:52:00

Fireworks基础教程



用户系统信息:Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; Trident/4.0; SLCC1; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; TheWorld)
流浪●剑尊 - 2010-5-23 17:52:00
Fireworks基础教程(六)
“路径切割”工具:该工具用于切割类如钢笔路径这样的矢量路径。使用时从要切割处按住鼠标左键移动划过。在切割处会增加一个控制点。使用“细部”工具移动一端就可以把线段分开了,如图2—39。

图2—39

   “路径洗刷”工具:“路径洗刷”工具只能用在具有压力感应刷子描边的路径上。使用时通过在要修改的路径上不断变化的压力或速度来更改路径的笔触属性。这些属性包括路径原有的笔触大小、角度、墨量、离散、色相、亮度和饱和度。使用“笔触选项”对话框的“敏感度”选项卡可以指定这些属性中的哪个属性受到“路径洗刷”工具的影响。还可以指定影响这些属性的压力和速度的数量。

8、形状工具
  形状工具又被分为“基本形状”和“自动形状”,如图2—40。

图2—40

  基本形状:有矩形、椭圆形和多边形这些简单的几何图形。使用时只需在画布上用鼠标进行拖拽即可画出相应的图形。如图图2—41。

图2—41

 当按住Shift键不放的时候可以画出正方形和圆形,在各形状工具的属性框中都可以方便的为这些图形选择不同的填充模式加以填充。通过颜色的调节手柄可以自由的控制色的填充方向及范围。
  在矩形工具属性框的“矩形圆度”中输入不同的数值,可以画出程度不一的圆角矩形。
  在使用“多边形”工具时,可以在该属性框内先设置好多边形的形状、边数及角度,然后再进行图形绘制。
  自动形状:这是一组智能的矢量绘图工具,这些对象组遵循特殊的规则以简化常用可视化元素的创建和编辑。和基本形状工具组不同,选定的“自动形状”除了有色彩填充手柄外,还具有菱形的控制点。每个控制点都与形状的某个特定变形属性相关联。通过拖动控制点可以改变与其关联的变形属性。大多数“自动形状”控制点都带有工具提示,描述它们会如何影响"自动形状"。将指针移到一个控制点上可看到描述该控制点控制的属性的工具提示,如图2—44。


图2—42

 此外,在组合面板中的“形状”面板下还有一组图形较为复杂的智能形状工具。如图2—43。


图2—43

  将这些对象用鼠标直接拖拽至画布内后,同样是通过调节对象上的每个菱形控制点即可改变对象相关属性。如图2—44。


图2—44


和许多矢量编辑软件一样,在Fireworks中绘制的矢量对象比位图对象的可修改性强很多。因此在进行无素材制图时,更多时候是制作成矢量图形,以方便随时保存,随时编辑。而对象的编辑则包括对对象的选取、移动、填充、旋转和变形等等。

  1、改变路径
  简化路径:为了使一条不规则的矢量路径变得更加的精简、圆滑,我们可以用简化路径的方法来减少它的路径节点。如图所示为一条不规则的路径。


图3—01

  选中该路径后点击菜单栏上的“修改—改变路径—简化”命令,如图3—02。


图3—02

  在“数量”栏中输入相应数值来设置要简化的程度。下图为输入25后的路径简化效果。


图3—03

  扩张路径:点击菜单栏上的“修改—改变路径—扩展笔触”命令可以对任意路径进行加宽。如图3—04。


图3—04

  宽度——设置路径的宽度;
  角——当路径是曲线时,可以在此选择转角的样式;
  尖角限量——用于限制曲线路径的锐角数量;
  结束端点——可以选择路径结束点的样式。
  设置完成后,路径被加宽的效果如图3—05。


图3—05


  伸缩路径:使用此命令可以改变封闭型路径的范围。设置窗口如下图


图3—06

  在“方向”栏上可以设定路径向“内部”或向“外部”的伸缩方向。效果图如图3—07。


图3—07

  对于非封闭路径,使用伸缩路径命令可以自动把路径改为封闭路径。
流浪●剑尊 - 2010-5-23 17:53:00
Fireworks基础教程(七)
2、对象的操作
  对象的选择:用“指针” 工具可以对绘图对象进行直接的点选。当要选择多个对象时,可同时按下Ctrl+A键或直接进行框选,均可选中所有对象。对象被同时选中后拖动任意一个对象,其它的对象也会随着一起移动。
  当一个对象完全处于另一个对象下面时,就很难用“指针”工具进行直接的点选。这时就可以使用工具条上的“选择后方对象” 工具来选择后面的对象,如图3—08。


图3—08

  对象的填充:用钢笔工具画一个随意的封闭路径,然后在该路径的属性对话框中设置路径的描边填充色,如图3—09、3—10。


图3—09


图3—10

  颜色样版——在描边颜色预览窗中可以选择一种色彩作为路径的描边色。预选的色彩及该色彩的网页色数值都会在样版的左上角中显示出来。同时也可以直接输入想要的网页色数值,然后按“回车”即可;
  自定义颜色——点击自定义颜色按钮,从“颜色”窗口中选取或设定一种自定义色彩;
  路径内——是指将描边色填充在钢笔路径之内;
  居中于路径——将描边色填充在钢笔路径之内;
  路径外——将描边色填充在钢笔路径之外;
  取消描边——选择该项后将取消描边色。
  接着我们再来为该路径设置内部的填充色。内部的填充类别分为“无填充色、实心填充、网页抖动、渐变填充和图案填充”五种。其中各种填充类别下又有诸多色彩和样式可供选择。我们先在填充选项中选择一种填充模式,如图3—11。


图3—11

  然后在填充色预览框中设置渐变填充的色彩及透明度,如图3—12。点击颜色滑块可弹出如图3—10般的颜色预览窗。


图3—12

  在透明度滑块或颜色滑块的空白位置上点击鼠标可以添加滑块。在“预置”下拉菜单中可以选择已有的线性填充样式。路径填充设置完成后效果如图3—13。


图3—13

  通过调节该路径对象的填充句柄可以对路径的渐变填充进行修整。


图3—14

  至于其它的路径填充类别及该类别下的诸多样式就由大家亲自动手去试了。
3、对象的变形
  使用“修改—变形”菜单下的这些项可以对对象进行变形处理,如图3—15所示。


图3—15

  任意变形:该功能中已包括“缩放”、“倾斜”和“扭曲”功能,这些功能与工具条上的“任意变形” 系列工具是一样的,选中后可以对对象进行随意的大小、高宽、倾斜度和旋转等拖拽变形。另外,也可以用工具栏上的四个常用的翻转按钮进行调整,如图3—16。

图3—16

图3—16

  旋转180度——将对象进行180度的旋转;
  旋转90度顺时针——将对象顺时针旋转90度;
  旋转90度逆时针——将对象逆时针旋转90度;
  水平翻转——将对象以水平线为转轴,进行水平翻转;
  垂直翻转——将对象以垂直线为转轴,进行垂直翻转。
流浪●剑尊 - 2010-5-23 17:54:00
Fireworks基础教程(八)
4、对象的排列
  同一层的不同对象在工作区上是有上下的排列顺序的,对于对象的上下排列顺序可使用菜单栏中“修改—排列”下的命令进行调整,如图3—30所示。


图3—17

  另外,也可以用工具栏上的四个按钮进行调整,这也是一种较常用的方法,如图3—18。


图3—18


5、对象的对齐
  选中多个对象后,使用“修改—对齐”下的各个选项可以用不同的方式对齐对象。如图3—26、3—27所示,是以水平方式进行对齐前和对齐后的效果。


图3—19


图3—20

  在工具栏中的“对齐”方框内选择不同的工具,也可以对选择的对象进行对齐。方框内依次是“左对齐”、“垂直居中”、“右对齐”、“顶对齐”、“水平居中”、“底对齐”、“均分宽度”和“均分高度”。

图3—21

  此外,通过组合面板中的“对齐面板”,也可以对选择的对象进行各种对齐方式,其中的“到画布”是指对象以画布边缘为对齐坐标。而“锚点”则可以对路径节点设置各种不同的对齐方式。


图3—22

6、对象相互结合

  组合与取消:使用菜单栏上的“修改—组合”命令是对多个矢量对象进行群组,对象被群组后变成了一个整体,如图3—15所示。


图3—23

  而使用“修改—取消组合”命令可以取消这两个对象的群组关系,使对象分离为群组前的独立状态。
  接合与拆分:路径的接合功能用于将多个路径合并成单个路径对象。可连接两个断开路径的端点以创建单个封闭路径,或者可结合多个路径来创建一个复合路径。如图3—16、3—17中所示,使用接合路径前后的变化。所得到的复合路径具有放在最后面的对象的笔触和填充属性。

  
  图3—24         3—25

  使用“拆分”功能,又可以将接合路径还原成相互独立的对象。
  联合:联合是将几个图形对象结合成一个图形对象的操作,新的图形对象轮廓由被联合的图形对象边界组成。如图3—18、3—19所示,我们依次画了绿色和红色两个图形对象。同时选中两对象后使用“联合”命令。

  
图3—26    图3—27

  联合后的对象颜色和联合前最下层对象的颜色是相同的。
  交集:交集是把两个或多个对象的相交部分进行保留,使相交部分形成一个新的图形对象。如图3—20、3—21所示。在同时选中要相交的两对象后,使用“交集”命令。

  
图3—28     图3—29

  打孔:打孔命令是将位于底层的对象与上层对象的相交部分裁减掉,使底层对象的形态被改变。如图3—22、3—23所示。

  
图3—30       图3—31

  裁切:裁切是为多个对象设计的,如有三个对象,层次关系是绿色对象在最下层,红色在中间,蓝色在最上层,它们相互叠加,使用“裁切”命令后,所保留的是最上层对象与中间、下层对象的重叠部分,如图3—24、3—25所示。

  
图3—32       图3—33

流浪●剑尊 - 2010-5-23 17:54:00
Fireworks基础教程(九)

7、蒙版效果

  蒙版又称为遮罩,是一种由最上层对象为下层对象提供外形,而下层对象为最上层对象提供色彩的一种图像处理效果。因此,我们把最上层对象称为“蒙版对象”,而下层对象则称为“被蒙版对象”。矢量和位图对象都可以成为蒙版对象或被蒙版对象。
  较常用的一种蒙版效果就是先在工作区中引入一张图像,然后在图像上面画一个矢量椭圆,如图3—34。


图3—34

  然后同时选中选中两个对象(按Ctrl+A键),使用菜单栏上的“修改—蒙版—组合为蒙版”命令,两个对象就被组合为蒙版图形了。用鼠标拖动蒙版图形的蓝色中心点即可移动下层的被蒙版对象(小狗图),效果如图4—18。


图4—18

  可以看到,两个对象被组合为蒙版后会淡化显示两对象的重叠部分。而淡化的程度是由蒙版对象和背景色之间的明暗关系来决定。色彩越明亮,淡化度就越小,蒙版对象也就越清晰。
  而在“层”面板中,两个对象被组合成蒙版后,就成了一个蒙版图形,被组合在同一个对象层里。如图4—19。


图4—19

  用鼠标点击这一对象层的被蒙版对象时,该对象外围会有一个蓝色边框。当该被蒙版对象是位图时,则可以用各种位图工具对该被蒙版对象进行编辑。而当该被蒙版对象是矢量图时,则可用各种矢量工具对其进行编辑或修改。同样的,当该对象层中的蒙版对象是位图或矢量图时,也可以使用各种位图或矢量工具对其进行修改。如图4—20。


图4—20

  对于蒙版图形,使用“修改—蒙版—禁用蒙版”命令时可暂时取消蒙版效果。同时在“层”面板中也可以看到,蒙版图形中的蒙版对象被禁用。如图4—21。


图4—21

  此时使用“修改—蒙版—启用蒙版”命令时,又可恢复原来的蒙版效果。
  而要删除蒙版效果时,可使用“修改—蒙版—删除蒙版”命令。此时会弹出一个对话框,如图4—22。


图4—22

  选择“应用”时,将保留蒙版图形为独立的位图图形。但蒙版图形不再可以被编辑;
  选择“放弃”时将会删除蒙版图形中的蒙版对象,只还原被蒙版对象。
  当要恢复蒙版图形时只需点击菜单栏上的“修改—取消组合”命令,即可把蒙版图形中的蒙版对象和被蒙版对象进行分离还原。

  为了实现更好的图形处理效果,在Fireworks中还可以为图像使用各种特效。特别是在网页按钮的制作中,使用这些特效会使按钮图象更加美观、更富立体感。而且一个图形对象可以使用多个特效进行反复处理,还可将这些特效处理的结果保存成样式。所以,样式是个集多种特效于一身的“组合特效”。

  1.使用与编辑特效
  使用特效:位图和矢量对象均可使用特效,因此我们可以先在画布上随意制作个图形对象,如图4—01。


图4—01

  然后在该对象属性框右边的“效果”栏中,点击“添加特效” 按钮,从弹出的特效选项菜单中可以为该对象添加任意特效,如图4—02。


图4—02

  当为对象添加“内斜角”和“投影”两个特效后,效果如图4—03。


图4—03

  同时,在效果栏中会显示当前对象所用到的所有特效。


图4—04

  编辑特效:当点击效果栏中“投影”特效前的“编辑特效”   按钮时,即可弹出该特效的编辑对话框,如图4—04。


图4—04

  若要停止某项特效时,只需将特效名称前的对勾取消即可。而要删除效果栏中的某项特效时,可点击“删除特效” 按钮
流浪●剑尊 - 2010-5-23 17:55:00
Fireworks基础教程(十)
2、使用与导入滤镜
  使用滤镜:在Fireworks中支持使用特效插件,也就是支持第三方滤镜。例如,在特效选项菜单中的Eye Candy 4000 Le项就是Alien Skin公司所提供的滤镜,如图4—05。


图4—05

  选择好图形对象后即可通过特效选项菜单启动一个滤镜的设置窗口,如图4—06。


图4—06

  通过该窗口左边的各项设置,可直接作用于右边的图像预览效果。对于所设置的各项内容还可以通过该窗口中的“Settings—Save”进行保存,以便随时调用。
  导入滤镜:由于Fireworks支持第三方滤镜,因此除了可以使用Fireworks自带的滤镜之外,还可以使用外部滤镜。例如导入Photoshop5.5之前版本的滤镜。
  首先启动Fireworks菜单栏中的“编辑—首选参数”窗口,如图4—07。


图4—07

  在该窗口的“文件夹”选项卡中勾选“Photoshop增效工具”后,点击右边的“浏览”按钮。然后在路径选择框中选择Photoshop滤镜的所在目录。如图4—08。


图4—08

  在Photoshop插件文件夹中将所需要的外部滤镜添加进来后,重新启动Fireworks即可使用。
3、建立样式
  使用样式:在图形绘制中,除了使用特效为图形制作各种效果外,还可以使用“样式”面板中Fireworks提供的30个样式。如图4—09。


图4—09

  样式的使用非常简单,只需选在对像后,从“样式”面板中单击所要使用的样式即可,如图4—10。


图4—10

  使用一个样式后,在该对象的属性框中的效果栏中会自动出现某些特效。如图4—11。

如图4—11

  可见,样式就是使用一些特效设计出来后,被保存起来的“组合特效”。只不过使用样式将会更简便、更直观而已。
  在所提供的样式中,还有一些用ABC表示的文字样式。是为文字设计而用的。在选中文字后直接单击文字样式即可为文字添加效果。如图4—12。


图4—12

  虽然文字样主要是为文字设计的,但图形对象也可以使用。
  新建样式:为图形对象添加好各种特效或样式后,单击“样式”面板右下角的“新建样式” 按钮,即可将该对象当前所用到的所有样式或特效保存为一个新的样式,以方便反复使用。


图4—13

在“新建样式”对话框中,可在名称栏里输新建样式的名称。而在名称栏下方可根据不同属性的选择,来修改样式的相关保留效果,同时会在左边的预览窗口中显示设置的效果图。点击“确定”按钮后,新建立的样式会被添加到样式面板中。如图4—14。


图4—14

  “样式”面板列表:点击“样式”面板右上角的按钮,即可弹出“样式”面板的下拉列表,如图4—15。而要对已建立的样式进行编辑时,可双击该样式,或点击“样式”面板右上角下拉列表,从中选择“编辑样式”选项。


图4—15

  编辑样式——选择该项后会弹出与“新建样式”窗口相同的编辑对话框,在该对话框中可重新对所选样式进行相关属性的修改。如图4—16。


图4—16

  删除样式——将所选的某个样式进行删除。或可直接单击“样式”面板右下角的“删除样式” 按钮;
  导入样式——可从外部引入STL格式的样式文件,但当前所用的样式将会被全部替换掉;
  导出样式——可将当前的样式面板输出成一个STL格式的样式文件;
  重设样式——用于恢复样式面板中默认的30个样式,但新建立或导入的样式会被删除;
  大图标——把样式的缩略图以大图显示,如图4—17。


图4—17

流浪●剑尊 - 2010-5-23 17:56:00
Fireworks基础教程(十一)
Fireworks为我们提供了强大的文字设计功能,为文字的输入和设置提供了专业的文本编辑功能,可以方便地对输入的文字进行诸如字体、大小、形状、填充、描边、上下左右的距离、自定义消除锯齿等各项操作。 1、文本属性窗
  点选工具条上的“文字”   工具后在画布上进行单击,即会显示文本的输入框,如图5—01。


图5—01

  在该框内即可自由输入各种文字,而在文字工具的属性框内则详细显示了文字工具的各种选项,如图5—02。


图5—02

  在该属性框中可以对文字的字体、字号、颜色、文字间距、自定义消除锯齿等等进行设置。同时点击菜单栏中的“文本—编辑器”也同样可以对文字的各项属性进行相关设置,如图5—03。

如图5—03

2、文字的变形

  文字的缩放:对于输入的文字同样可以和路径对象般用工具条上的“变形” 工具进行调整,如图5—04。


图5—04

  点选“缩放”工具后在文本框内会出现八个控制点和一个缩放的中心点,当鼠标移到控制点上时指针会变成双向箭头,此时拖动该控制点即可改变对象的形状,如图5—05、5—06。当按住ALT键的同时拖动控制点时,对象则会以缩放点为中心,使对象产生对称式的缩放变形。


图5—05


图5—06

  而当鼠标移到任意一个控制点的四个边角附近时,指针会变为圆形箭头,此时拖动该控制点进行移动,即可旋转改变文字的方向,如图5—07、5—08。此时改变缩放中心的位置所改变的则是旋转点的中心位置。


图5—07


图5—08

  “倾斜”工具和“扭曲”工具的使用同样是通过拖动控制点来实现的。大家可以亲自动手实践一下。另外,文本框的形状被更改后,再次点选“文字”工具依然可以继续输入或编辑文字,如图5—09。

图5—09

 3、文字附加到路径

  Freworks中文字的输入都在文本输入框内,如果希望文字不受矩形文本框的限制,可以绘制封闭路径并将文本附加到路径上,使文字顺着路径的形状进行排列并且保持可编辑性。如图5—10,按Chrl+A键同时选中文字和路径后,使用“文本—附加路径”命令。

图5—10

  这样,文字就被附加到了封闭路径上,如图5—11。此时文字与路径成为了一个整体,而且该封闭路径会暂时失去其笔触、填充以及效果属性。随后对该路径所用的任何笔触、填充或效果属性都将应用到文字当中,而不是路径。


图5—11

  如果觉得文字附边到路径的位置不理想,可以通过文本属性框中的“文本偏移”进行设置。输入“—92”时是将文字逆时针偏移92个像素,如图5—12。


图5—12

  对于附加在路径上的文字不仅可以改变其位置,通过菜单栏上的“文本—倒转方向”还可以改变文字在路径内外的方向,如图5—13。


图5—13

  文字被附加到路径后依然能继续为其添加或编辑各种文字,如图5—14。


图5—14

    如果要解除文字附加到路径的使用,只要选中文字与路径后使用“文本—从路径分离”命令,就可以分开附加在路径上的文字。文本从路径分离出来后,该路径会重新获得其笔触、填充以及效果属性。
4、文字转为路径
  Freworks中可以把文字转变为路径,然后按矢量路径般对其进行操作,但无法再将它作为文本编辑。
  在选中文本后点击“文本—转换为路径”命令,此时文字将被转换成组合路径,如图5—15。


图5—15

  文字被转成组合路径后可以使用“部分选定”工具拖动文字上的路径节点改变字符的形状,如图5—16所示。


图5—16

  也可以将该组合路径使用“修改—取消组合”命令,把字符作单个独立的路径进行拆分,如图5—17所示。


图5—17

流浪●剑尊 - 2010-5-23 17:56:00
Fireworks基础教程(十二)
GIF动画的实现,是由逐张图画在不同的时间段快速地显示出来,由于人眼有0.1秒的视觉暂留,所以图像看上去就像是动了起来。而每一张图画就叫作“帧”,它是组成动画的基本单位。 GIF图形动画为网页增添许多活泼生动、复杂多变的图形元素,因此GIF动画在网页制作中被广泛应用,甚至大家喜欢的QQ动态表情大多也是Gif动画呢。

  Fireworks正是制作GIF动画很好的工具,这一部分我们看看Fireworks MX 2004在动画制作方面的特色。   1、制作GIF动画
  我们先来做一个简单的五帧动画例子。在工作区上随意画上五个对象,按住Shift键选中所有对象,如图6—01。


图6—01

  然后点击菜单栏上的“窗口—帧”命令来启动“帧”面板,如图6—02


图6—02

  点击“帧”面板右下角的“分配到帧”   按钮,在“帧”面板上会自动生成一个五帧的动画。这样,一个简单的动画就制作完成了。而这动画一至五帧的对象是按照对象建立的先后顺序生成的。完成后动画效果如图6—03。


图6—03

  点击“帧”面板右下角的“添加”   或“删除”   按钮,可以添加或删除被选中的帧。而在“帧”面板左下角的“循环”   按钮可以设置动画的播放次数,如图6—04,当前所选择的是“永久”循环播放。


图6—04

2、“帧”面板的使用

  在Fireworks中GIF动画的制作离不开对“帧”面板的操作,因此学会对“帧”面板的使用非常重要。
  帧的重命名:在“帧”面板上双击帧的名称,即可为该帧重命名,如图6—05。


图6—05

  帧的延迟时间:在每一帧名称的右边都有一个“7”字。这些数字表示各帧的延迟时间,这里的“7”表示该帧的延迟时间是0.07秒。双击该处即可重新设置帧的延迟时间,如图6—06。


图6—06

  添加帧:点击“帧和历史记录”组合面板右上角的下拉菜单,如图6—07。


图6—07

  选择“添加帧”可以为当前的动画添加新帧,如图6—08。


图6—08

  数量——可直接输入要添加的帧数。
  在开始——在动画的第一帧前进行添加;
  当前帧之前——在当前被点选帧之前进行添加;
  当前帧之后——在当前被点选帧之后进行添加;
  在结尾——在动画的最后一帧后面进行添加;
  重制帧:可以复制当前被选中的帧,设置对话框与“添加帧”对话框相同。
  删除帧:删除当前被选中的帧。
  复制到帧:单击该项,如图6—09。可把某帧在画布上的对象复制到其它的帧上。也可以在对话框中输入复制帧的“范围”。


图6—09

  分散到帧:该项与前面所讲的“分配到帧”   功能相同。
3、使用“洋葱皮”功能
  在动画制作当中使用“洋葱皮”功能可以方便地查看当前所选帧之前和之后的帧内容。从而为动画的制作带来方便。
  点击“帧”面板左下角的小箭头   按钮,即可弹出“洋葱皮”功能选项,如图6—10与效果图6—11。


图6—10


图6—11

  启动“自定义”项可以自行设置显示的帧数及不透明度等,如图6—12。

图6—12

  而“多帧编辑”则是允许同时编辑多个帧的对象,从而免去了在多个帧之间来回切换的麻烦。

流浪●剑尊 - 2010-5-23 17:57:00
Fireworks基础教程(十三)
4、图层的使用   在Fireworks中绘制对象或图形的过程中,更多的时候是使用图层面板进行对象的选择与调度。而在动画制作当中,层面板的使用也同样重要。
在Fireworks 中,图像默认的保存格式是.PNG文件,该文件最大可能的保存了Fireworks 中所绘制的各种图形对象、切片的相关属性与信息,从而为图像文件的再次编辑再来最大的可操作性,此外在输出的文件格式中常用的还有GIF、GIF动画、BMP、JPEG等。下面我们就来详细了解这些格式的输出方法和设置选项。
  1、图像的输出设置
  “选项”设置:在Fireworks 中,制作完成图像,可以直接点击工具栏上的“保存”按钮,将图像保存成PNG文件。此外也可以用菜单上的“文件—导出预览”命令,进行文件的输出预览,如图7—01。


图7—01

  格式——在该栏中可以选择将要输出的图像格式,常用的输出格式有GIF、GIF动画、BMP、JPEG等;
  调色板——选择图像所使用的调色板。调色板中的颜色越少,图像中的颜色也越少,输出的图像文件也就越小。
  失真——设置图像的压缩质量。压缩比越高,图像失真就越大。在失真栏后面的输入框中,可设置图像所使用的最大色彩数。
  抖动——通过替换图像中色彩相近的象素,以模拟出当前调色板中没有的颜色,从而产生缺失颜色的外观。在导出具有复杂混合或渐变的图像,以及将照片图像导出为诸如GIF的8位图形文件格式时,抖动尤其有用。但同时也会增加图像文件的容量。抖动选项仅适用于GIF、其它8位图形文件格式和WBMP。
  颜色表——显示的是输出对象时使用到的各种颜色。
  在颜色表下有用于编辑颜色的六个工具按钮,如图7—02。


图7—02

  替换选中色彩——在颜色表中选中一种色彩后,使用该工具重新选择一种色彩进行替换;
  设置透明度——将颜色表中某一色彩设置为透明色;
  接近网页安全色——强置图像色彩接近于网页安全色,使其在显示设置为256色的计算机上进行网页浏览时不会或降低色彩抖动;
  锁定色彩——锁定被选中的颜色,以便在更改调色板或减少调色板的颜色数目时无法将其删除或更改。当颜色被锁定之后切换到另一个调色板时,锁定的颜色将被保留在新的调色板中。
  新增色彩——为颜色表新添一种色彩;
  删除色彩——删除颜色表中的色彩。
  在颜色表左下角边上还有三个用来设置图像透明度的工具,如图7—03。


图7—03

  使用左起第一个工具可把颜色表中的某一色彩或对象中的色彩设置成透明色。如图7—04,在图像的“预览”框中,点击白色部分后,图像中所有白色都变成了透明。


图7—04

  使用第二、第三两个工具是增加或删除透明色彩。
  在这三个设置图像透明度工具右边还有一个下拉菜单,如图7—05。

7—05

  不透明——图像中不设置任何透明色;
  索引色透明——我们在Fireworks中所绘制的图像即使背景为透明,但在导出为GIF格式后,它的背景却并非是透明的。因此在导出前就要事先选择“索引色透明”,以确保图像在导出后背景色为透明;
  Alpha透明度——用于导出具有渐变透明和半透明象素的图形。
  删除未使用的颜色——删除颜色表内未在图像中使用的颜色;
  交错式浏览器显示——使图像在浏览器中观看时先以低分辨率进行显示,到图像下载结束时后再显示为完整的分辨率。该选项仅适用于GIF和PNG文件格式。
  在“选项”卡的右下角还有两个按钮,分别为“导出向导”和“优化到指定大小”如图7—06。


图7—06

  导出向导——可按该向导的一步步提示进行选择,从面导出图像;
  优化到指定大小——可自行设定导出文件的大小。
  “文件”设置:点击“导出预览”窗口中的“文件”选项卡,如图7—07。


图7—07


  缩放区——可以设置导出图像的缩放比例和宽、高度;
  导出区域——选择该项后可直接在X,Y栏中输入起始坐标,在W,H栏中输入宽、高度。此时,在图像的预览区中,图像四周会出现六个控制点,通过拖动这些控制点也可以设定图像的导出区域。
流浪●剑尊 - 2010-5-23 17:57:00
Fireworks基础教程(十四)
2、输出GIF动画
  在“导出预览”窗口中导出GIF动画时,可以先在“选项”设置中的格式栏内选择“GIF动画”,然后对该动画进行相关的优化设置后点击“动画”选项卡,如图7—08。


图7—08

  帧的处置——在该选项卡的上面有个垃圾桶图标,可用于指定帧的处置方法;
  帧的延迟——在该项上面有个时钟的图标,可设置被选中帧的延迟时间;
  帧的播放次数——在“永久”下拉菜单中可以设置动画文件在导出保存为网页格式时的播放次数;
  裁剪每个帧——可将动画中的每一帧都裁剪成一个矩形区域,只输出各帧之间不同的图像区域;
  保存帧之间的差异——取消该项后,只会输出各帧之间有变化的图像;
  各项设置完成后点击“导出预览”窗口右下角中的“导出”按钮,然后选择文件的保存格式及存放路径即可。
3、输出JPEG文件
  由于JPEG格式的文件总是以24位颜色进行保存和输出,因此无法像GIF格式那样通过编辑其调色板进行优化。所以当选择输出JPEG格式的图像时,颜色表为空。如图7—09。


图7—09

  品质——设置JPEG图像的输出品质。品质越高文件也就越大;
  平滑——设置图像表面的光滑度;  渐进式浏览器显示——选择该项后,在浏览器上查看此图像时,将由模糊逐渐到清晰的方式来显示;
  锐化颜色边缘——将强化图像色边缘的锐化值,使图像更加清晰。
流浪●剑尊 - 2010-5-23 17:58:00
Fireworks基础教程(十五)
Alt——在网页浏览时,当鼠标移到该按钮上时将要显示的提示内容;
  目标——选择是否在新的浏览窗口中打开所链接的内容。
  对于按钮链接区域的设置还可以使用“Web”工具区中的“多边形热点”工具为按钮或图绘制链接区域,如图8—14。


图8—14

  “多边形热点”工具的使用方法与“多边形切片”工具是一样的。
  在为链接区域添加链接对象时还也可以使用“UBL”面板,如图8—15。


图8—15

  在该面板的第二个输入栏中可直接输入“切片”或“热点”区域的链接地址,然后点击“添加链接” 按钮将地址添加到下面的链接窗口中。使用时只需在该窗口中点选当前“切片”或“热点”区域所要用到的链接地址即可。在“UBL”面板右下角的“新建URL” 按钮中,可以直接为链接窗口添加链接,或对链接窗口中已有的链接地址进行修改,如图8—16。


图8—16


  图像变换技术在网页中经常被用到,即当鼠标移动到某图像或按钮上时,会触发另一个图形的显示。在Fireworks中,图像变换的制作原理就是使“帧”面板中某帧中的图形对象与来自任何帧的图象进行交换,从而达到在网页浏览时产生图形变换的效果。


  1、简单的图像变换
  在Fireworks中制作简单的图像变换,就是把“帧”面板中第1帧里的对象与第2帧中的图像进行交换。
  我们先制作或引入一个按钮的一般状态图,选中图形后单击鼠标右键,从弹出菜单中选择“插入切片”或“插入热点”命令,如图9—01。


图9—01

  然后在“帧”面板中新增加一帧,并在此帧上引入鼠标经过按钮时将要变换的图像,如图9—02。


图9—02

  选中切片后,启动“行为”面板,点击“添加”   指令按钮,从中选择“简单变换图像”,如图9—03。


图9—03

  这样,一个简单的变换按钮就制作完成了,按F12键就可以在浏览器中进行测试了。


图9—04

  可以看到,不管你在第二帧中所导入的图像有多大,在网页浏览时也只能在相同的切片范围内看到两张图形的变换效果。因此,这种图象的变换又被称为“相交变换”
流浪●剑尊 - 2010-5-23 17:58:00
Fireworks基础教程(十六)
2、复杂的图像变换

  先在画布上绘制或引入三个图形对象,然后同时选中这些对象,并在任意一个对象上单击右键,从弹出菜单中选择“插入切片”。这时会弹出一个提示窗口,如图9—07。


图9—07

  选择“单一”按钮时,是把选中的全部对象设置在同一个大的切片区域内,而“多重”按钮则是为所有对象各设置一个独立的切片区域。在这里我们选择“多重”按钮后,如图9—08。


图9—08

  接着,我们在“帧”面板内添加三个空白帧,如图9—09。


图9—09

  在第2帧中引入“小猫”按钮切片所要变换的图形,并在该图形上点击右键选择“插入切片”命令,如图9—10。


图9—10

  同样的,我们在第3和第4帧中也分别引入用于“鹦鹉”和“鲜花”按钮所要变换的图像,然后都在图像上点击右键,选择“插入切片”项。


图9—11

  接着,点选“小猫”的按钮切片后使用“行为”面板上的“交换图像”指令,如图9—12,从而启动“交换图像”的详细设置对话框(图9—15)。


图9—12

  或者用鼠标左键按住“小猫”按钮切片中间的圆形控制手柄不放,然后拖拽鼠标到与其进行图像交换的切片上,这时会出现一条蓝色的链接曲线,如图9—13。


图9—13

松开鼠标后会弹出一个“交换图像”的设置窗口,在下拉菜单上选择与“小猫”按钮切片进行交换的图像所在的帧。在这里我们选择“帧2”。


图9—14

  如果点击“更多选项”按钮,也可以启动“交换图像”的详细设置对话框,如图9—15。


图9—15


图9—16


  用同样的方法为“鹦鹉”和“鲜花”按钮在“交换图像”对话框中设置不同的交换图像。三个按钮切片设置完成后如图9—17。


图9—17


  按F12键即可在浏览器上测试制作效果了,如图9—18。


图9—18

  可以看到,点击不同的按钮图像,就会在不同的位置上显示相应的变换图形。因此,这种图象的变换效果又被称为“不相交变换”。
  要修改设置内容时,选择切片后,点击“行为”面板右下角的“编辑” 按钮即可,如图9—19。


图9—19

3、输出HTML文件

  点击Fireworks菜单栏中的“文件—导出”命令即可把制作的内容输出为HTML格式的文件,如图9—20。


图9—20


  文件名——输入导出文件的名称;
  保存类型——选择输出文件的保存格式。默认情况下是以HTML格式输出;
  HTML——导出成HTML文件或把制作内容以GIF图像格式复制到剪切版中;
  切片——可以选择是否导出切片;
  仅已选切片——只导出事先被选取的切片;
  仅当前帧——当制作对象有多个帧数时,可以事先选中某帧进行单独导出;
  包括无切片区域——选择是否将无切片区域一并导出;
  将图像放入子文件夹——可选择是否把导出的HTML文件与图片一起放在一个文件夹内。点击下面的“浏览”按钮可为图片选择一个子文件夹进行保存。
在Fireworks中,为图像设置链接区域是靠“切片”或“热点”工具来完成,因此“切片”或“热点”区域又被称为链接区域。它们不是以图像的形式存在,而是在图像导出成网页格式后,以HTML代码的形式出现.
流浪●剑尊 - 2010-5-23 17:59:00
Fireworks基础教程(十七)
1、切片与热点
  网页层:所有的“切片”和“热点”区域都被保存在“层”面板中的“网页层”内,以划分它们与图像层的区别。但同时也可以像对待图像层那样对网页层进行例如重命名、选择、删除、展开/折叠层、隐藏/显示层、锁定/编辑层等操作,如图10—01。

图10—01

  链接区的变形:对于各种形状的图形可为其选择不同的“切片”或“热点”工具,为图象划分出所需的切片或热点区域。同时也可以使用各种“变形”工具对该区域进行变形处理,如图10—02。

图10—02

  设置链接:为图像设置好“切片”或“热点”的链接区域后,在其区域的属性对话框中就可以输入或设置链接的相关内容。如图10—03。

图10—03

  而对于“切片”区域除了可以为图像设置一个链接范围以外,还可以将该范围作为HTML的语言区域进行导出。只需在“切片”属性框中的类型下拉列表里选择“HTML”项,如图10—04。

图10—04

  然后点击类型列表下的“编辑”按钮即可在“编辑HTML切片”窗口中输入HTML代码。如此一来,也就把该切片区域转成了HTML的语言区域。


图10—05

 控制手柄:在“切片” 区域的中心有一个圆形的控制手柄,右键点击即可弹出这个切片目前所能用到的所有行为指令。如图10—06。



图10—06

  导出所选切片——可把图像中的切片区域作为图像进行导出保存。在导出前,还可以使用“优化”面板对该区域进行各项设置,如图10—07。


图10—07

  排列——调整该切片在网页层中上下的排列位置;
  添加简单变换图像行为——为图形的切片区域建立简单的图形变换效果;
  添加交换图像形为——可启动“变换图像”的详细设置窗口,为切片区域的图像建立较复杂的图形变换效果;
  添加状态栏信息——选择该项后会弹出一个 “设置状态栏文本”对话框,在消息栏中可输入要显示在浏览器状态栏上的文字信息。如图10—08。


图10—08

  添加导航栏——将图形的切片区域设置为网页的导航栏;
  添加弹出菜单——在切片位置添加一个弹出菜单的按钮;
  编辑弹出菜单——可重新设置弹出菜单中的各项内容。
同样的,在“热点”区域的中心位置上也有个控制手柄,点击右键即可弹出相关行为,如图10—09。


图10—09

  为 “切片”或“热点”所添加的全部指令都保存在“行为”面板中。同时,点击“行为”面板上的“添加” 或“删除” 按钮也可以为切片、热点添加或删除相关的行为指令,如图10—10。


图10—10

流浪●剑尊 - 2010-5-23 18:00:00
Fireworks基础教程(十八)
2、制作弹出菜单
  先制作或引入一个要用来制作弹出式菜单的主按钮,如图10—11。


图10—11

  接着为该按钮添加一个切片或热点,并在其控制手柄的弹出菜单中选择“添加弹出菜单”项,如图10—11。


图10—11

  此时将会启动“弹出菜单编辑器”窗口,如图10—12。

如图10—12

  在“内容”选项卡中,点击“添加菜单项” 或“删除菜单项” 按钮,可在文本栏中加入或删除一个菜单项;
  文本栏——可输入弹出菜单中各选项的名称;
  链接栏——输入菜单菜单项所要链接的地址;
  目标栏——选择链接对象在浏览器中的打开方式。
  如果要把文本栏中某个菜单选项再设置为另一个菜单的下一级目录时,只需点击“下级菜单” 按钮即可。如图10—13;


图10—13

    可以看到,“菜单2”已成了“菜单1”的下级目录了。而点击“上级菜单” 按钮则可以将“菜单2”又向上恢复一级。
    菜单项上下位置的调整可能用鼠标的拖拽来完成,如图10—14,我们把“菜单5”向上移动了一格。


图10—14

  在“内容”选项卡的设置完成之后,点击右下角的“继续”按钮,进入下“外观”选项卡,如图10—15。


图10—15

在单元格选项中,可以将弹出式菜单的风格设定为“HTML”或“图像”,而两种风格都可以在下面的预览框中先行查看;

  在单元格右边的下拉列表中可以选择菜单的排列方式,分别有“垂直菜单”和“水平菜单”;
  字体栏及旁边的文字设置工具,都是用于对菜单文字的各项设置;
  在“弹起状态”框中有两个颜色选择框,分别用于菜单在弹起状态时,文字颜色及其背景色的设置;
  在“滑过状态”框中也有两个颜色选择框,是用于菜单在鼠标滑过状态时,文字颜色及背景色的设置。
  在“外观”选项卡的设置完成后,我们点击“继续”按钮,进入下一个选项卡。如图10—16。


图10—16

  在“高级”选项卡中可以进一步对菜单的边框及边框颜色等进行详细的设置。完成后点击“继续”按钮。
  在“位置”选项卡中可以对弹出菜单的弹出方式及位置进行设定,如图10—17。


图10—17

  菜单位置——设置主菜单的弹出位置。也可以直接输入主菜单弹出位置的坐标值;
  子菜单位置——选择子菜单的弹出位置,同样也可以在下面的坐标中直接输入相关数值。而取消“放在同一位置”选项时,则子菜单总会与它的上一级菜单在同一水平位置上弹出。
  点击“完成”按钮后,弹出式菜单的制作就大功告成了,按F12键即可在浏览器中查看效果。

图10—18


流浪●剑尊 - 2010-5-23 18:00:00
Fireworks基础教程(十九)
在Fireworks中,自动化的应用可以为我们省去不少在图像处理或网页制作过程中一些相同步骤的操作,从而有效地节约时间和提高工作效率。
  1、“查找”面板
  使用“查找”面板可方便快捷地查找或替换文件中的文字、字体、颜色等内容。这对于较大的网页制作或图像处理都将带来极大的方便。


图11—01

  先要在“搜索所选范围”栏中选择搜索范围。可按“搜索帧”、“搜索文档”和“搜索文件”进行范围选取。
  当选择“搜索帧”时,将对当前文件中的所有帧列为搜索范围;
  选择“搜索文档”时,则对当前Fireworks中打开的所有文件进行搜索;
  “搜索文件”则对被选中的外部文件进行展开搜索。
  在“搜索文件类型”栏中,还可以再进一步按文件或制作对象的类型进行搜索,如图11—02。


图11—02

  选择不同的文件或制作对象,在该栏下就会显示与该搜索相对应的设置。例如,当选择“查找颜色”时“查找”面板如图11—03。


图11—03

  在“查找”右边的颜色预览窗中选择所要查找的色彩,然后在“更改为”右边的颜色预览窗选择一种用来替换新的颜色。当点击下方的“查找”按钮时,只会把“查找”右边颜色预览窗的色彩找出来,而点击“替换”或“全部替换”时,则会将查找到的色彩进行更换。
2、使用批处理

  当有大量的文件要做相同的处理操作时,使用“批处理”功能即可将这些文件按指定的操作步骤进行处理。点击菜单栏上的“文件—批处理”,如图11—04。


图11—04

  在浏览框中选择要处理的文件后点击“增加”按钮即可把文件添加到列表框内;
  选择“添加全部”时则是把浏览窗中的所有文件添加到列表框中;
  点击“删除”按钮,又可以把列表框中被选中的文件名单删除。
  将要处理的文件选择完后,点击“继续”按钮进入批处理的执行动作或命令选择窗口,如图11—05。


图11—05

  在该窗口的左边的“批次选项”中选择执行文件处理的动作后点击“添加”按钮,即可把动作加入到右边的列表中。一次可以添加多个处理动作,而且点击右边列表中的两个箭头按钮     ,还可以设置执行动作时的先后顺序。对于不需要的动作指令也可以从列表中选中后点击“删除”按钮。在这里我们试着把刚才导入的两张图片的原有名称面前加上“时钟”两字,然后点击“继续”按钮,进入下一个设置步骤。


图11—06

  在“批次输出”中,可以选择对图像执行批处理后的保存路径;
  同时,你还可以选择是否对原图像文件进行备份。选择“覆盖现有备份”时,将覆盖原来的文件。选择“增量备份”时,将对上一次的备份文件进行重命名,也就是备份原来的文件;

  当点击“保存脚本”时,则可将这次批处理的动作过程用脚本形式进行保存,以便下次再对其它文件进行相同的动作处理时,可直接调用该脚本文件。
  设置完成后点击“批次”按钮,批处理动作被正式开始执行。同时,会有一个提示窗口显示当前已被处理完成的文件数量,如图11—07。


图11—07

  点击“确定”后,整个批处理的过程就完成了。而那两张图像的名称也被成功的重命名了,如图11—08。


图11—08

  而当下次还要使用这个批处理的动作时,可以点击菜单栏中的“命令—运行脚本”命令,如图11—09。


图11—09

  然后在弹出的文件浏览窗中选择上次保存的那个脚本文件。此时还会弹出一个窗口,从中选择所要处理的文件。如图11—10。


图11—10

  细心的朋友一定会发现,菜单栏中的“命令”列表里所列的动作指令与图11—05窗口左侧批次选项中的“命令”列表,其内容是完全一样的。其实,“命令”菜单中的动作指令也属批处理中的动作脚本。只不过在批处理窗口中还可以进一步为这些动作指令作出相关设置及执行上的时间安排.
流浪●剑尊 - 2010-5-23 18:01:00
Fireworks基础教程(二十)(一)
   


3、“历史记录”面板

  在图形或网页的制作过程中难免会用到工具栏上的“撤消” 或“重做” 按钮,以恢复上一步或前一步的操作。但当所要撤消或重做的次数较多时,就可以直接在“历史记录”面板里点击左侧的箭头滑块,从而返回到想要的那一步操作。如图11—11。


图11—11

  在默认的情况下,“历史记录”面板只能记录20条操作步骤。也就是说,当“撤消”的次数超出这个记录范围时,就不能再执行撤消命令。若想修改这个记录范围,可通过菜单栏上的“编辑—首选参数”。在常规选项卡内重新输入“撤消步骤”的数值。
  因为“历史记录”面板里忠实地记录了每一步的操作过程,因此我们又可以把这些操作过程保存为脚本文件,方便下次再有相同的图像处理步骤时进行调用。方法是先在“历史记录”面板里把需要的操作步骤选中,如图11—12。


图11—12

  然后点击面板右下角的“保存”按钮,此时会弹出一个“保存命令”的对话框。在“名称”栏中为这些操作记录取个名称,然后点击“确定”按钮。


图11—13

  此时点击菜单栏上的“命令” 菜单,就会在最后一项中看到“图形变形记录”的操作脚本命令已被保存其中。


图11—14

1
查看完整版本: Fireworks基础教程