Fireworks是由Macromedia公司开发的网页制作软件利器之一。

　　在绘图方面Fireworks结合了位图以及矢量图处理的特点，不仅具备复杂的图象处理功能，并且还能轻松地把图形输出到Flash，Dreamweaver 以及第三方的应用程序。

　　在网页制作方面Fireworks能快速地为图形创建各种交互式动感效果，不论在图象制作或是在网页支持上都有着出色的表现。

　　随着版本的不断升级，功能的不断加强，Fireworks受到越来越多图像网页制作者的青睐。目前的最新版本Fireworks MX 2004 中文版更是以它方便快捷的操作模式，和在位图编辑、矢量图形处理与GIF动画制作功能上的多方面优秀整合，赢得诸多好评。

　　为了使更多的初学者能够尽快掌握Fireworks，编者选用了Fireworks MX 2004 中文版为蓝本进行系列教程讲解，希望能为大家学习Fireworks带来帮助。

　　第一部分中我们先来了解一下Fireworks MX 2004中文版的操作界面。

　　

　　 一、创建新文档

　　在启动Fireworks MX 2004中文版时，会出现一个启始页面窗口，在这里你可以快速访问最近编辑过的文档或创建一个新文档，也可以访问帮助一类的文件或网页。

　　当我们选择“创建一个新文档”后，就会弹出“新建文档”的对话框，如图1—01。

图1—01

　　画布大小：设置文件画布的宽、高度，可以用象素、英寸或厘米为单位。

　　分辨率：文件的分辨率越高，图像越精细，但同时文件也会越大。

　　画布颜色：文档画布颜色有三个选项，依次为白色、透明色和自定义颜色。在自定义颜色下方的色彩选择框中，可以自行选择一种颜色。

　　单击“确定”后，新的文件就创建完成了。

二、Fireworks的工作界面

　　新建文档完成后就可以看到Fireworks的工作界面了，如图。 Fireworks的工作界面由“菜单栏”、“工具栏”、“工作区”、“工具条”、“组合面板”和“属性框”六个部分组成。

图1—02

　　工作区：在工作区上不仅可以绘制矢量图，也可以直接处理点阵图（位图）。工作区上有四个选项卡，当前是“原始”选项窗，也就是工作区，只有在此窗口中才能编辑图象文件。而在“预览”选项窗中则可以模拟浏览器预览制作好的图象。“2幅”和“4幅”选项卡则分别是在两个和四个窗口中显示图像的制作内容。

　　工具条：新版的Fireworks工具条除了新增了一些工具以外，还与原有的工具重新进行优化组合，使其更加的直观和人性化。

　　属性面板：当选择对像或选取工具的时候，其相关信息都会在属性面板中显示出来。同时也可以通过修改属性面板中的数据或内容来调整图像的相关属性。例如图像的大小、位置及色彩等等，如图1—03。

图1—03

　　点击窗口标题的“属性”可展开或折叠属性窗口。在标题栏右边的下拉列表中可以设置窗口只显示一半的高度和关闭该窗口。

　　组合面板：Fireworks的组合面板共有14个，分别为“信息、层、混色器、颜色样本、样式、URL、库、形状、帧、历史记录、行为、查找、优化和对齐面板”。每个面板即可相互独立进行排列又可与其它面板组合成一个新面板。但各面板的功能依然相互独立。点击面板上的名称可展开或折叠该面板。例如图1—04中，则是把“样式”面板与“对齐”面板进行组合，形成一个新的组合面板，如图1—05所示。

图1—04

图1—05

　　动画播放按钮：对于制作的动画文件可以用这些按钮进行播放、停止、到最后一帧、显示当前帧数等操作。

　　取消BMP模式：在引入了BMP格式的图形文件时，单击这个红色小叉就可以取消BMP模式，进入矢量编辑。

　　工作区的显示比例：在这里可以更改工作区的显示比例，以方便相关操作，但却不会更改图像的实际大小。

图1—06

 三、图像文件的导入

　　通过菜单栏上的“文件—打开”或工具栏上的“打开”按钮即可启动打开文件对话框，如图1—07。

图1—07

　　选中要导入的图形文件后在右边的预览框内会显示该文件的预览图。选中“打开为未命名”项是把选中的文件作为无名的文件打开。选中“以动画打开”项是把选中的文件作为动画打开。Fireworks还支持一次性同时打开多个相邻或不相邻的文件，也可以直接打开或导入Photoshop制作的PSD格式文件进行编辑处理。

四、修改画布

　　Fireworks中的画布也就相当于图像的背景，在绘图的过程中为了使画布的大小或色彩能够和前景的图象保持协调，我们经常要修改画布的相关属性。方法是，用鼠标点击画布，或在画布的工作区外点击一下，从而在属性栏中调出画布的属性对话框，如图1—08。

图1—08

　　修改画布颜色：在该属性对话框中，点击画布颜色选择框，可以重新点选新的画布颜色。

图1—09

　　画布大小：点击“画布大小”按钮将弹出设置对话框，从中可以看到，当前画布的宽为650像素，高是263像素。在“新尺寸”项内可以输入新的宽、高像素。在“锚定”右边是画布的固定点，当画布的大小被改变时会以选中的固定点不变来更改画布的大小。

图1—10

　　图像大小：对于图像区域大小的改变，也可以通过画布的属性对话框中的“图像大小”进行修改，如图1—11。

图1—11

　　在像素尺寸项下可以设置工作区的宽、高度数值。选中“约束比例”项后，当宽度或高度中某一数值被改哟后，另一个数值也会等比例地随着改变。如果取消此项选择，就可以单独改变宽度或高度的数值了。“图像重新取样”项是设置图像的重新取样功能。

　　符合画布：这是Fireworks MX 2004的新功能，可以使画布大小与图像所占用的位置大小相一至。

五、网格与辅助线

　　网格与辅助线经常用于在绘画过程中，对图像的摆放位置、角度、大小等进行辅助参考，从而为图像制作带来方便。点击“视图”菜单，从中即可启动“网格”与“辅助线”功能，如图1—12。

图1—12

　　网格：在网格的下级菜单中，当选择“对齐网格”时，可使绘图对象边缘与网格进行对齐。而“编辑网格”则可重新设置网格线的颜色及排列密度等等。如图1—13。

图1—13

　　辅助线：在启动标尺后，从上边或左边的标尺刻度中按下鼠标不放，并向画布方向进行拖拽，即可拉出一条辅助线出来，如图1—14。

图1—14。

　　当把辅助线再拖回标尺位置上时，即可取消该辅助线。而在辅助线的菜单选中，可以设置辅助线的相关属性。

图1—15

　　锁定辅助线——当辅助线从标尺中被拖拽到工作区后，就无法再进行移动；

　　对齐辅助线——使绘图对象与辅助线对齐；

　　编辑辅助线——可启动辅助线的编辑窗口，从而进一步为辅助线作相关设置。

和许多主流的图像处理软件一样，Fireworks的绘图工具主要都集中在“工具条”上。利用这些工具可以绘制出各种图形，并可为其设置相应的属性，如颜色、大小、位置等等。

　　Fireworks MX 2004的“工具条”中增加了不少新工具，并与原有的工具在一起被编排为六个类别：选择区、位图、矢量、Web、颜色和视图区。有些工具按钮的右下角有一个小三角，说明这个工具包含有其它几种不同的工具，按住这个工具按钮不放就能显示其它的工具。

　　我们先来介绍位图区的绘图工具。

　　文章导读：

　　1、选区工具
　　2、自由笔刷工具
　　3、图像修改工具
　　4、色彩填充工具
　　5、橡皮图章工具系列
　　6、路径工具
　　7、路径修改工具
　　8、形状工具

　　1、选区工具

　　图2—01为工具条中位图区的主要工具，其中的“矩形”、“椭圆形”、“套索”、“多边形套索”和“魔术棒”工具都用于约束位图的编辑范围，所有的位图编辑例如剪切、复制、填充等只能在该范围内有效。

图2—01

　　选区工具：用选区工具选取的区域以转动的黑白线（蚂蚁线）表示。当按住Shift键的同时，再画出一个选取框，即可组合成一个新的选取区域。如图2—02。

图2—02

　　而在按住Alt键的时候，再次画出来的矩形选区则会把原来选区的相交部分裁切掉。

图2—03

　　取消选区时可先点击选取工具，然后单击选区以外的任何地方。

　　在选取框的属性面板上显示了目前该选取框的大小及坐标位置，等相关信息。

图2—04

　　在样式选项中可使该选取框在“正常”、“固定大小”和“固定比例”这三个样式中切换。

　　正常——默认的选择方式，也最为常用。可以用鼠标拉出任意矩形或椭圆形选取区域。

　　固定比例——可以任意设定矩形或椭圆选区的宽高比。只需在该选项的下方输入相应的宽高比数值。

　　固定大小——在这种方式下可以通过输入宽和高的数值来精确确定矩形或椭圆选区的大小。

　　边缘选项可以对选区边缘的硬化程序进行设置。

　　实边——选区边缘呈锯齿状，没有任何的柔化过渡。

　　消除锯齿——可使选区边缘有最基本的柔化。

　　羽化——可以消除选取区域的正常硬变边缘，使其柔化。也就是使边界产生一个过渡段，该选项的取值为0—100之间，数值越大，柔化程度也越大。

　　“套索” 工具：可以随意圈画出所要的选取范围，主要用于选取一些不规则的图形选区。如果选取的曲线终点和起点未重合，Fireworks会自动用封闭成完整的线圈。

　　“多边形套索” 工具：可以在图像中选取出不规则的多边图形，在选取时同时按下Shift键可使选取线段成直线、水平、45度角方向。

图2—05

　　与选取框的属性面板相比，套索工具的属性框少了样式选项，其它选项的使用功能则完全样同。

　　“魔术棒” 工具：这是一个神奇的选取工具。可以用来选取图像中颜色相似的区域，当用魔术棒单击图像上某个点时，与该点颜色相相近的区域将被选中，可以在一些情况下节省大量的精力来达到意想不到的效果。

图2—06

　　通过魔术棒工具的属性对话框可以设置色彩的容差值和边缘的柔化度。容差值越大，所选取的范围也越大。

2、自由笔刷工具

　　“刷子” 工具和“铅笔” 工具都可以直接在画布上画出任意线条，如图2—07。

图2—07

　　在“刷子”工具的属性对话框中可以对刷子的色彩、大小、笔触类形、边缘柔化值、纹理、纹理透明度、刷子透明度、色彩模式等进行设置，如图2—08。

图2—08

　　在该属性框的笔触类形下拉列表里有各式各样的笔触类形可以选择，点击“笔触选项”可以编辑新的笔触。

图2—09

　　在纹理类型的下拉列表中有数十种填充纹理图案可供选择，同时你还可以从该列表中选择“其它”，从外部导入位图图像作为新的纹理填充。

　　在铅笔的属性框中同样可以对线段的色彩、是否选用柔化、透明度数值、自动擦除等进行设置。

3、图像修改工具

　　“橡皮擦” 工具：用于擦除位图的颜色。和使用画笔一样，在选中橡皮工具后，按住鼠标左键在图像上拖动即可，如图2—10。

图2—10

　　“模糊” 工具：该工具的工作原理就是降低像素之间的反差，使图像产生模糊效果，如图2—11。

图2—11

　　“锐化” 工具：与“模糊”工具正好相反，“锐化”工具是用于加深像素之间的反差，使图像更加锐化，效果如图2—12。

图2—12

　　“模糊”与“锐化”工具的属性面板完全相同，其中的强度表示模糊或锐化时的笔触强度。

图2—13

　　“减淡” 和“烙印” 工具：这两个工具都是用来改变图像的亮调与暗调。原理来源于胶片曝光显影后，经过部分暗化和亮化，来改善曝光效果。效果图分别如下。

图2—14 图2—15

　　“减淡”和“烙印”的属性框功能相同，如图2—16。

图2—16

　　其中的“范围”选项是对将要处理的特殊色调区域进行色调上的选择。

　　暗调——选中后“减淡”和“烙印”工具只作用于暗调区域；

　　中间调——选中后“减淡”和“烙印” 工具只作用于中间调区域；

　　亮调——选中后“减淡”和“烙印” 工具只作用于亮调区域。

　　“涂抹” 工具：该工具在使用时好像时用日常生活中的干笔刷在未干的油墨上擦过一样。也就是说笔触周围的像素会随着“涂抹”工具的笔触一起移动，如图2—17。

图2—17

4、色彩填充工具

　　“滴管” 工具：用于从图像中选取颜色来指定一种新的笔触颜色或填充色。可以选取单个像素的颜色、3×3像素区域内的平均颜色值或5×5像素区域内的平均颜色值。

　　“油漆桶” 工具：在绘制时应用于位图和矢量对象的“矩形”、“圆角矩形”、“椭圆”和“多边形”等绘制工具的填充属性。当前的填充会出现在属性对话框、“工具条”面板和组合面板中的“混色器”面板中。可以使用这些面板中的任何一个来更改“油漆桶”工具的填充色。如图2—18所示。

图2—18

　　在“油漆桶”的属性对话框中可以看到，该工具的填充类别有实心填充、网页抖动、渐变填充和图案填充四种。 其中各种填充方式又有诸多色彩及样式可供选择。

图2—19

　　下面两张图是用渐变填充模式中的“线性填充”和图案填充模式中的“木纹3”进行填充。其中我在“线性填充”时是从图像的左上角按住鼠标不放，然后向图像的右下角进行拖拽，而在用“木纹3”填充时是从图像的中心点上按住鼠标不放，然后向图像的右上角进行拖拽。

　　
图2—20　　　　图2—21

　　而这种用鼠标拖拽的填充方式也正是“渐变工具”的填充特点。而且“渐变”工具的属性对话框与“油漆桶”的属性框中的功能也非常一样的，所不同的是“渐变工具”的填充模式只有渐变填充。

5、橡皮图章工具系列

　　“橡皮图章” 工具：用来克隆图像的部分区域，以便将其压印到图像中的其它区域。在使用时先要把鼠标移到想要复制的图像上，然后点击鼠标左键以确定复制的起点，然后拖动鼠标在图像的任意位置开始复制。如图2—22和2—23是复制前后的图像。完全没有走样，而且你想复制多少都可以，对于我们这种懒人来说，简直方便极了。

　　
图2—22 　　　　　　　　图2—23

　　“替换颜色” 工具：选取一种颜色，可以在这种颜色的范围内，用类似笔刷的东西涂抹成另一种颜色。使用该工具时要先在属性面板中单击“更改”右边的色彩预览框以选取颜色，或在图像中单击以选取你要替换的颜色。然后在“终止”的色彩预览框内选择一种颜色，或在图像中选取将用来替换的颜色。

图2—24

　　如图2—25和2—26是替换颜色前后的图像。

　　
图2—25　　　　　　　　 图2—26

　　在“替换颜色”的属性框中还可以对“替换颜色”笔触的大小、形状、容差和强度进行设置。而“彩色化”是指用“终止”颜色去替换“更改”颜色。取消选择“彩色化”以便用“终止”颜色对“更改”颜色进行涂染，并保持一部分“更改”颜色不变。

　　“红眼消除” 工具：在一些照片中，主体的瞳孔是不自然的红色阴影。因此使用“红眼消除”工具就能轻松的解决这个问题。“红眼消除”工具仅对照片的红色区域进行绘画处理，并用灰色和黑色替换红色。如图2—27和2—28是红眼消除前后的图像。

　
图2—27 　　图2—28

　　位图区的工具介绍完了下面接着来介绍矢量区的主要工具，如图2—29。

图2—29

6、路径工具

　　“直线” 工具：使用“直线”工具可以在画布上直接画出直线，当按住Shift键时可以画出水平、垂直、45度角的直线。

图2—30

　　“指针” 工具：使用该工具可以方便地移动直线。用“部分选定” 工具点击直线时，直线的两端会出现控制点，按住鼠标左键拖动直线的一个控制点可以方便地任意改变直线的角度，并可以随意拉长或缩短直线，如图2—31。

图2—31

　　“钢笔” 工具：选中“钢笔”工具后单击画布上的不同位置，可以画出由线段组成的直线路径。如果鼠标单击后不松开，而是拖动鼠标，这样画出来的路径就是曲线路径，通过调整曲线的两条控制线可以设定曲线的弯曲度。

图2—32

　　在调整曲线的控制线时，按住Alt键可以单独控制一条控制线，从而确立下一个曲线线段的走向和弯曲度。

图2—33

　　要结束线段的绘制时只需在线段的结束点上进行双击即可。而在画封闭的路径时，则要用鼠标单击起始点或按住起始点拖动就可以了。当钢笔工具的指针位于非路径区域时，指针旁边会有一个小的叉号，如果指针处在路径上时，指针旁会有个十字的标志，此时单击鼠标会增加一个节点。

图2—34

　　而当指针处在节点上时，指针旁则会有个一字的标志，单击鼠标可删除该节点。

　　“矢量路径” 工具：“矢量路径”工具的使用和“刷子”工具一样，都可以任意画出自由路径。笔触色彩、大小及边缘的柔化值等的设置也都完全相同。

7、路径修改工具

　　“重绘笔刷” 工具：用“细部”工具可以对简单的封闭路径进行编辑。但对于图2—37中这种较复杂、节点较多的封闭路径，就要使用“重绘笔刷” 来处理。

图2—35

　　使用“重绘笔刷”沿着弯度重新画一条弧线，重绘的路径部分会以红色高亮显示，这样，原来路径就被新的路径取代了。如图2—36。

图2—36

　　“自由变形” 工具：可以直接对矢量路径进行弯曲和变形操作，而不是对各个节点执行操作。Fireworks在更改矢量路径的形状时会自动添加、移动或删除路径上的节点。

图2—37

　　“更改区域形状” 工具：使用时，该工具的指针是两个同心圆，只有处于这两个同心圆范围内的路径才会被修改。

图2—38

　　“路径切割” 工具：该工具用于切割类如钢笔路径这样的矢量路径。使用时从要切割处按住鼠标左键移动划过。在切割处会增加一个控制点。使用“细部”工具移动一端就可以把线段分开了，如图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

　　对于非封闭路径，使用伸缩路径命令可以自动把路径改为封闭路径。

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度；

　　水平翻转——将对象以水平线为转轴，进行水平翻转；

　　垂直翻转——将对象以垂直线为转轴，进行垂直翻转。

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

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

　　若要停止某项特效时，只需将特效名称前的对勾取消即可。而要删除效果栏中的某项特效时，可点击“删除特效” 按钮。

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

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

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

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

　　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栏中输入宽、高度。此时，在图像的预览区中，图像四周会出现六个控制点，通过拖动这些控制点也可以设定图像的导出区域。

2、输出GIF动画

　　在“导出预览”窗口中导出GIF动画时，可以先在“选项”设置中的格式栏内选择“GIF动画”，然后对该动画进行相关的优化设置后点击“动画”选项卡，如图7—08。

图7—08（点击可放大观看）

　　帧的处置——在该选项卡的上面有个垃圾桶图标，可用于指定帧的处置方法；

　　帧的延迟——在该项上面有个时钟的图标，可设置被选中帧的延迟时间；

　　帧的播放次数——在“永久”下拉菜单中可以设置动画文件在导出保存为网页格式时的播放次数；

　　裁剪每个帧——可将动画中的每一帧都裁剪成一个矩形区域，只输出各帧之间不同的图像区域；

　　保存帧之间的差异——取消该项后，只会输出各帧之间有变化的图像；

　　各项设置完成后点击“导出预览”窗口右下角中的“导出”按钮，然后选择文件的保存格式及存放路径即可。

3、输出JPEG文件

　　由于JPEG格式的文件总是以24位颜色进行保存和输出，因此无法像GIF格式那样通过编辑其调色板进行优化。所以当选择输出JPEG格式的图像时，颜色表为空。如图7—09。

图7—09

　　品质——设置JPEG图像的输出品质。品质越高文件也就越大；

　　平滑——设置图像表面的光滑度；

　　渐进式浏览器显示——选择该项后，在浏览器上查看此图像时，将由模糊逐渐到清晰的方式来显示；

　　锐化颜色边缘——将强化图像色边缘的锐化值，使图像更加清晰。