《零起点dreamweaver cs3,flash cs3,fireworks cs3网页制作培训教程电子教案第9课》由会员分享，可在线阅读，更多相关《零起点dreamweaver cs3,flash cs3,fireworks cs3网页制作培训教程电子教案第9课（57页珍藏版）》请在金锄头文库上搜索。
1、第9课 编辑图像,本课要点 具体要求 本课导读 上机练习,本课要点,编辑位图图像 编辑矢量图形,具体要求,掌握位图工具的使用 掌握矢量工具的使用 掌握组合路径的方法 掌握动态滤镜的使用 熟悉文本工具与矢量工具的配合应用,本课导读,Fireworks为用户提供的图形图像编辑与制作功能十分强大，它集矢量图与位图编辑于一身。矢量图中的自动形状图形对设计者来说十分有用，设计者只须拖动控制点就能绘制出需要的图形。Fireworks中的文本工具也非常实用。另外，设计者通过为位图、矢量图和文本等元素应用动态滤镜，可以制作出非常精美的图形效果。,9.1 编辑位图图像,在网页中使用的JPG，GIF以及PNG格式
2、的图像都是位图图像，在Fireworks中可以轻松地对各种位图进行处理，如裁切图像和选取图像中需要的区域等。,9.1 编辑位图图像,9.1.1 知识讲解 9.1.2 典型案例制作Banner效果图,9.1.1 知识讲解,本节将学习位图的选取、颜色的填充、模糊与锐化图像的操作，以及加深与减淡图像工具的使用等。,9.1.1 知识讲解,1. 选取图像 2. 颜色填充 3. 用刷子工具绘图 4. 擦除位图图像 5. 模糊与锐化位图图像 6. 烙印与减淡位图图像 7. 混合模式 8. 橡皮图章工具,1. 选取图像,选取位图图像有以下几种方法。 1）用选取框选取 2）用套索工具选取 3）使用魔术棒工具,2
3、. 颜色填充,在Fireworks中，位图与矢量图的填充方法基本相同，有滴管工具、油漆桶工具和渐变工具3种填充工具，其功能分别如下。 滴管工具：在编辑窗口中需要的颜色上单击即可获得该颜色。 油漆桶：用于进行单色填充。 渐变工具：用于填充具有渐变效果的颜色。,3. 用刷子工具绘图,刷子工具是绘制位图轮廓的工具，只能在位图上使用，【属性】面板如下图所示。,3. 用刷子工具绘图,各参数项功能如下。 ：设置笔刷颜色。 下拉列表框：在该下拉列表框中可以设置笔刷的笔触效果。 【边缘】下拉列表框：设置笔触边缘的柔化度，值越小，柔化度越小，值为“0”时为实边。 【纹理】下拉列表框：在绘制的笔触线上添加纹理效果
4、。,4. 擦除位图图像,橡皮擦工具用于擦除位图图像中不需要的部分。选择橡皮擦工具后，【属性】面板如下图所示。,4. 擦除位图图像,常用参数项功能如下。 【边缘】下拉列表框：设置擦除部分边缘的羽化度。 下拉列表框：设置擦除部分的透明度。 【形状】栏：设置橡皮擦形状。 【大小】下拉列表框：设置橡皮擦大小。 擦除的方法为：设置好参数后，在位图图像上按下鼠标左键拖动即可。,5. 模糊与锐化位图图像,当需要模糊图像或拼接多幅图像时，可以使用模糊工具，使图像柔和。如果需要使图像的边缘或颜色分界更清晰，则采用锐化工具，使图像边缘突出显示。,5. 模糊与锐化位图图像,模糊工具【属性】面板如下图所示。,5. 模
5、糊与锐化位图图像,锐化工具【属性】面板如下图所示。,5. 模糊与锐化位图图像,两个【属性】面板的参数项相同，各参数项功能分别如下。 【大小】下拉列表框：设置笔触的大小。 【边缘】下拉列表框：设置笔触的柔化度。 【强度】下拉列表框：为模糊工具时，设置模糊量；为锐化工具时，设置锐化量。,6. 烙印与减淡位图图像,如果图像太暗，就需要使用减淡工具使整体变亮，反之则使用烙印工具进行处理。烙印与减淡工具的【属性】面板参数项相同。由于面板中的【大小】、【形状】和【边缘】下拉列表框与模糊工具相同，下面就只介绍“范围”和“曝光”参数项。,6. 烙印与减淡位图图像,【范围】下拉列表框：对应的下拉列表中有3个选项
6、，选择【阴影】选项，可以更改图像中的深色部分；选择【高亮】选项，可以更改图像中的浅色部分；选择【中间色调】选项，则可以更改图像中每个通道的中间范围。 【曝光】下拉列表框：其值设置得越大，曝光越强，值越小曝光越弱。,7. 混合模式,应用各种混合模式可以产生不同的效果，各个图像对象都可以应用混合模式。但是如果是组合图像应用了混合模式，取消组合后，混合模式就会消失。 选择一个对象后，在【属性】面板右侧的【混合模式】下拉列表中选择混合模式选项即可。,8. 橡皮图章工具,使用橡皮图章工具可以复制图像，其【属性】面板如下图所示。,8. 橡皮图章工具,该工具的“大小”与“边缘”参数项的功能与模糊工具相同，其
7、他参数项的功能如下。 【按源对齐】复选框：选中该复选框，取样指针移动时与第2个指针对齐。取消选中该复选框后，取样区域都是固定的。 【使用整个文档】复选框：选中该复选框，在取样时，对整个文档中的所有对象都有效。,9.1.2 典型案例制作Banner效果图,案例目标 本案例将制作一张Banner效果图，主要介绍绘制选区、减选、羽化、颜色填充和混合模式的使用，效果如下图所示。,9.1.2 典型案例制作Banner效果图,操作思路： （1）新建一个与Banner大小一致的文档窗口。 （2）导入素材，并进行减淡处理，设置混合模式，使图像融为一体。 （3）绘制选区，创建一个从左到右的渐变效果，并应用相应的
8、混合模式，使画面左部分较深，以便产生层次感。 （4）应用减选，绘制两段弧，通过羽化和填充功能制作有柔度的弧。 （5）输入文本，通过文本设置达到需要的效果。 操作步骤请老师参照软件讲解,9.1.2 典型案例制作Banner效果图,案例小结 本案例在制作过程中主要用到了导入文件和减淡工具，介绍了减选、羽化操作，以及设置“颜色”和“叠加”混合模式等内容。 在建立选区前，可以在【属性】面板中先设置羽化值，再建立选区，如果要制作柔化效果，但又忘记了先设置羽化值，就只能通过【羽化】菜单命令来实现了。,9.2 编辑矢量图形,Fireworks中的矢量工具为网页图标的设计制作增效不少。,9.2 编辑矢量图形,
9、9.2.1 知识讲解 9.2.2 典型案例绘制公司标志,9.2.1 知识讲解,本节将学习矢量图形的绘制、路径的编辑、滤镜的使用及文本的编辑等几方面的内容。,9.2.1 知识讲解,1. 绘制图形 2. 组合路径 3. 分割路径 4. 将路径转换为选区 5. 应用动态滤镜 6. 编辑文本,1. 绘制图形,矢量图的绘制有规则图形绘制、自动形状图形绘制，以及使用直线和钢笔工具绘制等。,1. 绘制图形,1）规则图形的绘制 规则图形主要是指矩形、椭圆、多边形和星形。要绘制矩形或椭圆，选择相应的工具，拖动鼠标即可，比较简单。其中，按住【Shift】键可绘制正方形或正圆。如果要绘制圆角矩形，用户可以在绘制完矩
10、形后，在【属性】面板的【矩形圆度】下拉列表框中输入圆角的半径，也可以从自动形状图形列表中选择圆角矩形工具进行绘制。 绘制多边形时，可以先在【属性】面板的【形状】下拉列表中选择形状样式，在【边】文本框中设置边数，在【角度】文本框中设置星形的内角度数。,1. 绘制图形,2）自动形状图形的绘制 在工具箱的【矢量】栏的矩形工具上按住鼠标左键，在弹出的列表中选择需要的自动形状图形绘制工具，在窗口中拖动即可绘制。 绘制完成后，图形四周出现控制点，将鼠标指针移上控制点，出现对应的提示，根据提示可以调整图形的角形、大小、厚度和高度等参数。,1. 绘制图形,3）用直线和钢笔工具绘制 直线与钢笔工具用于绘制线或不
11、规则的图形。用直线工具绘制封闭图形时，不会自动填充颜色；而用钢笔工具绘制时，在封闭时会自动填充颜色。 使用钢笔工具时，如果只通过单击鼠标绘制，则得到的是直线式的图形；如果在绘制时按住鼠标左键不释放鼠标，则能绘制出带弧线的图形；要绘制不封闭的路径，双击即可结束绘制。,2. 组合路径,组合路径是矢量图形的一个重要编辑方法，通过组合路径可快速完成图形的造型。 路径组合方式有：接合、打孔、联合、交集和裁切几种，下面逐一介绍。,2. 组合路径,1）接合 用于将两条开口的路径合并为一条路径，也可将两个或多个不同的对象组成复合路径。 合并路径的方法为：用部分选定工具 选择两条开口路径上的两个端点，选择【修改
12、】 【组合路径】【接合】命令即可合并路径。 组成复合路径的方法：选取两条或多条路径，选择【修改】【组合路径】【接合】命令或按 【Ctrl+Shift+J】组合键组合成一条复合路径。,2. 组合路径,2）联合 在将多条路径合并为一条路径时，可选择【修改】【组合路径】【联合】命令。 3）交集 要选取多条路径的重叠区域时，可以选择【修改】【组合路径】【交集】命令，获得它们的相交区域。,2. 组合路径,4）打孔 打孔是指将多个对象重叠区域删除，选择【修改】【组合路径】【打孔】命令实现打孔效果。 5）裁切 当几个对象产生交集时，要用上方的对象剪切下方对象重叠的部分，选择【修改】【组合路径】【裁切】命令。
13、,3. 分割路径,要将一条路径分为多条独立的路径，可以使用工具箱中的刀子工具 。,4. 将路径转换为选区,如果用户已经习惯了位图编辑，可以将矢量图转换为位图，选择【修改】【将路径转换为选区】命令即可转换。,5. 应用动态滤镜,动态滤镜位于【属性】面板右下角，该工具对矢量图形、位图和文本均有效。选择窗口中的任何一个对象，【属性】面板中都会出现【滤镜】栏。单击 按钮，弹出下拉菜单，可以从中选择需要的滤镜。添加的滤镜显示在 按钮下方的列表框中。如果不需要应用某种滤镜，在列表框中选取该滤镜后单击 按钮删除即可。,6. 编辑文本,用户选择文本工具后，可以先在【属性】面板中设置文本的属性参数，也可以先输入
14、文本，再进行设置。 编辑文本时可以将文本转换为路径，也可将文本附加到路径上，即沿着路径排列文本。,6. 编辑文本,1）将文本转换为路径 选择【文本】【转换为路径】命令，将文本转换为路径，转换后可以对其进行纹理填充、用部分选定工具做局部修改、与其他对象组合为路径等操作，从而轻松制作出具有个性化的文本效果。,6. 编辑文本,2）文本附加到路径 首先绘制路径，并输入文本。然后选取路径和文本，选择【文本】【附加到路径】命令，即可将文本沿着路径排列。 文本附加到路径后，选择【文本】【方向】子菜单中的命令可以调整文本的排列方向。,9.2.2 典型案例绘制公司标志,案例目标 本案例将制作公司标志，主要介绍钢
15、笔工具、打孔、联合、文本转路径、矢量纹理填充及滤镜的使用，制作出的效果图如右图所示。,9.2.2 典型案例绘制公司标志,操作思路： 本例可分为以下两大部分完成： （1）应用矢量工具绘制图形、通过组合路径与【属性】面板编辑图形。 （2）将文本转化为路径，然后对其进行打孔和纹理填充操作，最后应用“投影”滤镜增加阴影效果。 操作步骤请老师参照软件讲解,9.2.2 典型案例绘制公司标志,案例小结 本案例主要介绍了如何分解组合对象、如何组合路径，如何使用【属性】面板、倾斜工具，如何用钢笔工具编辑图形，以及如何添加滤镜效果等。 在应用钢笔工具时，除了可以删除节点外，还可以在路径上单击增加节点，如果在添加节
16、点时拖动鼠标，则节点处变为弧线。,9.2.2 典型案例绘制公司标志,在“投影”滤镜参数中的 下拉列表框中可设置投影的距离，在 下拉列表框中可设置投影色的透明度，在 下拉列表框中可设置投影的柔化度，在 下拉列表框中可设置投影方向，选中【去底色】复选框，则删除颜色，只显示背景色。,9.3 上 机 练 习,9.3.1 制作栏目边框 9.3.2 制作小图标,9.3.1 制作栏目边框,本次练习将制作具有如下图所示效果的栏目，主要练习绘制圆角矩形、使用部分选定工具、路径裁切、渐变填充、色相/饱和度设置等操作。,9.3.1 制作栏目边框,9.3.1 制作栏目边框,操作思路： 绘制圆角矩形，颜色为“#03CDFF”，调整圆角值，使其与上图所示的圆角相同。 用矩形对圆角矩形的上部进行裁切。 复制裁切的图形，用部分选定工具进行调整，并进行白色到透明的渐变填充，达到高光效果。 复制底层的圆角图形，再移到最上层，用椭圆工具对其打孔，并填充为白色，设置透明度。 绘制与圆角矩形同宽的矩形放置于底层，并设置
