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

《网页设计与制作第12章矢量图形的编辑.ppt》由会员分享，可在线阅读，更多相关《网页设计与制作第12章矢量图形的编辑.ppt（26页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、网页设计与制作第网页设计与制作第12章矢量图形的编辑章矢量图形的编辑第12章 矢量图像的编辑学习目标：学习目标：通过本章的学习，要求掌握通过本章的学习，要求掌握Fireworks的几个基本概念，熟练使用的几个基本概念，熟练使用工具箱的使用，掌握绘制编辑路径对象工具箱的使用，掌握绘制编辑路径对象的方法，熟练创建与编辑文本，创建文的方法，熟练创建与编辑文本，创建文本路径。本路径。第12章 矢量图像的编辑12.1 Fireworks的几个基本概念的几个基本概念12.2 绘制路径对象绘制路径对象12.3 编辑路径对象编辑路径对象12.4 创建和编辑文本创建和编辑文本12.5 路径文本路径文本12.1

2、Fireworks的几个基本概念1.Fireworks的对象的对象 Fireworks 引入了对象的概念，对象就引入了对象的概念，对象就是图像中的一个独立的部分，我们把图像看是图像中的一个独立的部分，我们把图像看成是由一个个的对象组成的。也可以把矢量成是由一个个的对象组成的。也可以把矢量对象和位图对象、文本块、切片和热点以及对象和位图对象、文本块、切片和热点以及像素区域都作为一个对象进行编辑，从而使像素区域都作为一个对象进行编辑，从而使对图像的编辑变成了对组成图像的对象的编对图像的编辑变成了对组成图像的对象的编辑，在具有多个对象的文档中，还可以通过辑，在具有多个对象的文档中，还可以通过对对象执

3、行堆叠、组合和对齐操作来组织它对对象执行堆叠、组合和对齐操作来组织它们，即简化了编辑难度又提高了编辑效率。们，即简化了编辑难度又提高了编辑效率。12.1 Fireworks的几个基本概念的几个基本概念2.矢量图矢量图也称为面向对象的图像或绘图图像，在数学上定义为一也称为面向对象的图像或绘图图像，在数学上定义为一系列由线连接的点。例如，一片叶子是由一系列描述叶系列由线连接的点。例如，一片叶子是由一系列描述叶子轮廓的点连接起来构成了图像的形状，叶子的颜色由子轮廓的点连接起来构成了图像的形状，叶子的颜色由它的轮廓（即笔触）的颜色和该轮廓所包围的区域（即它的轮廓（即笔触）的颜色和该轮廓所包围的区域（即

4、填充）的颜色决定。填充）的颜色决定。编辑矢量图形时，您修改的是描述其形状的线条和曲线编辑矢量图形时，您修改的是描述其形状的线条和曲线（包含颜色和位置信息）的属性。矢量图形与分辨率无（包含颜色和位置信息）的属性。矢量图形与分辨率无关，对其调整大小、更改形状等操作，而不会改变其外关，对其调整大小、更改形状等操作，而不会改变其外观品质，例如将叶子图像放大时，不会出现明显锯齿状观品质，例如将叶子图像放大时，不会出现明显锯齿状现象，图像颜色也不会发生变化。但是矢量图并不适合现象，图像颜色也不会发生变化。但是矢量图并不适合用来记录色彩较为复杂的图像。用来记录色彩较为复杂的图像。12.1 Fireworks

5、的几个基本概念的几个基本概念3.位图位图也称为点阵图像或绘制图像，是由无数个排列成网格也称为点阵图像或绘制图像，是由无数个排列成网格的像素点组成。图像就是由网格中每个像素的位置和的像素点组成。图像就是由网格中每个像素的位置和颜色值决定的。这些点可以进行不同的排列和染色以颜色值决定的。这些点可以进行不同的排列和染色以构成不同的图样。当放大位图时，可以看见构成整个构成不同的图样。当放大位图时，可以看见构成整个图像的无数单个方块（像素点）。因为每个点被指定图像的无数单个方块（像素点）。因为每个点被指定一种颜色，所以可以通过修改其中每一个像素的颜色一种颜色，所以可以通过修改其中每一个像素的颜色而使图像

6、的效果更逼真。而使图像的效果更逼真。编辑位图图形时，是使这些像素点在网格中重新进行编辑位图图形时，是使这些像素点在网格中重新进行分布，例如缩小位图时，就是通过减少像素来使整个分布，例如缩小位图时，就是通过减少像素来使整个图像变小的，所以修改位图图形通常会使图像的边缘图像变小的，所以修改位图图形通常会使图像的边缘呈锯齿状，或者降低图像的品质，如图呈锯齿状，或者降低图像的品质，如图12-1所示。所示。12.2 绘制路径对象绘制路径对象 在在Fireworks MX 2004中，有两种工中，有两种工作模式，一种上针对矢量编辑的对象模式，作模式，一种上针对矢量编辑的对象模式，一种是对应位图编辑的位图模

7、式，我们首一种是对应位图编辑的位图模式，我们首先来学习在对象模式下，绘制、编辑各种先来学习在对象模式下，绘制、编辑各种图形。图形。12.2 绘制路径对象绘制路径对象12.2.1路径的概念路径的概念12.2.2绘制基本图形绘制基本图形12.2.1路径的概念路径的概念 前面提到，矢量图是由一系列描述图前面提到，矢量图是由一系列描述图形轮廓的点连接构成的，我们把这些表现形轮廓的点连接构成的，我们把这些表现在图形上的线条和轮廓就称为路径。每个在图形上的线条和轮廓就称为路径。每个路径至少有两个点以形成一条线段，路径路径至少有两个点以形成一条线段，路径可以是开放的（起点和终点不重合），也可以是开放的（起点

8、和终点不重合），也可以是封闭的（起点和终点重合在一起），可以是封闭的（起点和终点重合在一起），如图如图12-2所示。所示。12.2.2 绘制基本图形绘制基本图形1.绘制基本形状绘制基本形状2.【钢笔钢笔】工具绘制路径工具绘制路径3.【矢量路径矢量路径】工具工具12.3 编辑路径对象编辑路径对象12.3.1描边和填充描边和填充12.3.2选取和移动路径对象选取和移动路径对象 1.【指针指针】工具工具 2.【选择后方对象选择后方对象】工具工具 3.【部分部分】选定工具选定工具12.3.3 修改路径对象修改路径对象 1.利用利用【缩放缩放】工具修改整个路径对象工具修改整个路径对象 2.调整节点调整节

9、点 3.调整路径调整路径12.3.4多个路径对象的操作多个路径对象的操作12.3.5对路径的其他操作对路径的其他操作12.3.1描边和填充描边和填充利用笔触属性为矢量对象进行描边，突出路径利用笔触属性为矢量对象进行描边，突出路径的形状，利用填充属性为对象的内部着色，使的形状，利用填充属性为对象的内部着色，使对象成为实心对象。对象成为实心对象。用户可以通过【属性】面板或工具面板的颜色用户可以通过【属性】面板或工具面板的颜色部分访问、修改笔触及填充选项。在部分访问、修改笔触及填充选项。在Fireworks MX 2004中当用户选择了【钢笔】中当用户选择了【钢笔】工具或其他可以应用该属性的工具时，

10、属性面工具或其他可以应用该属性的工具时，属性面板上会自动出现各种笔触和填充的选项以供用板上会自动出现各种笔触和填充的选项以供用户进行设置，如图户进行设置，如图12-7所示。所示。12.3.2 选取和移动路径对象选取和移动路径对象在在Fireworks MX 2004的中利用【选取的中利用【选取】类工具箱中的【指针】工具、【部分】类工具箱中的【指针】工具、【部分选定】工具，可以方便的选取路径对象选定】工具，可以方便的选取路径对象或对象的部分控制点。或对象的部分控制点。12.3.2 选取和移动路径对象选取和移动路径对象1.【指针指针】工具工具2.【选择后方对象选择后方对象】工具工具3.【部分部分】

11、选定工具选定工具12.3.3修改路径对象修改路径对象我们知道矢量对象的形状主要是由路径我们知道矢量对象的形状主要是由路径的形状决定的，所以通过对路径的修改的形状决定的，所以通过对路径的修改可以很有效地帮助编辑、修改矢量对象。可以很有效地帮助编辑、修改矢量对象。修改可以是对整个路径也可以是对路径修改可以是对整个路径也可以是对路径中的某段进行，下面介绍几种主要方法：中的某段进行，下面介绍几种主要方法：12.3.3修改路径对象修改路径对象1.利用利用【缩放缩放】工具修改整个路径对象工具修改整个路径对象2.调整节点调整节点3.调整路径调整路径12.3.4 多个路径对象的操作多个路径对象的操作当图像中存

12、在多个路径对象时，我们可以同时对所有当图像中存在多个路径对象时，我们可以同时对所有或部分对象进行整体操作，比如排列、对齐、组合等或部分对象进行整体操作，比如排列、对齐、组合等等，这些选项可以在【修改】菜单下找到。这里主要等，这些选项可以在【修改】菜单下找到。这里主要介绍多个路径对象的组合操作。介绍多个路径对象的组合操作。接合接合 拆分拆分 联合联合 交集交集 打孔打孔 裁切裁切 12.3.5 对路径的其他操作对路径的其他操作(1)简化路径，在不明显改变路径基本形状简化路径，在不明显改变路径基本形状的前提下，将删除路径上不需要的点，的前提下，将删除路径上不需要的点，简化路径的曲线形状。如图简化路

13、径的曲线形状。如图12-21所示，所示，对原图不断简化后的效果。对原图不断简化后的效果。(2)扩展笔触，就是以原始路径为中心向外扩展笔触，就是以原始路径为中心向外形成一个形状与路径相同的幻象形成一个形状与路径相同的幻象。12.4 创建和编辑文本创建和编辑文本 Fireworks MX 2004 提供了许多文提供了许多文本功能，不但可以创建不同风格的文本，本功能，不但可以创建不同风格的文本，也能设计出各种形式的文本图形，文本也能设计出各种形式的文本图形，文本与路径的结合更是可以得到意想不到效与路径的结合更是可以得到意想不到效果。其功能可与许多文字排版软件相媲果。其功能可与许多文字排版软件相媲美。

14、美。12.4 创建和编辑文本创建和编辑文本12.4.1 创建文本创建文本12.4.2编辑文本编辑文本12.4.1 创建文本创建文本1.设置工具的属性设置工具的属性2.移动文本块移动文本块12.4.2 编辑文本编辑文本1.调整文本的间距和字符宽度调整文本的间距和字符宽度2.文本的方向文本的方向3.平滑文本边缘平滑文本边缘4.设置文本的填充颜色设置文本的填充颜色5.对文本的变形对文本的变形12.5 路径文本路径文本 在在Fireworks中不但可以对文本直中不但可以对文本直接进行编辑，也可以将文本转换成路接进行编辑，也可以将文本转换成路径以后再进行编辑，转换以后文本的径以后再进行编辑，转换以后文本

15、的编辑功能变的更加强大，例如转换成编辑功能变的更加强大，例如转换成路径文本以后可以对其中某一个字符路径文本以后可以对其中某一个字符进行变形操作。进行变形操作。12.5 路径文本路径文本 在在Fireworks中不但可以对文本中不但可以对文本直接进行编辑，也可以将文本转换成直接进行编辑，也可以将文本转换成路径以后再进行编辑，转换以后文本路径以后再进行编辑，转换以后文本的编辑功能变的更加强大，例如转换的编辑功能变的更加强大，例如转换成路径文本以后可以对其中某一个字成路径文本以后可以对其中某一个字符进行变形操作。符进行变形操作。12.5路径文本路径文本1.将文本转换成路径将文本转换成路径2.在路径上放置文本在路径上放置文本3.使用图像填充文本使用图像填充文本操作题操作题u 使用增减选取区域的方法，制作一使用增减选取区域的方法，制作一u个半圆半方的选区。个半圆半方的选区。u 导入一幅位图，并将其转换成矢量图。导入一幅位图，并将其转换成矢量图。u利用文字工具输入几个字母，然后利用利用文字工具输入几个字母，然后利用u图像填充文本制作出绚丽效果，最后将图像填充文本制作出绚丽效果，最后将u其附加到一条曲线路径上。其附加到一条曲线路径上。