项目三： Fireworks 图像的处理

1. 项目三：Fireworks图像的处理 主讲人： 王 英

2. 项目二：多张格式化网页制作与设计 任务一：图形的绘制 任务二：图像的效果化 任务三：图像的优化和导出

3. 任务一：图形的绘制 企鹅图像 新年快乐贺卡 任务实施 绘制企鹅图像 绘制“新年贺卡”

4. 任务一：图形的绘制 • 绘制企鹅的操作步骤 • 新建一个大小为300×300像素的图像，绘制一个椭圆，设置填充色为黑色； • 同理绘制另外一个椭圆，作为“企鹅”的头部和肚子 ； • 绘制“企鹅”的两个翅膀。 借助于“部分选择”工具、缩放工具旋转椭圆，并将其放置到图像适当的位置； • 组合所有对象； • 绘制“企鹅”的眼睛 ； • 绘制“企鹅”的白色肚子；

5. 任务一：图形的绘制 • 来画“企鹅”的“嘴巴 ，土黄色”来填充颜色； • 用同样的方法绘制“企鹅”的“脚； • 给“企鹅”画上“蝴蝶结”； • 用同样的方法绘制“围巾” 。

6. 任务一：图形的绘制 • 绘制新年贺卡的操作步骤 • 新建一个大小为600×400像素的图像，设置画布颜色为#FFB001； • 使用工具箱上“星形”工具 ，绘制五角星； • 制作彩灯 ，设置为“线性填充”，颜色是“深绿色-浅绿色” 的渐变 ； • 同理再绘制另外一个圆形，大小比刚才的圆形稍微小一些，设置其填充为实心填充； • 执行菜单【修改】|【组合路径】|【打孔】命令 ；

7. 任务一：图形的绘制 选中打孔后的路径，在其属性面板中选择“线性填充”，填充颜色为“白-透明”的渐变，并调整控制柄的方向 ； 使用“椭圆工具”绘制一个椭圆，设置其填充类型为“放射状”填充，设置填充颜色为“白-浅绿”的渐变 ，“边缘”为“羽化” 值为14； 选中最大的椭圆图像， “边缘”为“羽化” 值为2； 使用“矩形”工具和“椭圆”工具绘制出小球的接头和吊环 ； 将小球的各个部分组合起来，并调整它大小；

8. 任务一：图形的绘制 工具箱上的“直线”工具为每个小球上添加一条直线段； 对于不同的小球，选中它将其组合取消，将渐变颜色调整为不同的颜色，从而得到七个颜色的小球 ； 接下来就开始绘制小女孩了。调整图像显示比例，先是小女孩圆圆的脑袋，先绘制一个椭圆，填充设置为实心填充，颜色为“#FFCC99”，笔触大小为“4”，颜色设置为“#663333”，采用“柔化圆形”的笔触来得到一种朦胧的效果；

9. 任务一：图形的绘制 小女孩添加上头发。 使用“矩形” “椭圆”工具以及用“多边形”工具，利用部分选定工具对它们进行形状上的调整，组合后利用打孔工具改变头发的颜色； 小女孩添加上粉粉的小腮、弯弯的眼睛和嘴巴 ，利用变形工具调整； 组合各个对象； 绘制条幅； 绘制小女孩的身子和手 ； 为条幅输入文字“新年快乐，万事如意”。

10. 任务一：图形的绘制 • 知识扩展 • 矢量图形 • 矢量图形是用线条和曲线来呈现图像，这些称为“矢量”的线条包含了颜色和位置信息。 • 对象与对象层的区别 • 一个标准的Fireworks图形文件至少有2个基本层，分别是“网页层”和“普通图层”。 • 每一个图形对象在创建的同时都会自动在“普通图层”下生成一个“单独的层”来容纳自己，因此这个“单独的层”就被称为“对象层” ； • 每一个热点或切片对象在创建的同时也会在“网页层”下自动生成一个“对象层”来容纳自己。

11. 任务一：图形的绘制 • 将文字附加到路径 • 首先用“文本工具”输入文字 • 再用“钢笔工具”绘制一条曲线 • 按住Shift键将文字和曲线都选中 然后执行【文本】|【附加到路径】命令就将文字附加到路径了； • 为文字进行描边 • 使用文本属性框里的描边工具； • 绘制花边效果 • 新建文件，背景色为蓝色；

12. 任务一：图形的绘制 • 在画布中绘制一个椭圆，椭圆的属性如下： • 在画布上克隆出一条相同的曲线。然后执行【修改】|【变形】|【数值变形】命令 ，设置为旋转，15°； • 重复上述两步的操作。 生成最后效果，如右图

13. 任务一：图形的绘制 • 在Fireworks中“复制-粘贴”，“重制”，“克隆”三者区别 • “粘贴”是针对“复制”而言，选中的图片目标经“复制”后可以被“粘贴”到当前图层或其他的应用图层上。 • Fireworks中的“重制”是把当前图层上已有的图片重新在新的图层上“复印”一份，不能以位图的形式粘贴。 • “克隆”基本和“复制”一样，所不同的是克隆可以精确定位，克隆后的图片与原来的目标图片完全重合，可以利用光标上下左右键进行相对移动，还可以设定移动量。

14. 任务二：图像的效果化 任务实施 图像的效果化主要用于修饰和增强网页图像的效果，使网页更加美观，惟妙惟肖。下面我们就通过“制作相框”和“制作金属字效果”为例讲解图像的修饰方法，以及通过“探照灯”效果来讲解动态图像的制作方法和技巧。

15. 任务二：图像的效果化 操作步骤 制作“相框” 绘制“金属字”效果。 制作“探照灯”效果

16. 任务二：图像的效果化 • 相框的操作步骤 • 新建文档，660*440像素，黑色背景； • 导入2.jpg图片 ，修改画布，使画布和图像大小一致 ； • 执行【命令】|【创意】|【添加图片框】命令 ，选择“wood”图案； • 保存文件。

17. 任务二：图像的效果化 金属字的操作步骤 新建600*300像素文档，白色背景； 在工具箱中选择“文本工具”，设置字体、字形、字号、字符间距等属性，如图 设置颜色为“黑-白”渐变 ，设置纹理为“粒状” ；

18. 任务二：图像的效果化 • 设置文字的滤镜效果，选择“属性”面板中“添加效果或选择预设”按钮 ，设置“内测光晕”效果 ； • 同样的方法设置“斜面和浮雕|内斜角”效果 • 同样的方法设置 “调整颜色|曲线”效果

19. 任务二：图像的效果化 探照灯操作步骤 新建600*300像素文档，黄色背景。 执行【编辑】|【插入】|【新建元件】命令，打开“转换为元件”对话框，并执行如图 单击“确定”按钮，进入“球”画布中，选择工具箱中的“椭圆”工具，设置圆的“描边”选项为“无”，“填充形式”为“椭圆形”，“颜色填充方案”为“深蓝-浅蓝-深蓝”的渐变 ；

20. 任务二：图像的效果化 按照Shift键，在画布中绘制一个圆形，并调整圆的位置，使圆心和画布的中心位置重合。 单击“页面1”退出元件的编辑页面再新建一个“运动球”元件 ,类型为“动画”； 单击“确定”后，进入“运动球”元件的画布。从“文档库”面板中将“球”元件拖到“运动球”画布中，选中“球”元件，将它移动到最左侧的位置，然后执行【编辑】|【克隆】命令，原地克隆一个同样的“球”元件，选中克隆对象，拖曳到靠右侧的位置； 选中两个球，执行【修改】|【元件】|【补间实例】命令，打开“补间实例”对话框，参数设置如下图；

21. 克隆、重制与复制的区别 • 复制 复制过的图片以位图的形式同时被保存在剪贴板上，可以多次粘贴操作。 • 克隆 克隆和复制一样，不同的是克隆可以精确定位，克隆后的图片和原来的图片完全重合。 • 重制 将当前层上已有的图片重新在新的层上“复制”一份，不能以位图的形式粘贴。

22. 任务二：图像的效果化 单击“页面1”关闭“运动球”的编辑界面。然后删除画布中的内容，从“文档库”面板中拖到“运动球”元件到画布的中间位置。 单击层面板的下方的“新建/重置层”按钮，新建一个图层，保持图层2的名称不变。 在图层2上进行操作。选中工具箱中的“文本”工具，设置属性：“字体”为“楷体”，“颜色”为“白色”，“字号”为“96”像素，其余设定保持默认值。然后输入文字，调整位置使其处于画布的中间位置 ； 选中文本层，然后执行【编辑】|【剪切】命令或按“Ctrl+X”组合键，将文本剪切，然后选中图层1的“运动球”对象，执行【编辑】|【粘贴为蒙版】命令。 单击画布工具栏中的动画播放器的播放按钮，观看生成探照灯的效果。

23. 任务二：图像的效果化 • 制作逐状态动画 制作逐状态动画就是一次制作动画的每一状态，然后对每一状态进行编辑。 • 新建300*300像素，背景为蓝色； • 在画布中绘制一个椭圆 • 执行【窗口】|【状态】命令，打开“状态”面板 ； • 复制“椭圆”，然后单击“状态”面板下面的“新建/重置状态”按钮，新建状态2，粘贴“椭圆”。执行【编辑】|【克隆】命令，在画布上克隆出一条相同的曲线。然后执行【修改】|【变形】|【数值变形】命令，，打开“数值变形”对话框， 设置为旋转，15度 ；

24. 任务二：图像的效果化 按住Shift键将两个椭圆全部选中 ，Ctrl+C,新建一个状态3,粘贴选中旋转后的第二个椭圆，执行【编辑】|【克隆】命令，再旋转15度; 重复上述过程，直至完成。单击画布工具栏中的动画播放器的播放按钮 。

25. 任务二：图像的效果化 • 补间动画的制作(上升的气球 ) • 打开素材2010\17.jpg图片 ； • 单击“层”面板右上角的“选项”按钮，在弹出的快捷菜单中选中“在状态中共享层”命令； • 执行【编辑】|【插入】|【新建元件】命令，“转换为元件”对话框中输入名称球； • 进入“气球”画布中，执行【文件】|【导入】命令，将素材2010\气球.psd导入到画布并调整大小和位置，使气球和画布的中心位置重合 ； • 退出元件的编辑页面，然后执行【编辑】|【插入】|【新建元件】命令，再新建一个“运动气球”元件 ，设置类型为“动画”；

26. 任务二：图像的效果化 • 从“文档库”面板中将“气球”元件拖到“运动气球”画布中，选中“气球”元件，将它移动到最下方的位置，然后执行【编辑】|【克隆】命令，原地克隆一个同样的“气球”元件，选中克隆对象，拖曳到靠上方的位置； • 按住Shift键将两个“气球”全部选中，执行【修改】|【元件】|【补间实例】命令，打开“补间实例”对话框， 步骤为10； • 一个补间动画制作完成，然后单击“页面1”关闭“运动球”的编辑界面。然后删除页面1画布中的内容，单击层面板下面的“新建/重置层”按钮，新建一个图层，保持“层2”名称不变，从“文档库”面板中拖到“运动球”元件到画布的中间位置。 • 单击画布工具栏中的动画播放器的播放按钮。 • 导入和导出元件 • 元件即可从其他文档中调用，又可应用于其他元件

27. 任务二：图像的效果化 知识扩展 • 状态延迟 • “状态延迟”决定当前状态播放的时间长度。“状态延迟”是把一秒当作 100 来设置的。例如，如果设定“状态延迟”为 “50”，就是表示“半秒钟”，如果将“状态延迟”设定为 “300”，就是表示 “3 秒钟”。 • 第三方滤镜(Eye Candy 4.0) • 只需用将第三方滤镜安装到Fireworks CS3中的Plug-Ins文件夹下就可以在Fireworks CS3的 “滤镜”菜单中调用了.用EyeCandy4.0的“玻璃效果”制作“玉石吊坠”效果. • 绘制一个环，设置“星状放射”，填充“黑-白”渐变，在纹理上选择“脉纹”，总量“20%” ；

28. 任务二：图像的效果化 • 执行菜单【滤镜】|【汉EyeCandy4.0】|【玻璃效果】命令，设置参数如下： • 再执行菜单【滤镜】|【调整颜色】|【色相/饱和度】命令;色相150，饱和度37，亮度23；

29. 任务二：图像的效果化 • 添加“阴影和光晕”中的“投影”，参数设置如图； • 改变画布颜色为淡黄色 • 切片 • 切片”：就是将一幅大图像分割成为一些小的图像切片，然后在网页中通过没有间距和宽度的表格重新将这些小的图像没有缝隙地拼接起来，成为一幅完整的图像，切片是用于创建交互性的基本构造块。 • 矢量图形 矢量图形是用线条和曲线来呈现图像。

30. PNG格式的特点 • 优点： • 压缩比高，是无损压缩 • 有8位、24位、32位三种色彩深度 • 支持Alpha通道透明和色彩索引透明 • 缺点： • 没有动画功能 • 浏览器支持部理想，只有最新的主流浏览器才支持

31. 任务三：图像的优化和导出 任务实施 受到网络下载和浏览速度的限制，要求网页图像在保证清晰度的前提下，尽可能的缩小文件尺寸，因此就需要对图像进行优化。如何在颜色、质量和图像大小之间获得一个最佳的平衡点，就是图像优化工作的最主要的目的。除标准的PNG格式外，Fireworks还允许将图像导出为其他网页图像文件格式，如，JPEG、GIF等格式。另外，Fireworks除了可以导出单个的图像外，还可以只导出图像的切片文件、导出动画等。

32. 任务三：图像的优化和导出 操作步骤 • 优化和导出“企鹅图像”图片 • 打开企鹅图像； • “优化”面板，并单击“预览”按钮，可以看到当前设置下的图像效果和大小。 • 导出图像（注：导出时不能设置导出的文件格式，导出的文件格式是在优化中设定的）。

33. 任务三：图像的优化和导出 • 图像的优化 • 最终目标是创建能够尽可能快地下载精美图像。 • 在 Fireworks 中优化图形涉及下列操作： • 选择最佳文件格式 • 设置格式特定的选项 • 调整图形中的颜色（仅限于 8 位文件格式）

34. 任务三：图像的优化和导出 • 文件格式 • GIF”：即“图形交换格式 • JPEG最适合于扫描的照片、使用纹理的图像、具有渐变颜色过渡的图像和任何需要 256 种以上颜色的图像。 • “PNG”，即“可移植网络图形” ,并非所有的网页浏览器都能查看 PNG 图形。PNG 最多可以支持 32 位的颜色 • “WBMP”：即“无线位图” ,用在“无线应用协议”(WAP) 网页上 , WBMP 是 1 位格式两种颜色可见： 黑与白; • “TIFF”：即标签图像文件格式 ,常用于印刷出版。许多多媒体应用程序也接受导入的 TIFF 图形。

35. 任务三：图像的优化和导出 “BMP”显示位图图像 ,主要用在Windows 操作系统上 。 “PICT ，常用在 Macintosh 操作系统上。

36. 任务四：CSS修饰网页 知识扩展 • 导出动画 • 打开探照灯动画，在“优化”面板中，将文件设置为“GIF动画”文件； • 执行【文件】|【导出向导】命令，选中“选择导出格式”单选按钮 ； • 选择“GIF动画 ” ，打开“图像预览”对话框 ，并进行设置； • 导出图像。

37. 任务四：CSS修饰网页 • 知识扩展 • 用CSS样式设置超级链接 • 设置苏轼没有下划线，鼠标经过该文字时，文字呈红色显示状态，其余状态中，文字都显示为绿色。 • 选择“苏轼”，为该文字做一个空链接 • 新建CSS样式 ，在【选择器类型】中选择“复合内容” ，【选择器名称】中选择“a:link” ，宋体，9pt,颜色#009900 ； • 用同样的方法，设置“a:visited” ； • a:hover”设置为在【分类】中选择【类型】，颜色为#FF0000

38. 任务四：CSS修饰网页 a:link ：设置带有超级链接文字的样式。 a:visited ：设置已经访问过的超级链接的文字样式。 a:hover ：设置鼠标经过超级链接时文字的样式。 a:active: ：设置鼠标点击超级链接文字的时候文字的样式。

39. 任务四：CSS修饰网页 • 表达格式为：filter：blur（add=add，direction，strength=strength） • Add：是否在已经应用Blur滤镜上的网页对象上显示原来的模糊对象，0表示否，1表示是。 • Direction：设置模糊方向，0上，45右上，90右，135右下，180下，225左下，315左上。 • Strength：只能使用整数来指定，它代表有多少像素的宽度将受到模糊影响。默认值是5像素。

40. 任务四：CSS修饰网页 • 表达格式为：Filter：DropShadow（Color=color，Offx=Offx，Offy=offy，　　　　　　　　　　　　Positive=positive） • Color：指定阴影颜色 • offx(offy)：阴影相对于元件对象在水平(垂直)方向的偏移量，单位是像素,有正负之分。 • Positive：阴影的透明程度，0表示没有阴影，非0表示有阴影效果。

41. 任务四：CSS修饰网页 • Filter：Wave（Add=True（False），Freq=频率，LightStrength=增强光效，　　Phase=偏移量，Strength=强度） • Add：是否在已使用了Wave滤镜的元件对象上显示原对象，0表示不显示，非0表示显示。 • Freq：设置波动的个数 • Lightstrength：设置波浪效果光照强度，0表示最弱，100表示最强。 • Phase：指定波浪的起始相角,数值从0到100 • Strength：设置波浪效果摇摆的幅度

42. 任务四：CSS修饰网页 • 表达格式为：Filter：Glow（Color=color，Strength=strength） • Color：制定光晕的颜色 • Strength：指定光晕的范围，数值为从1到255，数字越大光晕越强