firewor第6章

1、第6课 图像的优化与导出 掌握手动优化和导出图像方法 掌握通过导出向导导出和优化图像的方法6.1 图像的优化和导出 网页图像处理完成后还需要进行优化和导出，才能供网页编辑软件使用。6.1 图像的优化和导出 6.2.1 知识讲解 6.2.2 典型案例导出嘟嘟手机网首页图像6.1.1 知识讲解 在对网页进行优化和导出时有手动优化和使用向导两种方式6.1.1 知识讲解 1手动优化和导出 2通过导出向导导出和优化图像1手动优化和导出 使用手动优化通常先在“优化”面板中对图像进行优化，然后再使用“导出”命令进行导出。1）优化面板 选择【窗口】【优化】命令或按【F6】键可以打开或者隐藏“优化”面板。 在对

2、图像的优化过程中，需要进行以下三个方面的优化。选择图像的格式：由于不同的图片格式有不同的压缩颜色信息的方法，所以针对不同的图像选择最佳的图像格式可以大大地减少文件的大小。1）优化面板设置图像的参数：在图像的格式确定以后，还需要设置相应的参数，才能达到最佳的图像压缩和图像质量的平衡。设置颜色表：在颜色表中列出了所导出图像的所有颜色种类，所以对颜色表的优化也是必不可少的。“优化”面板2）选择内置的优化方案 在“优化”面板最上方的下拉列表中共提供了7种内置的优化类型。各种优化类型的含义如下。GIF网页216：强制所有颜色为网页安全色，该调色板最多包含216种颜色GIF接近网页256色：将非网页安全色

3、转换为与其最接近的网页安全色，该调色板最多包含256种颜色。GIF接近网页128色：将非网页安全色转换为与其最接近的网页安全色，该调色板最多包含128种颜色。2）选择内置的优化方案GIF最合适256：是一个只包含图像中实际使用的颜色的调色板，该调色板最多包含256种颜色。JPEG-较高品质：将品质设为80、平滑度设为0，生成的图像品质较高但占用空间较大。JPEG-较小文件：将品质设为60、平滑度设为2，生成的图像大小不到“JPEG-较高品质”的一半，但品质有所下降。动画GIF接近网页128：将文件格式设为“GIF动画”，并将非网页安全色转换为与其最接近的网页安全色，该调色板最多包含128种颜色

4、。内置的优化类型 3）GIF和PNG格式的优化目前在网页中能够使用的图片格式有GIF，PNG和JPEG 3种。由于GIF和PNG格式的“优化”面板中的选项相同，其优化方法也大致相同，所以将这两种格式的优化方法放在一起进行介绍。在“优化”面板的“导出文件格式”下拉列表框中选择“GIF”、“GIF动画”或“PNG”选项后，“优化”面板，其中各项含义如下。“索引调色版”下拉列表框：用于设置索引颜色调色板，一共有以下9个选项。最合适：该颜色表是根据图像中已有的颜色建立颜色表，是文档图像真正包含的颜色组成的源于文档的实际颜色，是使用最多的颜色类型，可以用最小的文件体积生成最佳的图像质量。3）GIF和PN

5、G格式的优化Web最适色：该颜色表是以网络安全色为用色标准，当图像中的颜色超出了网络安全色时，会自动将超出的颜色替换为最为相近的网络安全色，即兼顾了色彩的丰富性同时又考虑到了浏览器的兼容性。Web216色：该颜色表是标准的216种网络安全色的颜色表，既可以用于Windows操作系统，也可以用于Macintosh操作系统。由于它可以在各种8位显示平台的浏览器中保持很好的一致性，因而也是最为保险的颜色表。精确：该颜色表是包含图像中使用的所有颜色品种的颜色表，只有当图像中的颜色小于256色时，才可以使用该颜色表，当图像中的颜色数超过256时会自动转换为“最合适”模式的颜色表。Macintosh：是与

6、Macintosh系统相匹配的颜色表，提供了Macintosh系统规定的256色。3）GIF和PNG格式的优化Windows：是与Windows系统相匹配的颜色表，提供了Windows系统中规定的256色。灰度等级：在该颜色表中包含了256个级别的灰度颜色，使用此颜色表可以将当前图像转换为灰度级别图像。黑白：该颜色表是仅由黑色和白色组成的双色颜色表，可以将图像转换为只有黑色和白色两种颜色的图像。一致：是一种基于RGB像素值的比较精确的数值颜色表，通过对像素点的颜色分布进行数学描述来减少图像保存的颜色信息，从而减少图像的大小。自定义：允许用户使用自定义的颜色表对图像进行优化。3）GIF和PNG格

7、式的优化“失真”数值框：用于设置图像的压缩失真率。“色板”：单击“色板”右侧的 按钮，在弹出的调色板中可以选择一种颜色，通过将对象颜色与画布颜色混合来使对象看起来更平滑。“颜色”下拉列表框：用于设置图像中的最大颜色数。“抖动”数值框：由于GIF格式的图像只能包含256种颜色，要实现更为丰富的色彩，就需要设置抖动，通过抖动可以模拟出当前调色板中没有的颜色。3）GIF和PNG格式的优化“透明效果类型”下拉列表框：用于设置图像的透明模式，有“不透明”、“索引色透明”和“Alpha透明”三种透明模式。不透明：在选择该模式后，在图像中未定义颜色的区域以画布的颜色显示。索引色透明：是将调色板的某些颜色设置

8、为透明色，在图像中所有这些颜色的像素点都会被作为透明点显示。Alpha透明：该模式为通道透明色，即将在绘图区域中没有绘制图像的部分设置为透明色。“优化”面板5）JPEG图像格式的优化 在“优化”面板的“导出文件格式”下拉列表框中选择“JPEG”格式后，“优化”面板主要包含色板、品质、选择性品质和平滑几项参数，其中品质和平滑这两个参数对JPEG格式的图像质量和文件体积的影响较大。 选择“JPEG”选项后的“优化”面板5）JPEG图像格式的优化品质：在“品质”数值框中可以设置输出的图像品质，取值范围在1100之间。值越大，图像的质量就越好，但文件的体积也就越大；取值越小，文件的体积也就越小，但是图

9、像的质量就越差。选择性品质：单击“优化”面板中的“选择性品质”按钮 ，打开“可选JPEG设置”对话框，选中 复选框可以启用选择性品质功能，并激活对话框中的其他选项，其中各项含义如下。启用选择性品质功能 5）JPEG图像格式的优化“品质”文本框：用于设置选择部分的品质。“覆盖颜色”：在单击右侧的 按钮，在弹出的调色板中选择一种覆盖颜色。但是“覆盖颜色”中的颜色只在预览时显示，在输出时并不显示。 复选框：选择该复选框，这样所有的文本将会使用选择性品质进行压缩。 复选框：选择该复选框，这样所有的按钮将会使用选择性品质进行压缩。5）JPEG图像格式的优化平滑：可以在“平滑”下拉列表框中控制JPEG算法

10、对尖锐的颜色做模糊的处理，从而减少图像的大小。选择的数值越大，图像中尖锐的轮廓边界就越少，图像也会越模糊，相应的图像文件占用的空间也会越少；所选择的平滑数值越小，则图像中尖锐的轮廓边界就越多，图像就越清晰，而图像文件所占用的空间也越大。6）预览优化效果 在优化时不仅可以立即查看优化后的效果，还可以将优化后的效果与原始图像或几个优化设置的效果直接进行比较。 在绘图区域的顶部有 、 、 和 6个按钮，各个按钮的作用如下。 按钮：在默认情况下该按钮处于选中状态，此时将显示图像的原始状态，并可以对图像进行编辑。 按钮：单击该按钮将切换到预览状态，此时将显示优化后的效果，并在绘图区域的左下角显示优化后的

11、图像的大小和下载所需的时间。6）预览优化效果 按钮：单击该按钮将在绘图区域中显示两幅图像，其中左边的是原始图像，右边的为优化后的图像，这样就可以对原始图像和优化后的图像进行比较。 按钮：单击该按钮将在绘图区域中显示4幅图像，其中左上角的是原始图像，其余3幅图像为优化后的图像，可以分别为3幅优化图像设置不同的优化参数，从而在其中找到质量和大小的最佳结合点。 预览视图 图像视图 7）导出图像 选择一幅优化后的图像，然后选择【文件】【导出】命令将打开 “导出”对话框，在“保存在”下拉列表框中指定导出的路径，在“文件名”文本框中输入导出的文件名称，在“保存类型”下拉列表框中，选择保存为什么程序文件或对

12、象，再单击 按钮即可导出图像。 2通过导出向导导出和优化图像 使用“导出向导”对话框可以很方便地设置导出后的图像的大小，具体操作如下： 1）选择【文件】【导出向导】命令，打开 “导出向导”对话框，选中 复选框，并在下面的文本框中输入导出后的文件大小，如“30”。 2）单击 按钮，打开选择目标对话框，在其中选择导出图像的用途，如选择 单选按钮。 3）单击 按钮，打开 “分析结果”对话框。2通过导出向导导出和优化图像4）单击 按钮，打开 “导出预览”对话框，在其中将显示两幅优化后的图像。5）选择其中一幅满意的图像，单击 按钮，将打开“导出”对话框，后面的操作与直接导出相同。 6.1.2 典型案例导

13、出嘟嘟手机网首页图像 本次练习将第15课中制作的嘟嘟手机网首页图像导出为网页文件。 素材位置：【第6课素材6.2.2】 源文件位置：【第6课源文件6.2.2dudu.htm】 制作思路：1）打开“嘟嘟.png”图像。2）切换预览视图。3）打开“优化”面板，进行优化。4）导出图像和网页文件。5）打开导出的网页文件。导出的网页文件操作步骤 其操作步骤（请老师参照软件讲解）：案例小结 本案例将嘟嘟手机网的首页图形进行优化和导出，在制作过程中主要用到了图像的优化和导出等操作。在优化图像时对颜色数较少的图像或切片可以采用GIF格式进行优化，对于颜色数较多的图像或切片可以采用JPEG格式进行优化。6.2 上 机 练 习 6.2.1 为丝雅丽服装网的首页创建切片 6.2.2 优化并导出丝雅丽服装网的首页6.3.1 为丝雅丽服装网的首页创建切片 本练习将为第16课制作的丝雅丽服装网的首页创建切片，主要练习创建切片的操作。 素材位置：【第6课素材6.3.1】 效果图位置：【第6课源文件6.3.1服装.png】 制作思路：使用切片工具为女孩图像创建一个切片。为每个文本分别创建切片。在其他颜色相近的部分继续创建切片。