网页设计与制作第12章矢量图形的编辑

1、第12章 矢量图形的编辑,第12章 矢量图像的编辑,学习目标： 通过本章的学习，要求掌握Fireworks的几个基本概念，熟练使用工具箱的使用，掌握绘制编辑路径对象的方法，熟练创建与编辑文本，创建文本路径。,第12章 矢量图像的编辑,12.1 Fireworks的几个基本概念 12.2 绘制路径对象 12.3 编辑路径对象 12.4 创建和编辑文本 12.5 路径文本,12.1 Fireworks的几个基本概念,1.Fireworks的对象 Fireworks 引入了对象的概念，对象就是图像中的一个独立的部分，我们把图像看成是由一个个的对象组成的。也可以把矢量对象和位图对象、文本块、切片和热点

2、以及像素区域都作为一个对象进行编辑，从而使对图像的编辑变成了对组成图像的对象的编辑，在具有多个对象的文档中，还可以通过对对象执行堆叠、组合和对齐操作来组织它们，即简化了编辑难度又提高了编辑效率。,12.1 Fireworks的几个基本概念,2.矢量图 也称为面向对象的图像或绘图图像，在数学上定义为一系列由线连接的点。例如，一片叶子是由一系列描述叶子轮廓的点连接起来构成了图像的形状，叶子的颜色由它的轮廓（即笔触）的颜色和该轮廓所包围的区域（即填充）的颜色决定。 编辑矢量图形时，您修改的是描述其形状的线条和曲线（包含颜色和位置信息）的属性。矢量图形与分辨率无关，对其调整大小、更改形状等操作，而不会

3、改变其外观品质，例如将叶子图像放大时，不会出现明显锯齿状现象，图像颜色也不会发生变化。但是矢量图并不适合用来记录色彩较为复杂的图像。,12.1 Fireworks的几个基本概念,3.位图 也称为点阵图像或绘制图像，是由无数个排列成网格的像素点组成。图像就是由网格中每个像素的位置和颜色值决定的。这些点可以进行不同的排列和染色以构成不同的图样。当放大位图时，可以看见构成整个图像的无数单个方块（像素点）。因为每个点被指定一种颜色，所以可以通过修改其中每一个像素的颜色而使图像的效果更逼真。 编辑位图图形时，是使这些像素点在网格中重新进行分布，例如缩小位图时，就是通过减少像素来使整个图像变小的，所以修改

4、位图图形通常会使图像的边缘呈锯齿状，或者降低图像的品质，如图12-1所示。,12.2 绘制路径对象,在Fireworks MX 2004中，有两种工作模式，一种上针对矢量编辑的对象模式，一种是对应位图编辑的位图模式，我们首先来学习在对象模式下，绘制、编辑各种图形。,12.2 绘制路径对象,12.2.1路径的概念 12.2.2绘制基本图形,12.2.1路径的概念,前面提到，矢量图是由一系列描述图形轮廓的点连接构成的，我们把这些表现在图形上的线条和轮廓就称为路径。每个路径至少有两个点以形成一条线段，路径可以是开放的（起点和终点不重合），也可以是封闭的（起点和终点重合在一起），如图12-2所示。,1

5、2.2.2 绘制基本图形,1.绘制基本形状 2.【钢笔】工具绘制路径 3.【矢量路径】工具,12.3 编辑路径对象,12.3.1描边和填充 12.3.2选取和移动路径对象 1. 【指针】工具 2.【选择后方对象】工具 3.【部分】选定工具 12.3.3 修改路径对象 1.利用【缩放】工具修改整个路径对象 2.调整节点 3.调整路径 12.3.4多个路径对象的操作 12.3.5对路径的其他操作,12.3.1描边和填充,利用笔触属性为矢量对象进行描边，突出路径的形状，利用填充属性为对象的内部着色，使对象成为实心对象。 用户可以通过【属性】面板或工具面板的颜色部分访问、修改笔触及填充选项。在Fire

6、works MX 2004中当用户选择了【钢笔】工具或其他可以应用该属性的工具时，属性面板上会自动出现各种笔触和填充的选项以供用户进行设置，如图12-7所示。,12.3.2 选取和移动路径对象,在Fireworks MX 2004的中利用【选取】类工具箱中的【指针】工具、【部分选定】工具，可以方便的选取路径对象或对象的部分控制点。,12.3.2 选取和移动路径对象,1.【指针】工具 2. 【选择后方对象】工具 3. 【部分】选定工具,12.3.3修改路径对象,我们知道矢量对象的形状主要是由路径的形状决定的，所以通过对路径的修改可以很有效地帮助编辑、修改矢量对象。修改可以是对整个路径也可以是对路

7、径中的某段进行，下面介绍几种主要方法：,12.3.3修改路径对象,1.利用【缩放】工具修改整个路径对象 2.调整节点 3.调整路径,12.3.4 多个路径对象的操作,当图像中存在多个路径对象时，我们可以同时对所有或部分对象进行整体操作，比如排列、对齐、组合等等，这些选项可以在【修改】菜单下找到。这里主要介绍多个路径对象的组合操作。 接合 拆分 联合 交集 打孔 裁切,12.3.5 对路径的其他操作,(1)简化路径，在不明显改变路径基本形状的前提下，将删除路径上不需要的点，简化路径的曲线形状。如图12-21所示，对原图不断简化后的效果。 (2)扩展笔触，就是以原始路径为中心向外形成一个形状与路径

8、相同的幻象。,12.4 创建和编辑文本,Fireworks MX 2004 提供了许多文本功能，不但可以创建不同风格的文本，也能设计出各种形式的文本图形，文本与路径的结合更是可以得到意想不到效果。其功能可与许多文字排版软件相媲美。,12.4 创建和编辑文本,12.4.1 创建文本 12.4.2编辑文本,12.4.1 创建文本,1.设置工具的属性 2.移动文本块,12.4.2 编辑文本,1.调整文本的间距和字符宽度 2.文本的方向 3.平滑文本边缘 4.设置文本的填充颜色 5.对文本的变形,12.5 路径文本,在Fireworks中不但可以对文本直接进行编辑，也可以将文本转换成路径以后再进行编辑，转换以后文本的编辑功能变的更加强大，例如转换成路径文本以后可以对其中某一个字符进行变形操作。,12.5 路径文本,在Fireworks中不但可以对文本直接进行编辑，也可以将文本转换成路径以后再进行编辑，转换以后文本的编辑功能变的更加强大，例如转换成路径文本以后可以对其中某一个字符进行变形操作。,12.5路