网页设计第16章.ppt

1、网页设计与制作应用教程,机械工业出版社同名教材 配套电子课件 2009.4,第16章图像的优化与导出,16.1 图像的优化 16.2 图像的导出,16.1 图像的优化,16.1.1 优化JPEG格式的图像 16.1.2 优化GIF格式图像 16.1.3 优化PNG格式图像,16.1.1 优化JPEG格式的图像,使用“优化”面板，可以通过设置压缩和平滑选项来优化JPEG。 JPEG总是以24位颜色保存和导出，因此无法通过编辑其调色板来优化JPEG。当选择JPEG图像时，颜色表为空。 调整JPEG品质。JPEG 是一种有损格式，这意味着在压缩图像时会放弃一些图像数据，从而降低最终文件的品质。通过优

2、化面板中的“品质”选项中的滑块可以调整JPEG品质。范围从1100，设置为1时，JPEG图片质量最低，文件最小；设置为100，JPEG文件最大，但质量最高。 在优化面板中设置一定数量的“平滑”可以帮助缩小JPEG文件的大小。较高的数字虽然在导出JPEG图像过程中产生较严重的模糊结果，但生成的文件很小。一般平滑设置为3左右可减小图像的大小，同时保持适当的品质。,选择性压缩JPEG各个区域。 选择性JPEG压缩可以以不同的级别压缩JPEG的不同区域。图像中引人注意的区域或要求高显示分辨率的区域，可以以较高品质级别压缩；而重要性较低的区域（如背景）可以以较低品质级别压缩，这样可以减小图像的总大小，同

3、时保留较重要区域的品质。如图16-4所示，该图像中的所选区域以90 的品质级别压缩，而未选区域以50 的品质级别压缩。,16.1.1 优化JPEG格式的图像,选择性压缩JPEG区域的操作方法为： 在“原始”视图中，使用“选取框”工具之一选择用于压缩的图形区域。 选择菜单【修改】【选择性JPEG】【将所选保存为JPEG 蒙版】命令。 在“优化”面板中单击“编辑选择性品质选项”按钮。随即打开“可选JPEG设置”对话框。 选择“启动选择性品质”，并在文本框中输入数值。 输入较低的值将以高于其余图像的压缩量压缩“选择性JPEG”区域。输入较高的值将以低于其余图像的压缩量压缩“选择性JPEG”区域。,1

4、6.1.1 优化JPEG格式的图像,选择性压缩JPEG区域的操作方法为： 如果需要，可以更改“选择性JPEG”区域的“覆盖颜色”，它不会影响输出。 选择“保持文本品质”，无论“选择性品质”的值为多少，所有文本项都将自动以较高级别导出。 选择“保持按钮品质”。所有按钮元件将自动以较高级别导出。 单击“确定”按钮，即可对局部图像采用特殊的压缩设置。,16.1.1 优化JPEG格式的图像,其他优化处理 锐化JPEG边缘 从“优化”面板的“选项”菜单中选择“锐化JPEG边缘”，以保持这些区域的清晰度。选择“锐化JPEG 边缘”将增加文件大小。 使用连续的JPEG 从“优化”面板的“选项”菜单中选择“连

5、续的JPEG”命令。连续的JPEG（如交错式GIF和PNG）可以为图像添加渐进下载效果。即最初下载时浏览器以较低的分辨率显示，然后随着下载的进行品质逐渐提高。,16.1.1 优化JPEG格式的图像,16.1.2 优化GIF格式图像,对于适用使用GIF格式优化的图像，优化设置步骤如下： 在优化面板中选择文件的导出类型为GIF，如果图像中有动画元素，则需要选择“GIF动画”。 在优化面板的“色板”中选择导出图形的背景色。 给导出的图片选择一种调色板，如图所示。,选择调色板后，可以对色阶进行设置。在优化面板中的“颜色”下拉列表中选择一个选项。色阶是导出图形中颜色的数目。可以通过减少文件所用颜色的数目

6、使文件变小。减少色阶将放弃图像中的一些颜色，最先被放弃的是那些使用最少的颜色。包含被放弃颜色的像素将转换为调色板上剩余颜色中与之最接近的颜色，这会减少导出文件的大小，但同时会降低图像的品质。 进行色版设置，设置图像的边缘颜色。 在优化面板中可以为GIG图像设置透明区域。首先要在透明下拉列表中选择“索引色透明”或“Alpha透明度” 然后单击工作窗口“预览”按钮，切换到预览模式。,16.1.2 优化GIF格式图像,通过优化面板中对“失真”选项的设置可以把图像压缩得更小。5到15的失真设置可以保证图像最佳效果。 在优化面板中进行GIG的抖动设置。抖动通过替换颜色相似的象素，模拟当前调色板中没有的颜

7、色。当将照片图像或具有复杂渐变的图像导出为GIF文件格式时，抖动可以提供图像的质量，但同时也会增加文件的体积。,16.1.2 优化GIF格式图像,16.1.3 优化PNG格式图像,“PNG”即“可移植网络图形”，是一种通用的网页图形格式 它支持真彩色，同时又是无损压缩，而生成的图像和JPEG相比没有明显的差别。PNG格式还支持透明背景和Alpha通道。PNG最多可以支持32位的颜色，并且可以是连续的。 这里的优化PNG文件并不是Fireworks处理的源文件，Fireworks PNG 包含了应用程序特定的附加信息，导出的PNG文件或在其它应用程序中创建的文件中不储存这些信息。,16.2.1

8、导出单个图像 16.2.2 导出切片的文档 16.2.3 导出动画 16.2.4 使用“快速导出”按钮,16.2 图像的导出,16.2.1 导出单个图像,使用导出命令 在“优化”面板中选择要用于导出的文件格式，然后设置格式特定的选项。 选择菜单【文件】【导出】命令 在对话框中选择导出图像文件的位置。对于网页图形来说，最佳位置通常是本地网站内的一个文件夹。 输入文件名，无需输入文件扩展名，因为Fireworks在优化设置中已指定了文件类型。 从“保存类型”弹出菜单中选择“仅图像”。 单击“保存”按钮，即可将文档以图像形式导出。,使用导出向导 选择主菜单【文件】【导出向导】命令启动“导出向导”对话

9、框。在对话框中选择“目标导出文件大小”后，可以在文本框中输入预备导出文件的大小数值，向导会自动选择较合理的优化方案，使导出的文件大小尽量接近这个数值。 单击“继续”按钮后，向导会询问导出文件的用途，然后推荐一种比较合理的格式图像进行优化,16.2.1 导出单个图像,使用图像预览 选择主菜单【文件】【图像预览】命令，可以打开“图像预览”对话框，预览当前图像设置的优化和导出选项效果，同时还可以更改优化设置。,16.2.1 导出单个图像,16.2.2 导出切片的文档,选择菜单【文件】【导出】命令，弹出“导出”对话框。 选择导出到的文件夹位置。 从“保存类型”弹出菜单中选择“HTML和图像”选项。 在

10、“文件名”框中键入文件名。 从“HTML”弹出菜单中选择“导出HTML文件”。 从“切片”弹出菜单中选择“导出切片”。 如果图像的切片很多，可以选择“将图像放入子文件夹”，便于管理。 单击“保存”按钮。在指定的位置将会生成图像和一个HTML文件。,16.2.3 导出动画,文件。将动画导出为GIF动画的操作： 选择主菜单【文件】【另存为】命令。在“导出”对话框中键入文件名称，并选择导出类型为“动画GIF”或“Macromedia SWF”。 单击“保存”按钮即可。 提示： 导出动画文件也可以选择主菜单【文件】【图像预览】命令，或选择主菜单【文件】【导出向导】命令，但只能导出为“动画GIF”格式文

11、件。,16.2.4 使用“快速导出”按钮,“快速导出”按钮位于文档窗口的右上角，单击此按钮会弹出菜单。在将Fireworks文件导出到其它应用程序时，使用此按钮可以轻松地访问常用选项。使用“快速导出”按钮可以导出为多种格式。,16.3 综合实例优化一幅JPEG格式图像,本节通过实例介绍在Fireworks中优化一幅JPEG格式图像的方法。 在Fireworks中打开一幅名为“girl.jpg”的图片。选择主菜单【窗口】【优化】命令，调出“优化”面板 在优化面板的格式栏选择“JPEG”，设置JPEG格式的压缩参数。将“色板”颜色设置成与网页背景色一致的颜色，使图片可以完全融入网页中；将“品质”设置为70%，整幅图片的压缩程度与“品质”设定值成反比。,使用工具箱中的位图选取工具在图像中选取需要进行特殊处理的文字区域，如图16-11所示。选择主菜单【修改】【选择性JPEG】【将所选保存为JPEG蒙版】命令，将该选区保存为JPEG蒙版,16.3 综合实例优化一幅JPEG格式图像,单击“优化”面板中“选择性品质”栏按钮，弹出“可选JPEG设置”对话框 选中对话框的“启动选择性品质”项，在文本框内输入局部图像的压缩参数。输入一个较大的值“90”，则此区域的压缩率小于图像的其他区域，质量相对较高。 选中“保持文本品质”选项可以使图像中所有文本采用局部压缩参数进行压缩，避