《网页设计与制作教程》-第十二章讲稿

第十二章矢量图的绘制与编辑Fireworks8提供了大量的矢量图绘制工具。使用矢量图绘制工具可以绘制基本形状、自由变形路径和复杂形状。Fireworks提供了绘制自动形状的功能，可以绘制多种自动形状，通过自动形状的控制点可以对其大小和弧度进行修改，绘制出各种特殊形状。Fireworks通常使用“直线”、“矩形”或“椭圆”工具来绘制基本形状，也可以使用“矩形”工具绘制多个矩形，并将它们组合在一起形成较复杂的形状。12.1位图、矢量图和路径的概念位图又称为点阵图像，即使用像素阵列来描述图像，一副位图图像是由若干个像素点组合的而成，每个像素点的颜色由RGB值来表示，因此位图的清晰度往往取决于单位面积内像素的个数多少。位图的大小也决定了图像尺寸的大小和分辨率的高低。描述位图的颜色数据位数越多，能够表达的颜色就越多，根据表示颜色的数据位数大小将位图分为8、16、24、32等多种位图格式。位图实际上就是由微观的若干个带有颜色的点组合成一副图像。位图以外的其他图像都属于矢量图，如：文本和路径。12.1位图、矢量图和路径的概念路径也称为轮廓线，是使用绘图工具创建的任意形状的直线段或曲线。路径分为开放路径和封闭路径。其中起点和终点不重合的为开放路径，起点和终点重合的为封闭路径。Fireworks中的矢量图是由若干线段构成的轮廓（可以将这些构成边框线段看成一个矢量），并在轮廓所定义的封闭区域内添加填充色形成的图像。Fireworks中矢量图主要参数有组成轮廓的线段、轮廓形成的外边框颜色和轮廓内的填充色。Fireworks对矢量图像的处理是通过特定的数学算法对矢量图边框线段进行计算，得到设计者所需的矢量图效果。矢量图主要由边框和填充颜色构成，因此，矢量图的文件一般都比较小，通过线段和填充色可以构成常用的图形，例如，点、线、矩形、多边形、圆和弧线等等。12.1位图、矢量图和路径的概念矢量图由若干个独立的元素构成，每个元素都是一个相对独立的对象，都具有颜色、形状、轮廓、大小和屏幕位置等属性。由于每个元素都是一个独立的对象，就可以在保持原有清晰度和弯曲度的同时，多次移动和改变它的属性，而不会影响图像中的其它元素。12.1位图、矢量图和路径的概念矢量图的最大优点是同分辨率无关，并且无论放大、缩小或旋转等不会失真，这意味着它们可以按最高分辨率显示到各种输出设备上。另外，矢量图与位图最大的最大区别是它不受分辨率的影响，因此在印刷时，可以任意放大或缩小图形而不会影响出图的清晰度。12.1位图、矢量图和路径的概念矢量图是由若干线段构成的边框线以及封闭边框线内的填充色构成，矢量图是一个完全使用计算机制作的图像，因此，更适合各种图像处理软件处理，可以对其进行各种变形处理，可以自由无限制的重新组合。12.1位图、矢量图和路径的概念矢量图主要具有以下特点：

矢量图放大和缩小后不会失真，不会影响到图像的分辨率。

矢量图文件占用空间小，并与分辨率无关，主要适合图形设计、文字设计和logo设计、版式设计等。

矢量图很难绘制出逼真度、细腻度很高的图像，主要应用于绘制对细节要求不高的图像，例如动画里的图像。12.2绘制基本图形Fireworks的基本图形包括矩形、椭圆、多边形。使用Fireworks绘制基本图形，选择工具箱的矩形工具，选择合适的基本图形工具。使用Fireworks编辑基本图形时，使用“部分选定”工具和“缩放”工具选中编辑图形，用鼠标拖拉控制点可以改变图形的形状。12.2绘制基本图形使用Fireworks绘制图形时按住“shift”键，可以绘制正方形和圆，点击shift+“矩形”工具绘制出的是正方形，点击shift+“椭圆”工具绘制出的是圆。【例12-1】绘制的基本图形如图12-1所示。

图12-1Fireworks基本图形12.3绘制自动形状使用Fireworks绘制“自动形状”时图形周围会出现图形对象控制手柄，使用“自动形状”可以绘制出常用的基本图形形状。Fireworks绘制不同“自动形状”时，可以根据每个控制点对自动形状的某个特定可视化属性进行控制和调整，操作时用鼠标拖动某个控制点就会改变与其关联的可视化属性。12.3绘制自动形状Fireworks提供了提示功能，使用“自动形状”控制点时都会显示相应的提示信息，说明每个控制点的基本功能。控制点与Alt键结合可以对自动形状的某一个局部位置的形状进行调节，【例12-2】使用自动图形绘制的图形如图12-2所示。

图12-2Fireworks绘制自动图形

12.4绘制矢量路径Fireworks中的矢量路径就是线条或轮廓，即图形的边界或边框，路径上分布着若干个控制点，可以通过控制点改变路径的形状、大小。使用铅笔和基本图形都可以制作矢量路径，通过修改路径的形状和大小，使其达到设计要求，在路径里添加填充色就可以得到最终的图像。

12.4.1设置笔触（描边）和填充属性笔触就是轮廓线的颜色，可以通过属性面板进行设置，填充属性就是在一个封闭区域或半封闭区域中填充物的属性。

12.4.1设置笔触（描边）和填充属性设置笔触

在Fireworks中可以设置笔触的颜色、纹理、形状和透明度等。

设置笔触属性，在Fireworks的“工具箱”中选择笔触调色板，然后选择笔触调色板右下角的三角编辑笔触颜色。选择笔触调色板后可以打开属性面板对笔触的其它属性进行修改。若要对笔触进行更细的编辑，可以选中一个具体的矢量路径绘制工具，在属性面板里对相关属性进行修改。如图12-3所示，对矩形工具的属性进行修改，可以对笔触的颜色、大小、纹理等属性进行修改。

图12-3修改工具笔触属性

12.4.1设置笔触（描边）和填充属性设置填充属性

在Fireworks使用矩形、圆角矩形、椭圆形工具绘图时，可以随时改变对象的填充属性，也可以绘制出固体填充、渐变填充或是图案填充的对象。在工具箱中选中填充调色板，在填充调色板上选择绘图工具的填充颜色。12.4.1设置笔触（描边）和填充属性设置填充属性

Fireworks还提供了常用的渐变填充效果和图案填充效果。对于已经存在的对象也可以对其填充效果进行修改，选择合适的填充色和填充效果后，使用油漆桶工具对指定区域内的填充色进行修改。但是，使用铅笔和钢笔工具绘制的对象是没有填充的，但是在用铅笔和钢笔工具绘制完图形之后，可以使用油漆桶工具对绘制的图形进行填充。12.4.1设置笔触（描边）和填充属性设置填充属性

Fireworks可以对具体的矢量路径工具的填充属性进行定义，选择具体的路径绘制工具，在属性面板中进行修改。如图12-4所示，选中星形工具，在属性面板里对填充色、填充效果和填充纹理等进行修改。

图12-4设置填充属性

12.4.2绘制基本图形使用Fireworks工具箱中的矩形工具、椭圆工具、多边形工具、圆角矩形和斜切矩形等基本图形工具可以绘制矩形、圆、星形等常用几何图形。12.4.2绘制基本图形绘制基本图形

基本图形的绘制方法，在工具箱中选择要绘制的基本图形，在工作区选择绘制图形的起点，拖拉鼠标绘制出需要的图形，如图12-5所示。也可以在属性面板里对所添加的基本图形的属性进行修改。

图12-5绘制基本图形12.4.2绘制基本图形绘制圆角、斜切矩形

圆角、斜切矩形的绘制方法，在工具箱中选择要绘制的圆角或斜切矩形，在工作区选择绘制图形的起点，拖拉鼠标绘制出需要的图形，如图12-6所示，可以使用圆角或斜切矩形边角上的黄色菱形控制点来调节圆角矩形的边角的弧度和斜切矩形倒角的大小。也可以在属性面板里对所添加的圆角矩形和斜切矩形的属性进行修改。

图12-6绘制圆角、斜切矩形12.4.2绘制基本图形绘制饼图和环形图

饼图和环形图的绘制方法，在工具箱中选择要绘制的饼图和环形图，在工作区选择绘制图形的起点，拖拉鼠标绘制出需要的图形,【例12-3】如图12-7所示，可以使用饼图和环形图上的黄色菱形控制点来调节自动图形的大小、形状或对饼图和环形图进行分割等操作。也可以在属性面板里对所添加的饼图和环形图的属性进行修改。

图12-7绘制自动图形

12.4.2绘制基本图形绘制自动形状对象

Fireworks提供了常用的网页设计图形，绘制自动形状时，选择主菜单的【窗口】→【自动形状】，在右侧功能面板出现【资源面板】→【自动形状】，选择需要的形状，点击鼠标左键将其拖曳到工作区中，通过自动形状的控制点来修改图形的效果【例12-4】，如图12-8所示。也可以在属性面板里对所加的自动形状的属性进行修改。

图12-8绘制自动形状12.4.3绘制自由形状路径使用Fireworks工具箱中的矢量绘图工具中的“直线”工具、“钢笔”工具、“矢量路径”工具可以绘制出自由形状路径。可以使用“直线”工具和“钢笔”工具来绘制自由形状路径，使用“部分选定”工具、“缩放”工具和“自由变形”工具来调整。

12.4.3绘制自由形状路径使用“直线”工具绘制矢量路径时，按住“shift”键将会得到一条平滑的直线。

“钢笔”工具绘制的矢量路径是“贝赛尔曲线”，使用“钢笔”工具可以绘制任意复杂的路径，通过路径上的节点（锚点）来描述图形的基本轮廓。12.4.3绘制自由形状路径钢笔工具绘制的图形可以是开放式的也可以是封闭式的，在用钢笔绘制开放式路径时，当绘制完需要的路径后将鼠标移到终点，鼠标图标变成时双击鼠标结束自由路径绘制。当绘制封闭式自由路径时，将鼠标移动到路径的起点，当鼠标图标变成时单击鼠标结束封闭式路径绘制。12.4.3绘制自由形状路径使用Fireworks“钢笔”工具绘制自由路径时，可以通过控制节点来绘制弯曲的曲线，在绘制曲线上有两种节点“平滑点”（“曲点”）和“角点”，如图12-9所示。“平滑点”是指节点周围是平滑曲线，当调节平滑点的控制柄时，平滑节点的两侧的曲线都随之改变。“角点”是指它两侧线段方向发生急剧变化形成尖锐的路径，当移动角点的控制柄时，只调整与方向线同侧的曲线段弧度。绘制完所需的路径后，可以使用指针工具和部分选择工具对路径的细节进行调整。

图12-9自由路径中两种节点

12.5编辑矢量路径矢量路径是图形的边界和轮廓，Fireworks绘制完路径后可以对其进行调整，通过调整节点位置可以改变路径形状，通过调整控制柄可以调整各段弧线的弧度，使用路径修改工具可以添加节点，修改和重画部分路径。12.5.1选取路径对象修改路径之前首先使用“选择”工具选中需要修改的路径，然后再对其进行修改。可以使用“指针”工具、“部分选定”工具和“缩放”工具，选定需要修改的路径对象。选择路径时点击“菜单栏”中的【选择】→【全选】，选中工作区的所有对象，也可以使用快捷键“ctrl”+“A”。12.5.1选取路径对象取消选择时【选择】→【取消选择】，也可使用快捷键“ctrl”+“D”。也可以在层面板中单击选取所需图层。当选择多个矢量路径时，按住shift键然后选择所有要选中的路径。

12.5.2移动路径对象移动路径对象可以使用“指针”工具和部分选定工具单击并拖动需移动的路径，将其拖动到指定的位置。Fireworks提供了微调路径的功能，首先选中需要移动的路径对象，然后点击相应的方向键，被移动路径对象将1个像素为单位进行移动。如果在使用方向键的时候按住“shift”键，被移动的路径对象将以10个像素的增量移动。12.5.2移动路径对象移动矢量路径也可以在“属性面板”中改变X和Y的值，被移动的路径就会定位到新的坐标点。也可以使用功能面板里的“信息”面板实现对矢量路径的移动，在“菜单栏”点击【窗口】→【信息】，弹出信息面板，如图12-10所示，在弹出的信息面板中更改图像的X，Y坐标值，被移动路径将显示在新的坐标位置上。

图12-10移动信息面板

12.5.3编辑路径对象复制、粘贴和剪切

可以在选定对象后在“菜单栏”中进行复制、剪切和粘贴操作，也可以在“工具栏”中选择相关的复制、剪切和粘贴按钮，粘贴后的图层会叠加在原图层上。可以按住“Alt”键然后拖动对象，在鼠标松开的地方将出现被复制对象。粘贴时可以只粘贴对象的属性，使用部分选定工具，选中被复制对象并复制，然后选中目标对象点击【编辑】→【粘贴属性】。12.5.3编辑路径对象复制、粘贴和剪切

剪切路径对象时，选择【编辑】→【剪切】，对应的快捷键为“Ctrl+X”,将鼠标定位到路径对象新的位置，然后点击【编辑】→【粘贴】，对应的快捷键为“Ctrl+V”。

要删除路径对象，首先选中要删除的路径对象，然后点击【编辑】→【删除】，或者选中对象后点击“Delete”键删除路径对象。

12.5.3编辑路径对象复制、粘贴和剪切

克隆和重制对象

Fireworks对复制对象的功能进行了细分，复制/粘贴功能可以在多个Fireworks文件中进行复制/粘贴操作，而克隆和重制功能只能在同一个工作区内复制对象。进行克隆和重制操作时，首先选中要克隆或重制的对象然后【编辑】→【克隆】或【重制】。12.5.3编辑路径对象复制、粘贴和剪切

克隆和重制的主要区别是：对路径进行“重制”时会在距选中对象10个像素的位置出现一个对象副本，而“克隆”后的路径对象与原路径对象重合，因此克隆后必须移动才能看到被克隆的对象。另外，可以同时选择多个路径对象，按下“shift”键，用鼠标点击多个路径对象，然后同时“重制”和“克隆”这些对象。12.6修改矢量路径矢量路径的修改和编辑是绘制矢量图的基础，通过对绘制的矢量路径的修改达到设计需求。矢量路径的修改方法主要包括矢量路径的缩放，矢量路径的变形和矢量路径的切割等。对合格的矢量路径进行描边和填充就获得了最终的矢量图。12.6.1矢量路径的变形使用Fireworks工具箱里的“变形”工具可以对矢量路径的形状进行调整，可以对矢量路径进行大小、翻转和扭曲处理。12.6.1矢量路径的变形矢量路径的缩放使用工具箱里的“变形”工具，对矢量路径的大小进行修改。在工作区选中要调整大小的矢量路径对象，然后点击“缩放”工具，看到如图12-11所示的修改界面，点击调整控制点对矢量路径的大小形状进行修改。也可以选择“菜单栏”中的【修改】→【变形】→【缩放】来实现矢量路径的修改，还可以使用快捷键“Ctrl”+“T”。

图12-11矢量路径的缩放12.6.1矢量路径的变形对矢量路径的形状进行修改时，可以拖动变形框上的控制柄对矢量路径进行调整。如果要同时对水平和垂直方向的路径进行缩放，可以拖动四个角的控制柄，如果在缩放时按住“shift”键，则可以约束路径的长和宽的比例；如果在水平方向或垂直方向缩放矢量路径时，可以拖动四个边上的控制柄；如果以路径中心为参考点对路径进行放大或缩小，可以先按住“Alt”键，然后在调整路径的大小。

12.6.1矢量路径的变形对象的倾斜和扭曲

使用工具箱里的“变形”工具，对矢量路径进行倾斜或扭曲处理。选中要倾斜或扭曲的矢量路径对象，然后点击“倾斜”工具或“扭曲”工具，如图12-12所示为矢量路径倾斜修改界面，如图12-13所示为矢量路径扭曲的修改界面。在修改时可以点击调整控制点对矢量路径进行倾斜或扭曲处理。也可以选择“菜单栏”中的【修改】→【变形】→【倾斜】或【扭曲】来实现矢量路径的倾斜或扭曲。倾斜矢量路径，可以沿水平轴、垂直轴或同时沿两个轴倾斜进行。使用“扭曲”工具拖动控制柄可以更改对象的大小和比例。

图12-12矢量路径倾斜图12-13矢量路径的扭曲12.6.1矢量路径的变形翻转和旋转

使用Fireworks的变形工具可以实现矢量路径的翻转和旋转。

实现矢量路径翻转的方法是：首先选中要翻转的矢量路径，然后选择“菜单栏”中【修改】→【变形】→【水平翻转】或【垂直翻转】。实现旋转矢量路径的方法是：首先选中要旋转的矢量路径，然后选择“菜单栏”中【修改】→【变形】→【旋转180°】或【旋转90°，顺时针】或【旋转90°，逆时针】。旋转也可以使用快捷键“ctrl”+“T”，按住“shift”键并拖动鼠标可将旋转限制为相对于水平方向15°的增量。12.6.1矢量路径的变形矢量路径旋转和翻转也可以使用“缩放”工具来实现，如图12-14所示。选中要旋转或翻转的路径对象，然后选择“缩放”工具，将显示出来的路径缩放框的“中心点”移动到合适的位置，然后将鼠标移动到缩放框的外面，鼠标变成图标时旋转路径到指定角度。图12-14使用“缩放”工具实现路径的旋转和翻转12.6.1矢量路径的变形翻转路径时用鼠标拖曳一个控制点，以路径中心点为参考中心，向另一侧对称点拖拉鼠标，路径就发生了翻转。在处理翻转之前必须要重新设置路径中心点的位置，矢量路径在旋转时是围绕“中心点”进行的。可以根据需要改变“中心点”的位置，用鼠标直接拖动“中心点”到目标位置即可，双击可还原其位置。

12.6.1矢量路径的变形Fireworks提供了精确变形的功能，通过具体的数值实现路径的精确变形。对矢量路径数值变形时首先选中路径，然后在“菜单栏”中选择【修改】→【变形】→【数值变形】，在弹出的“数值变形”对话框中调整对象，如图12-15所示。

图12-15数值变形

12.6.2矢量路径的调整Fireworks中绘制的矢量图形对象是矢量图的轮廓和边界，所以编辑路径是绘制矢量图的关键，矢量路径就是矢量图的结构。

自由变形工具

12.6.2矢量路径的调整Fireworks提供的“自由变形”工具可以对路径进行任意的拖拉和挤压，使路径设计变得非常灵活。自由变形工具不需要路径上的控制柄就可以实现路径的自由变形。使用自由变形工具时，首先要选中被编辑的路径对象，然后选择工具箱中的“自由变形”工具，拖动鼠标对路径对象中需要编辑的位置进行编辑。

12.6.2矢量路径的调整“自由变形”工具的编辑状态有两种：拉伸型和挤压型，如图12-16所示，【例12-5】使用拉伸型和挤压型工具对图形进行编辑。在进行自由变形时可以使用左/右方向键或数字1/2键对自由变形工具的笔触进行缩小/放大。使用属性面板也可以对自由变形工具的属性进行修改。

图12-16路径的自由变形

12.6.2矢量路径的调整更改区域形状工具

Fireworks工具箱中的“更改区域形状”工具可以对局部区域的路径进行修改。首先选中被编辑的矢量路径，然后点击工具箱中的“更改区域形状”工具，鼠标的图标变成“两个同心圆”，在同心圆区域的矢量路径跟随鼠标发生移动，实现对局部区域的路径的修改，如图12-17所示。图12-17更改区域形状工具12.6.2矢量路径的调整更改区域形状工具矢量路径发生明显改变的是小圆区域内的路径，大圆区域的路径有微小变化，在进行区域形状改变时可以使用左/右方向键或数字1/2键对工具的笔触进行缩小/放大。使用属性面板也可以对“更改区域形状”工具的属性进行修改。

12.6.2矢量路径的调整直接调整路径

使用钢笔工具可以直接调整矢量路径上的具体节点，实现对路径形状的调整。使用“局部选定”工具选择需要编辑的矢量路径对象，然后选择工具箱中的“钢笔”工具，使用钢笔工具在要修改区域的节点上点击，就会显示该节点的控制柄，通过控制柄来修改矢量路径的形状，如图12-18所示。

图12-18钢笔工具调整路径

12.6.2矢量路径的调整刷新路径

Fireworks重绘路径工具可以对路径进行局部的重绘。重绘路径时首先使用部分选定工具选择要编辑的矢量路径对象，然后选择工具箱中的“重绘路径”工具，在需要重绘的路径起始位置点击鼠标，然后绘制新的路径，一直拖动鼠标到需要重绘路径的终止位置，原路径中被重绘的局部路径会显示为红色。松开鼠标时新的路径代替被重绘的红色路径，如图12-19所示。

图12-19重绘路径12.6.2矢量路径的调整切割路径

使用Fireworks工具箱中的“刀子”工具可以分割整条路径为多个部分。使用“刀子”工具切割时首先使用“部分选定”工具选中要切割的矢量路径对象，然在分割位置上与路径交叉方向拖曳鼠标，这样就将完整的路径分割成两部分，根据需要继续对路径进行切分，如图12-20所示，使用“部分选定”工具可以将切割后的路径分离。另外，使用“钢笔”工具可以将断开的路径重新连接在一起。使用“钢笔”工具依次单击要进行连接的两个节点，就可以将两个路径连接起来。

图12-20切割路径

12.6.3矢量路径的组合将几个独立的矢量路径进行组合可以得到一些特殊的矢量路径，通过这种方法可以建立任意不规则形状的路径。

12.6.3矢量路径的组合路径的组合

Fireworks使用路径组合可以将多个路径组合在一起，形成特殊效果的路径。在对多个路径组合时，首先使用“部分选定”工具选择组合的路径，按住shift键的同时，用鼠标选择多个参与组合的路径，然后点击“菜单栏”中【修改】→【组合】。同时也可以将已经组合的路径打散，使用“部分选定”工具选中路径对象，然后点击“菜单栏”中【修改】→【取消组合】，如图12-21所示。图12-21矢量路径的组合12.6.3矢量路径的组合路径的组合

Fireworks可以实现两个路径的点与点相连，使用“部分选定”工具选择一个路径上的点，然后按住shift键选择另外一条路径上的一个点，点击菜单栏中【修改】→【组合路径】→【接合】，可以将两个路径的点连起来。

12.6.3矢量路径的组合修改层叠路径形状

Fireworks路径组合工具提供了打孔、裁切、联接和交集的功能，可以对组合的路径交汇区域进行处理。在处理路径重叠区域时应先重新定位多个路径对象的前后关系。Fireworks中层叠对象功能可以改变多个对象的重叠顺序。对路径对象修改层叠顺序时，首先选中路径对象，点击“菜单栏”中【修改】→【排列】→【移到最前】或【上移一层】或【移到最后】，可以改变矢量路径的层次关系。12.6.3矢量路径的组合修改层叠路径形状

当两个或两个以上的路径相互有重叠时，如果要保留多个路径的重叠部分的路径，就对路径进行裁切或交集操作，如果要保留两个路径之间的交汇部分，可以使用裁切或交集操作，两个路径的交汇部分保留，两个路径其余不交汇部分将被清除。即两个路径时，裁切和交集功能是完全一样的。12.6.3矢量路径的组合修改层叠路径形状

但当三个以上路径时裁切与交集是有明显区别的，交集是保留所有路径的公共部分，而裁切是保留最上层路径分别与其它所有路径的公共部分。区别如图12-22所示，红色区域代表的是三层路径重叠时，对路径作交集时的最终路径，绿色区域代表的是三层路径重叠时，对路径作裁切时的最终结果。

图12-22路径组合中的交集与裁切12.6.3矢量路径的组合修改层叠路径形状

Fireworks可以实现两个或两个以上路径的打孔处理，路径打孔处理的过程是：将两个或两个以上重叠的路径重新排序，需要打孔的路径放在后面，首先选中后面的需要打孔的路径，并按住shift键，然后选中前面的路径，最后选最前面的路径，点击“菜单栏”中【修改】→【组合路径】→【打孔】，最前面的路径分别与后面路径交汇部分将在后面路径里挖出一个缺口，所有后面路径未与最前面路径交汇部分保留，最前面路径完全消失，如图12-23所示，红色路径部分是最终的结果。

图12-23路径组合中的打孔

12.6.3矢量路径的组合矢量路径的对齐与扩展

Fireworks可以将多个不同的路径对象按要求对齐。首先选中要对