第9章Fireworks图形设计基础ppt课件.ppt

《第9章Fireworks图形设计基础ppt课件.ppt》由会员分享，可在线阅读，更多相关《第9章Fireworks图形设计基础ppt课件.ppt（35页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、在此输入您的封面副标题第9章Fireworks图形设计基础中国铁道出版社中国铁道出版社 2016.92016.9李红李红 岳云康岳云康 樊东燕樊东燕 编著编著 编著：编著：李红李红 岳云康岳云康 樊东燕樊东燕中国铁道出版社2016.9中国铁道出版社中国铁道出版社 2016.92016.9李红李红 岳云康岳云康 樊东燕樊东燕 编著编著 主讲：主讲： 第9章 Fireworks网页图形设计基础中国铁道出版社电子商务网页设计 （第2版）课件 2016.9B 熟悉熟悉Fireworks CS5Fireworks CS5的工作环境；了解创建的工作环境；了解创建FireworksFireworks文档的基

2、本方文档的基本方法；掌握基本矢量工具、文字编辑的基本操作；掌握法；掌握基本矢量工具、文字编辑的基本操作；掌握webweb图像对象工具图像对象工具的编辑方法的编辑方法 。技能目标：技能目标： 运用矢量、文字工具编辑网页基本图像、设计网页运用矢量、文字工具编辑网页基本图像、设计网页logologo的的操作技能操作技能 。 能力目标：能力目标： 运用所学知识和技能，创作适合网页风格的运用所学知识和技能，创作适合网页风格的WebWeb图像图像 。 中国铁道出版社电子商务网页设计 （第2版）课件 2016.9B （第2版）课件 2016.9B 本节内容：中国铁道出版社电子商务网页设计 （第2版）课件 2

3、016.9B Fireworks 工作环境工作环境 Fireworks CS6的工作界面如图的工作界面如图9-1，主要可以分为以下，主要可以分为以下几部分。几部分。菜单栏工具箱属性面板浮 动 面板中国铁道出版社电子商务网页设计 （第2版）课件 2016.9B 1.菜单栏菜单栏 Fireworks的主菜单有的主菜单有10个：文件，编辑，视图，选择：文件，编辑，视图，选择，修改，文本，命令，滤镜，窗口，帮助等，修改，文本，命令，滤镜，窗口，帮助等 2.工具箱工具箱 6个类别：选择、位图、矢量、类别：选择、位图、矢量、web、颜色和视图。、颜色和视图。 3.文档编辑窗口文档编辑窗口 最上面是最上面是

4、标题栏，显示当前正在编辑文档的文件名。，显示当前正在编辑文档的文件名。 标题栏下有标题栏下有4个个选项卡：“原始原始”、“预览预览”、“2幅幅”、“4幅幅”。 文档编辑窗口的中央，是用于文档编辑窗口的中央，是用于编辑图像的地方。 文档编辑窗口的最下面是文档编辑窗口的最下面是状态行， 中国铁道出版社电子商务网页设计 （第2版）课件 2016.9B 4.属性面板属性面板 5.浮动面板浮动面板中国铁道出版社电子商务网页设计 （第2版）课件 2016.9B Fireworks文档的基本操作文档的基本操作 1.创建新文档创建新文档 2.打开文档和导入文档打开文档和导入文档FireworksFirewor

5、ks不仅可以打开自身生成的不仅可以打开自身生成的PNGPNG文件，可以打开用其它软文件，可以打开用其它软件生成的图像文件，例如件生成的图像文件，例如PhotoshopPhotoshop，FreeHandFreeHand，IllustratorIllustrator，未压缩的未压缩的CorelDrawCorelDraw，WBMPWBMP，EPSEPS，JPEGJPEG、GIFGIF、TIFFTIFF和和GIFGIF动画文动画文件等，甚至还可打开并编辑件等，甚至还可打开并编辑RTFRTF及及TXTTXT文件。文件。 3.保存文档和导出文档保存文档和导出文档FireworksFireworks的文档

6、导出的图像格式一般是经过优化处理后的的文档导出的图像格式一般是经过优化处理后的JPEGJPEG、GIFGIF、PNGPNG格式的图像文件，也可以导出为格式的图像文件，也可以导出为GIFGIF动画文件等，还可以动画文件等，还可以是是htmlhtml代码。代码。 4.改变画布设置改变画布设置 5.更改文档的显示大小更改文档的显示大小中国铁道出版社电子商务网页设计 （第2版）课件 2016.9B 图像文件的存储格式 JPG GIF PNG， WBMP， TIFF， PICT PSD AI CDR中国铁道出版社电子商务网页设计 （第2版）课件 2016.9B 9.2.1 矢量图形的绘制矢量图形的绘制9

7、.2.2 9.2.2 设置笔触和填充设置笔触和填充路径的调整路径的调整对象的编辑对象的编辑9.2 绘制基本矢量图形中国铁道出版社电子商务网页设计 （第2版）课件 2016.9B 矢量图是使用矢量来描述的图形矢量图是使用矢量来描述的图形 位图是使用称为像素的一格一格的点来描述图像，位图图位图是使用称为像素的一格一格的点来描述图像，位图图像将会由每一个网格中的像素点的位置和色彩值来决定。像将会由每一个网格中的像素点的位置和色彩值来决定。 原图 矢量图形 位图图形中国铁道出版社电子商务网页设计 （第2版）课件 2016.9B 矢量图形的绘制 1.直线的绘制直线的绘制 直线的绘制可以使用直线工具。直线

8、的绘制可以使用直线工具。 按住按住【Shift】键拖拽可以画出水平、键拖拽可以画出水平、45度斜角以及垂度斜角以及垂直线段。直线段。 2.矩形、圆、多边形等基本形状的绘制矩形、圆、多边形等基本形状的绘制 绘制正方形，只需要在绘制矩形拖拽时按住绘制正方形，只需要在绘制矩形拖拽时按住【Shift】键即可。键即可。 绘制正圆形，也只需要在绘制时按住绘制正圆形，也只需要在绘制时按住【Shift】键。键。 3.路径的绘制路径的绘制中国铁道出版社电子商务网页设计 （第2版）课件 2016.9B （1）绘制直线路径）绘制直线路径 运用钢笔工具可以绘制直线线段和直线路径。运用钢笔工具可以绘制直线线段和直线路径

9、。 （2）绘制曲线路径）绘制曲线路径 钢笔工具也可绘制平滑的贝兹曲线。钢笔工具也可绘制平滑的贝兹曲线。 注意：注意： 每个节点的类型每个节点的类型角点或曲点角点或曲点决定相邻决定相邻的线段是直线还是曲线。一个角点表明至少一个相的线段是直线还是曲线。一个角点表明至少一个相邻的线段是直线；一个曲点表明至少一个相邻的线邻的线段是直线；一个曲点表明至少一个相邻的线段是曲线。如图段是曲线。如图9-159-15所示。斜的直线即为控制手柄。所示。斜的直线即为控制手柄。事实上，所有都有节点控制手柄，每个节点控制手事实上，所有都有节点控制手柄，每个节点控制手柄的位置，决定相邻线段的位置。柄的位置，决定相邻线段的

10、位置。中国铁道出版社电子商务网页设计 （第2版）课件 2016.9B 设置笔触和填充 工具属性面板一般分四个区域：第一部分是对象工具属性面板一般分四个区域：第一部分是对象位置信息位置信息，第二部分是，第二部分是设置填充设置填充，第三部分是，第三部分是设置笔触设置笔触，第四部分，第四部分是设置对象是设置对象滤镜效果滤镜效果区域。区域。 1.设置笔触效果设置笔触效果 笔触是指路径对象的边界的填充效果，主要设置的内容有笔触是指路径对象的边界的填充效果，主要设置的内容有笔触颜色、笔触粗细、填充纹理、笔触类型、边缘柔化、笔触颜色、笔触粗细、填充纹理、笔触类型、边缘柔化、笔触位置等几项，如图笔触位置等几项

11、，如图9-17。 中国铁道出版社电子商务网页设计 （第2版）课件 2016.9B 笔触位置可以应用笔触位置可以应用3种效果：种效果： （）在（）在路径内路径内，此时路径的描边的线条将部分覆盖，此时路径的描边的线条将部分覆盖边界，且位于路径的上部。边界，且位于路径的上部。 （）居于（）居于路径中路径中，此时路径的描边的线条将完全覆，此时路径的描边的线条将完全覆盖边界，默认是居于路径中。盖边界，默认是居于路径中。 （）在（）在路径外路径外，此时路径的描边的线条将部分覆盖，此时路径的描边的线条将部分覆盖边界，且位于路径的外部。边界，且位于路径的外部。 中国铁道出版社电子商务网页设计 （第2版）课件

12、2016.9B 2.设置填充效果设置填充效果 填充效果决定作品的填充效果决定作品的质量质量，Fireworks的填充功能可以的填充功能可以使设计者得到理想的效果。使设计者得到理想的效果。 设置路径的填充效果，要点有设置路径的填充效果，要点有5个：个： 填充颜色：填充颜色：“颜色预览颜色预览”显示当前对象填充颜色。显示当前对象填充颜色。 填充类型：一般有填充类型：一般有无、实心无、实心、网页抖动、网页抖动、渐变渐变和图案和图案5种。种。 边缘效果：设置路径边缘的填充类型和柔和度。边缘效果：设置路径边缘的填充类型和柔和度。 填充纹理：用于设置路径填充的纹理的类型和柔和度填充纹理：用于设置路径填充的

13、纹理的类型和柔和度。可以设置为。可以设置为“透明透明”。 柔和度柔和度中国铁道出版社电子商务网页设计 （第2版）课件 2016.9B 路径是矢量图的主要属性，对矢量图的编辑主要是对路径路径是矢量图的主要属性，对矢量图的编辑主要是对路径的编辑，而对路径的编辑主要是对节点的调整。的编辑，而对路径的编辑主要是对节点的调整。 1.对象的选择与移动对象的选择与移动 （1）对象的选择）对象的选择 “指针指针”工具：可以选择一个对象，也可以选取多个工具：可以选择一个对象，也可以选取多个对象，选取多个对象可以用鼠标拖动选取，也和按住对象，选取多个对象可以用鼠标拖动选取，也和按住【Shift】键，单击多个需要选

14、择的对象。键，单击多个需要选择的对象。 “选择后方对象选择后方对象”工具：可以实现对当前对象下面的工具：可以实现对当前对象下面的对象的选取。如图对象的选取。如图9-25。 “部分选定部分选定”工具：主要用在矢量绘图和编辑中。工具：主要用在矢量绘图和编辑中。 层面板层面板中国铁道出版社电子商务网页设计 （第2版）课件 2016.9B （2）对象的复制与删除）对象的复制与删除 移动移动 利用箭头工具利用箭头工具(指针工具、次选择工具、选后工具指针工具、次选择工具、选后工具)直接拖拽选中的对象。直接拖拽选中的对象。 利用键盘方向键以利用键盘方向键以1个像素单位移动对象，按住个像素单位移动对象，按住【

15、Shift】键可以扩大为键可以扩大为10个像素单位。个像素单位。 也可以在信息面板键入对象最左上顶点的也可以在信息面板键入对象最左上顶点的X，Y坐标坐标来精确定位。坐标的来精确定位。坐标的(0,0)点默认为画布的最左上顶点默认为画布的最左上顶点，单位为像素。点，单位为像素。 复制、剪切复制、剪切 粘贴和删除。粘贴和删除。中国铁道出版社电子商务网页设计 （第2版）课件 2016.9B 2.调整路径改变图形调整路径改变图形 矢量对象可以是矢量图或是路径矢量对象可以是矢量图或是路径 矢量对象可以使用矢量对象可以使用“部分选定部分选定”工具和钢笔工具来调工具和钢笔工具来调整路径以改变图形。整路径以改变

16、图形。 （1）调整曲线路径形状）调整曲线路径形状 使用使用“部分选定部分选定”工具拖动手柄，可以更改曲线段路工具拖动手柄，可以更改曲线段路径的形状。径的形状。 （2）调整节点改变路径（图形）调整节点改变路径（图形） 首先用首先用“部分选定部分选定”工具点击一个节点选中它，接着工具点击一个节点选中它，接着拖拽这个节点到新的位置，出现蓝色的路径，释放鼠拖拽这个节点到新的位置，出现蓝色的路径，释放鼠标后新的路径形成，如图标后新的路径形成，如图9-27所示。所示。中国铁道出版社电子商务网页设计 （第2版）课件 2016.9B 3.编辑节点变形路径编辑节点变形路径 （1）角点和曲点的相互转化）角点和曲点

17、的相互转化。 将直线变为曲线将直线变为曲线 将曲线变为直线将曲线变为直线 将所选路径上的一个曲点转变为角点将所选路径上的一个曲点转变为角点 （2）在所选路径上添加和删除节点）在所选路径上添加和删除节点 当钢笔工具的指针位于非路径区域时，指针旁边会有当钢笔工具的指针位于非路径区域时，指针旁边会有一个小的叉号，如果指针处在路径上时，指针旁会有一个小的叉号，如果指针处在路径上时，指针旁会有个十字的标志，此时单击鼠标会增加一个节点。个十字的标志，此时单击鼠标会增加一个节点。 而当指针处在节点上时，指针旁则会有个减的标志，而当指针处在节点上时，指针旁则会有个减的标志，单击鼠标可删除该节点。单击鼠标可删除

18、该节点。中国铁道出版社电子商务网页设计 （第2版）课件 2016.9B 4.使用变形工具变形路径使用变形工具变形路径 （1）利用）利用“自由变形自由变形”工具弯曲路径工具弯曲路径 （2）利用）利用“重绘路径重绘路径”工具重画路径局部线段工具重画路径局部线段 （3）切割路径）切割路径 5.使用修改路径操作命令变形路径使用修改路径操作命令变形路径 通过选择通过选择“修改修改/改变路径改变路径”菜单下的命令，可实现简化菜单下的命令，可实现简化路径、扩展笔触、扩展与收缩路径的操作。路径、扩展笔触、扩展与收缩路径的操作。 简化路径简化路径 扩展笔触扩展笔触 扩展与收缩路径扩展与收缩路径中国铁道出版社电子

19、商务网页设计 （第2版）课件 2016.9B 对象的编辑 1. 对象的变形对象的变形 2. 缩放对象缩放对象 3. 扭曲对象。扭曲对象。 中国铁道出版社电子商务网页设计 （第2版）课件 2016.9B Fireworks文字的编辑主要内容主要内容中国铁道出版社电子商务网页设计 （第2版）课件 2016.9B Fireworks输入文本有两种方法：输入文本有两种方法： 一是直接键入；一是直接键入； 一是可以导入外部的一是可以导入外部的txt或或rtf格式文本。格式文本。 中国铁道出版社电子商务网页设计 （第2版）课件 2016.9B （1）设置文字的字体、大小、颜色和样式）设置文字的字体、大小、

20、颜色和样式 （2）设置字间距和行间距）设置字间距和行间距 （3）设置的文本排列和方向）设置的文本排列和方向 （4）设置文本段落格式）设置文本段落格式 （6）设置文本描边的平滑效果）设置文本描边的平滑效果 （5）设置基线和文本的缩放）设置基线和文本的缩放中国铁道出版社电子商务网页设计 （第2版）课件 2016.9B 文字和路径1.设置文字附加到路径设置文字附加到路径 其步骤为：首先在文档窗口中添加所需文本，接着在文档中绘制其步骤为：首先在文档窗口中添加所需文本，接着在文档中绘制路径，同时选中一个文本和一个路径，执行路径，同时选中一个文本和一个路径，执行“文本附加到路径文本附加到路径”命令即可完成

21、，如图命令即可完成，如图9-44。 文字附加到路径后，文字的基本属性还存在，还可以利用文本编文字附加到路径后，文字的基本属性还存在，还可以利用文本编辑工具对文本进行编辑。辑工具对文本进行编辑。 如果要使文本与路径分离，选中该分离对象，执行如果要使文本与路径分离，选中该分离对象，执行“文本从路文本从路径分离径分离”命令即可。命令即可。3.将文本转化成路径 操作过程如下：选中要转换为路径的文本。执行操作过程如下：选中要转换为路径的文本。执行“文本转换为文本转换为路径路径”命令，将文本转换为路径。命令，将文本转换为路径。 文本转换为路径后，文本此时已是路径，文字的基本属性就不存文本转换为路径后，文本

22、此时已是路径，文字的基本属性就不存在，不能用文本编辑工具对文本进行编辑、修改；但可以用在，不能用文本编辑工具对文本进行编辑、修改；但可以用“部部分选定分选定”工具对节点进行编辑，以修改路径对象的效果工具对节点进行编辑，以修改路径对象的效果 中国铁道出版社电子商务网页设计 （第2版）课件 2016.9B 1. 设置不透明度和混合模式 2.设置滤镜效果不透明度混合模式滤镜效果中国铁道出版社电子商务网页设计 （第2版）课件 2016.9B 9.4 应用实例本节任务：本节任务：中国铁道出版社电子商务网页设计 （第2版）课件 2016.9B WEB广告的制作实例 1. 目标效果2.制作步骤（制作步骤（见

23、见p236）中国铁道出版社电子商务网页设计 （第2版）课件 2016.9B logo制作实例 1. 目标效果2.制作步骤（制作步骤（见见p239）中国铁道出版社电子商务网页设计 （第2版）课件 2016.9B 1 .Fireworks 的工作界面；的工作界面；2. 介绍了介绍了Fireworks文档的基本操作文档的基本操作3. 介绍了介绍了Fireworks编辑图像的基本流程。编辑图像的基本流程。4. 介绍了介绍了Fireworks的文字的编辑；的文字的编辑；5. 制作、制作、web图像制作实例。图像制作实例。中国铁道出版社电子商务网页设计 （第2版）课件 2016.9B 实验目的：实验目的：

24、 1.了解了解Fireworks软件编辑软件编辑Web基本图像的操作；基本图像的操作； 2. 掌握运用矢量、文字工具编辑掌握运用矢量、文字工具编辑web矢量图像的基本操作矢量图像的基本操作。 3. 掌握掌握FW各种绘制工具的综合操作。各种绘制工具的综合操作。 实验内容：实验内容： 1. 熟悉熟悉Fireworks 工作环境，新建一个工作环境，新建一个Fireworks 文档。文档。 2. 运用直线工具、规则图形工具绘制象棋棋盘图形。运用直线工具、规则图形工具绘制象棋棋盘图形。 3. 文字编辑工具属性设置。文字编辑工具属性设置。 4. 运用钢笔工具绘制一个路径，设计一个运用钢笔工具绘制一个路径，设计一个logo图形；图形；中国铁道出版社电子商务网页设计 （第2版）课件 2016.9B http:/