网页设计与制作 第7章 矢量图的绘制与编辑.ppt

1、第7章 矢量图的绘制与编辑,第7章 矢量图的绘制与编辑,7.1 位图、矢量图和路径的概念 7.2 绘制基本图形 7.3 绘制自动形状 7.4 绘制矢量路径 7.5 编辑矢量路径 7.6 修改矢量路径 7.7 本章小结,Fireworks的一个很大的优势就在于它将位图处理和矢量处理合二为一。它综合了许多图形处理软件的优点。本章将着重介绍Fireworks 8中创建与编辑矢量路径对象的操作技巧，如对象描边、填充等属性设置以及分离对象的操作，以便让网页设计者拥有更多的创作空间。,7.1 位图、矢量图和路径的概念,位图图形由排列在网格中的点组成，这些点被称为“像素”。 编辑位图图形时，修改的是像素，而

2、不是线条和曲线。 位图图形与分辨率有关，这意味着描述图像的数据被固定到一个特定大小的网格中。放大位图图形将使这些像素在网格中重新进行分布，这通常会使图像的边缘呈锯齿状。,7.1.1 位图,7.1 位图、矢量图和路径的概念,7.1.1 位图,7.1 位图、矢量图和路径的概念,矢量图形使用称为“矢量”的线条和曲线（包含颜色和位置信息）呈现图像。 编辑矢量图形时，修改的是描述其形状的线条和曲线的属性。 矢量图形与分辨率无关，这意味着除了可以在分辨率不同的输出设备上显示它以外，还可以对其执行移动、调整大小、更改形状或更改颜色等操作，而不会改变其外观品质。,7.1.2 矢量图,7.1 位图、矢量图和路径

3、的概念,7.1.2 矢量图,7.1 位图、矢量图和路径的概念,路径是一条与很多点有关联的线条，表现在图形上就是线条和轮廓。之所以称为矢量路径对象，是因为该对象的形状主要是由路径的形状决定的，并且用户可以对该对象进行自由整形和变形。 在Fireworks中路径分为三种： （1）开放路径：即路径的起点和终点不重合，如直线； （2）闭合路径：即路径是连续的，没有终点和起始点，如圆形； （3）复合路径：即由两个或多个路径组成的路径。,7.1.3 路径,7.2 绘制基本图形,从“工具”面板中选择“直线”工具 。然后在画布上拖动到合适的位置后松开鼠标，屏幕上将会出现一条连接两点的直线，如图7-3所示。,7

4、.2.1 绘制直线,7.2 绘制基本图形,单击“工具”面板中的“矩形”工具 ，在画布上选择要绘制图形的起点位置，按下鼠标左键不放，然后拖动鼠标到合适位置，松开鼠标即绘制了一个矩形，如图7-4所示。,7.2.2 绘制矩形,7.2 绘制基本图形,单击“工具”面板中的“矩形”工具 按钮右下角的小三角形，在弹出的菜单中选择“椭圆” 工具，在画布上选择要绘制图形的起点位置，按下鼠标左键不放，然后拖动鼠标到合适位置，松开鼠标即绘制了一个椭圆，如图7-5所示。,7.2.3 绘制椭圆,7.2 绘制基本图形,单击“工具”面板中的“矩形”工具 按钮右下角的小三角形，在弹出的菜单中选择“多边形”工具 ，在当前的“属

5、性”检查器上设置将要绘制图形的边数，在“边”文本框中设置多边形的边数，可以是325的任意一个整数。默认边数为5，即为五边形，如图7-6所示。,7.2.4 绘制三角形及其他多边形,7.2 绘制基本图形,然后在画布上选择要绘制图形的起点位置，按下鼠标左键不放，然后拖动鼠标到合适位置，松开鼠标即绘制了一个多边形，如图7-7所示的三角形和多边形。,7.2.4 绘制三角形及其他多边形,7.2 绘制基本图形,（1）单击“工具”面板中的“矩形”工具按钮右下角的小三角形，在弹出的菜单中选择“多边形”工具， （2）在当前的“属性”检查器的“形状”下拉列表框中选择“星形”选项，如图7-8所示。,7.2.5 绘制星

6、形,（3）在“边”文本框中设置星形的顶点数，设置范围为3360。滑杆只能调整到25，要想设置25个以上的顶点，直接在文本框内输入数字即可。,7.2 绘制基本图形,（4）在“角度”文本框中设置星形尖角的度数，选择“自动”复选框或输入一个值。接近 0 的值产生的角长而细；接近 100 的值产生的角短而粗。 （5）在画布上拖动鼠标，绘制星形。 如图7-9所示为具有不同形状、不同角度的六边形。,7.2.5 绘制星形,7.3 绘制自动形状,单击“工具”面板中的“矩形”工具 按钮右下角的小三角形，在弹出的菜单中选择自动形状对象组的“箭头”工具 ，在画布上选择要绘制图形的起点位置，按下鼠标左键不放，然后拖动

7、鼠标到合适位置，松开鼠标即绘制了一个任意比例的普通箭头形状。按照此方法可以绘制多个箭头，并使用鼠标拖动箭头上的控制点调整箭头的锥度、尾部的长度和宽度以及箭尖的长度，如图7-12所示。,7.3.1 绘制箭头,7.3 绘制自动形状,7.3.1 绘制箭头,7.3 绘制自动形状,单击“工具”面板中的“矩形”工具 按钮右下角的小三角形，在弹出的菜单中选择自动形状对象组的“斜切矩形”工具 ，在画布上选择要绘制图形的起点位置，按下鼠标左键不放，然后拖动鼠标到合适位置，松开鼠标即绘制了一个带有切角的矩形形状。按照此方法可以绘制多个斜切矩形，并使用控制点可以同时编辑所有边角的斜切量，或者更改个别边角的斜切量，如

8、图7-13所示。,7.3.2 绘制斜切矩形,7.3 绘制自动形状,7.3.2 绘制斜切矩形,7.3 绘制自动形状,单击“工具”面板中的“矩形”工具 按钮右下角的小三角形，在弹出的菜单中选择自动形状对象组的“斜面矩形”工具 ，在画布上选择要绘制图形的起点位置，按下鼠标左键不放，然后拖动鼠标到合适位置，松开鼠标即绘制了一个带有倒角的斜面矩形（边角在矩形内部成圆形）。按照此方法可以绘制多个斜面矩形，可以同时编辑所有边角的倒角半径，或者更改个别边角的倒角半径，如图7-14所示。,7.3.3 绘制斜面矩形,7.3 绘制自动形状,7.3.3 绘制斜面矩形,7.3 绘制自动形状,单击“工具”面板中的“矩形”

9、工具 按钮右下角的小三角形，在弹出的菜单中选择自动形状对象组的“连接线形” 工具，在画布上选择要绘制图形的起点位置，按下鼠标左键不放，然后拖动鼠标到合适位置，松开鼠标即绘制了一个显示为三段的连接线形。按照此方法可以绘制多个连接线形，使用控制点可以编辑连接线形的第一和第三段的端点，以及编辑用于连接第一和第三段的第二段的位置，如图7-15所示。,7.3.4 绘制连接线形,7.3 绘制自动形状,7.3.4 绘制连接线形,7.3 绘制自动形状,单击“工具”面板中的“矩形”工具 按钮右下角的小三角形，在弹出的菜单中选择自动形状对象组的“面圈形”工具 ，在画布上选择要绘制图形的起点位置，按下鼠标左键不放，

10、然后拖动鼠标到合适位置，松开鼠标即绘制了一个实心圆环形状。按照此方法可以绘制多个面圈形，使用控制点可以调整内环的周长或将圆环形状拆分为几个部分，如图7-16所示。,7.3.5 绘制面圈形,7.3 绘制自动形状,7.3.5 绘制面圈形,7.3 绘制自动形状,单击“工具”面板中的“矩形”工具 按钮右下角的小三角形，在弹出的菜单中选择自动形状对象组的“L形”工具 ，在画布上选择要绘制图形的起点位置，按下鼠标左键不放，然后拖动鼠标到合适位置，松开鼠标即绘制了一个直边角形状。按照此方法可以绘制多个L形，使用控制点可以编辑水平和垂直部分的长度和宽度以及边角的曲率，如图7-17所示。,7.3.6 绘制L形,

11、7.3 绘制自动形状,7.3.6 绘制L形,7.3 绘制自动形状,单击“工具”面板中的“矩形”工具 按钮右下角的小三角形，在弹出的菜单中选择自动形状对象组的“饼形”工具 ，在画布上选择要绘制图形的起点位置，按下鼠标左键不放，然后拖动鼠标到合适位置，松开鼠标即绘制了一个饼图形状。按照此方法可以绘制多个饼形，使用控制点可以将饼图形状拆分为几个部分，如图7-18所示。,7.3.7 绘制饼形,7.3 绘制自动形状,7.3.7 绘制饼形,7.3 绘制自动形状,单击“工具”面板中的“矩形”工具 按钮右下角的小三角形，在弹出的菜单中选择自动形状对象组的“智能多边形”工具 ，在画布上选择要绘制图形的起点位置，

12、按下鼠标左键不放，然后拖动鼠标到合适位置，松开鼠标即绘制了一个具有 3 到 25 条边的正多边形形状。按照此方法可以绘制多个智能多边形，使用控制点可以调整大小和旋转、添加或删除线段、增加或减少边数，或者向图形中添加内侧多边形，如图7-19所示。,7.3.8 绘制智能多边形,7.3 绘制自动形状,7.3.8 绘制智能多边形,7.3 绘制自动形状,单击“工具”面板中的“矩形”工具 按钮右下角的小三角形，在弹出的菜单中选择自动形状对象组的“圆角矩形”工具 ，在画布上选择要绘制图形的起点位置，按下鼠标左键不放，然后拖动鼠标到合适位置，松开鼠标即绘制了一个带有圆角的矩形形状。按照此方法可以绘制多个圆角矩

13、形，使用控制点可以同时编辑所有边角的圆度，或者更改个别边角的圆度，如图7-20所示。,7.3.9 绘制圆角矩形,7.3 绘制自动形状,7.3.9 绘制圆角矩形,7.3 绘制自动形状,单击“工具”面板中的“矩形”工具 按钮右下角的小三角形，在弹出的菜单中选择自动形状对象组的“螺旋形”工具 ，在画布上选择要绘制图形的起点位置，按下鼠标左键不放，然后拖动鼠标到合适位置，松开鼠标即绘制了一个开口式螺旋形形状。按照此方法可以绘制多个螺旋形，使用控制点可以编辑螺旋的圈数，并可以决定螺旋形是开口的还是闭合的，如图7-21所示。,7.3.10 绘制螺旋形,7.3 绘制自动形状,7.3.10 绘制螺旋形,7.3

14、 绘制自动形状,单击“工具”面板中的“矩形”工具 按钮右下角的小三角形，在弹出的菜单中选择自动形状对象组的“星形”工具 ，在画布上选择要绘制图形的起点位置，按下鼠标左键不放，然后拖动鼠标到合适位置，松开鼠标即绘制了一个星形形状（顶点数在 3 到 25 之间）。按照此方法可以绘制多个星形，。使用控制点可以添加或删除顶点，并可以调整各顶点的内角和外角，如图7-22所示。,7.3.11 绘制星形,7.3 绘制自动形状,7.3.11 绘制星形,7.4 绘制矢量路径,绘制路径就是使用绘图工具创建贝塞尔曲线。贝塞尔曲线的定义有四个控制点：起始点、终止点（也称锚点）以及两个相互分离的中间点称为方向点，锚定和

15、方向点间通过方向线相连。由锚点、方向点构成的曲线称为贝塞尔曲线，如图7-23所示。,7.4 绘制矢量路径,笔触（描边）附在路径上，突出路径的形状或使对象具有轮廓。而填充则处于路径内部，使其为实心对象。 单击“工具”面板或混色器中的“交换颜色”按钮，可以交换笔触和填充颜色，使“笔触颜色”或“填充颜色”框变为活动状态，如图7-24所示。,7.4.1 设置笔触和填充属性,7.4 绘制矢量路径,7.4.1 设置笔触和填充属性,7.4 绘制矢量路径,1设置笔触属性 铅笔图标 表示“工具”面板、“属性”检查器和“混色器”面板中的“笔触颜色”框。 （1）设置笔触颜色 （2）设置内置笔触类别 （3）设置笔触纹

16、理 （4）设置笔触选项,7.4.1 设置笔触和填充属性,7.4 绘制矢量路径,2设置填充属性 颜料桶图标 表示“工具”面板、“属性”检查器和混色器面板中的“填充颜色”框。 （1）设置实心填充 （2）设置渐变填充 （3）设置填充边缘 （4）设置填充纹理,7.4.1 设置笔触和填充属性,7.4 绘制矢量路径,1使用钢笔工具绘制矢量路径 （1）绘制直线 （2）绘制曲线 2使用矢量路径工具绘制矢量路径 3使用重绘路径工具绘制矢量路径,7.4.2 绘制矢量路径,7.5 编辑矢量路径,1选取工具 Fireworks 8提供了两类三种选取工具，它们都位于“工具”面板的上方的“选择”工具区域，如图7-44所示

17、。,7.5.1 选取路径对象,7.5 编辑矢量路径,2. 选取单个路径对象 (1)选择“工具”面板的“指针”工具。 (2)将鼠标移到要选取的路径对象上。此时的路径以红色高亮显示时，同时控制点呈高亮显示。 (3)单击鼠标即可选取该路径对象，被选取对象的路径即呈蓝色高亮显示状态，如图7-45所示。,7.5.1 选取路径对象,7.5 编辑矢量路径,7.5.1 选取路径对象,7.5 编辑矢量路径,3. 选取多个路径对象 选取多个路径对象，首先选择“工具”面板“选择”部分的“指针”工具 ，然后可以采用以下两种方法之一进行操作。 先选取其中一个对象，然后按住Shift键，连续单击其它多个对象；或者按住Sh

18、ift键在“层”面板中单击要选取的对象，所有对象便都处于选中状态如图7-46(b)所示。 用“指针”工具拖出一个矩形选框，将所有要选取的对象都框住(不一定要将整个对象围住)，释放鼠标后，选框内的所有对象便都处于选中状态如图7-46(b)所示。,7.5.1 选取路径对象,7.5 编辑矢量路径,7.5.1 选取路径对象,7.5 编辑矢量路径,4. 选取被遮挡的路径对象 要选取某个被遮挡的路径对象，可按如下步骤进行： （1）选择“工具”面板“选择”部分的“选取后方对象”工具 ，此时鼠标变成一个空心箭头，而且右下角有一个“”符号。 （2）将鼠标移动到被遮挡对象的上层对象上，然后单击直到出现想要选择的对象，并将鼠标移动到想要选择的对象上，此时该对象路径上的点高亮显示，默认情况下路径控制点显示为红色。 （3）单击鼠标即可选取被遮挡的路径对象，如图7-47所示。,7.5.1 选取路径对象,7.5 编辑矢量路径,7.5.1 选取路径对象,7.5 编辑矢量路径,1用鼠标拖拽对象