《fireworks CS3入门与提高教程第10章 优化与导出》由会员分享，可在线阅读，更多相关《fireworks CS3入门与提高教程第10章 优化与导出（22页珍藏版）》请在金锄头文库上搜索。
1、第10章 优化与导出,本章重点 本章主要讲述了在Fireworks中编辑的对象进行优化和导出的操作。对于不同类型的对象，Fireworks均允许使用优化面板来调整对象的质量和大小之间的关系，以便在Internet的Web页上实现最佳效果。之后可也通过预览导出和导出向导实现不同格式对象的导出。 学习目的 通过本章的学习，用户应该掌握： 学会使用优化面板。 学会使用导出向导。 学会使用预览导出。,10.1 优化图像,若将上网浏览比作【冲浪】，则真正享受冲浪乐趣的人可能并不多。很多人为了获得较快的速度不得不过着【起早贪黑】的生活。所以制作Web页时应该考虑使创建的Web页能够很快下载。Firewor
2、ks可以制作符合不同网络链接速度的Web图像，并且能够对创建的Web图像尽可能地进行优化。,10.1.1 概述,图像的使用使网页更加丰富多彩，但同时增添了网页的大小，减缓了下载速度。通过对图像进行优化可以合理地解决这种矛盾，避免网页的过度臃肿。 对于Web图像，颜色和像素是它们的主要组成结构。图像中的颜色越多，图像包含的内容（也即像素）就越多，图像对应的文件尺寸也就越大。因此，要减小图像文件的大小，必须减少图像的颜色和像素。合理分配图像的颜色可以减少图像中包含的颜色；选择合适的压缩格式可以减少图像文件中像素占用的磁盘空间。但在进行图形的压缩时应该最大程度上保证图像的质量没有太大损失。 对图像的
3、优化就是在减少图像颜色、对图像数据进行压缩以及保证图像质量三者之间取一个最佳效果。,10.1.2 基本的优化操作,Fireworks在图像导出前对图像进行优化，图像优化的基本操作如下： （1）单击菜单命令【窗口】|【优化】命令，打开优化面板，如图所示。 （2）使用优化面板中的【颜色】选项框来显示当前调色板中的颜色，然后对图像中的颜色进行编辑，如图所示。 （3）利用预览窗口显示图像优化后的外观。可以在多个预览窗口中比较不同优化设置下的图像大小、下载速度和外观，如图所示。,1基本的优化过程 通常使用优化面板设置图像的优化选项的具体操作如下： （1）在优化面板中【文件格式】下拉列表中选择需要的文件格
4、式。不同的文件格式，在优化面板中的选项不同。 （2）设置需要的优化选项。如【色板】、【颜色】、【抖动】和【透明度】等。 （3）单击优化面板右上角的三角形按钮，打开面板菜单，再设置一些额外的选项。 （4）设置完毕，选择【文件】|【导出】命令，或单击工具栏中的【导出】工具按钮，将文档以指定的文件格式导 出。 此外，还可以在切片文档上应用相应的优化设置。如，将分割图像得到的某些切片以JPEG格式进行优化和导出，而另一些切片部分以GIF格式进行优化和导出。 如，将图中左图的对象进行优化后的效果如10-4中右图所示。在设置前图像文件大小为147KB，设置之后文件大小为27KB，下载时间为4s。导出选项菜
5、单如图所示，可以根据不同的应用将图形导出为不同的文件格式，方便其他开发环境使用。,2使用优化面板 根据需要设置优化面板的各种优化选项，可以实现预期的优化效果。 通常称设置优化选项的组合为【优化方案】。Fireworks具有保存优化方案的功能，通过该功能将自己自定义的优化方案保存起来，在组图中可以重复使用。 将优化操作存为预设的具体操作如下： （1）单击优化面板右上角的面板选项按钮，打开面板选项菜单，如图所示。 （2）选择【保存设置】选项。打开【预设名称】对话框，如图所示。 （3）在文本框中输入预设的名字。 （4）单击【确定】，保存预设。,3预览图像和比较优化结果 Fireworks对预设有实时
6、性。当设置好预设时，可以马上预览到优化结果。这样方便查看优化的效果是否符合要求。 此外，在Fireworks中可以根据优化方案产生多个预览结果，这样允许在多个结果中进行比较，找出最合适的优化方案。 预览优化结果的具体操作如下： （1）单击文档窗口的【预览】选项卡，可以预览原始图像，如图所示。 （2）在【预览】选项卡左下角显示有当前图像文件大小和在某一传输速度时的下载时间。如图所示。【预览】选项卡左下角的文字是：65.40K 4sec56kbps GIF(文档)。,10.1.3 选择适当的文件格式,合理选择文件格式，是优化图像的基础，也是最重要的操作。只有选择了正确的文件格式，在最后导出时才可以
7、起到事半功倍的效果。 1几种图像文件格式 为减少图像文件的大小，需要对文件数据进行压缩。如，假设有一幅100100大小全部填充黑色的矩形图像。如果不对其中的数据进行压缩，则对应的图像文件至少会有100100110000字节，约10KB字节。若采用如下的压缩算法：在文件中用第1个字节表示图像宽度；第2个字节表示图像高度、第3个字节表示像素颜色，则只需要3个字节就可以完全表示原本10K字节的图像。 2GIF GIF（Graphics Interchange Format，图像交换格式）图像是目前Web中最常使用的图像。 它采用高效的LZW无损压缩算法。因此，生成的GIF图像同原图像差别不大，不会丢
8、失图像信息。这种压缩算法的原理是，它对图像中的每一行进行扫描，查找那些具有相同颜色的区域，然后将它们在文件中简化为一个像素区域标记。因此，这种文件格式比较适合存储那些包含大面积单色区域的图像，或是包含颜色数目较少的图像，例如卡通、徽标等。,3JPEG JPEG（Joint Photographic Experts Group，联合图像专家组）图像也是目前Web上广泛使用的图像格式，它是联合图像专家组专门为照片或增强色图像开发出来的一种图形标准。JPEG通过减少像素的方法对图像数据进行压缩，因此它的压缩算法是一种有损压缩，可能造成图像的失真。但是这种压缩算法导致的损失主要是针对原图像中不易为人眼
9、察觉的部分，因此人眼不容易分辨。 4PNG PNG（Portable Network Graphic，便携网络图像）图像目前受W3C组织的大力推荐，现在网络上逐渐推广。它采用同GIF图像类似的压缩算法，不仅对像素的行进行扫描，还对像素的列进行扫描，因此可以获得较好的压缩效果。这种压缩算法是一种无损压缩，能够真实重现原始图像的信息，同时支持真彩色，而且图像文件的大小同JPEG差别不大。同时，PNG的压缩算法避开了版权争议的问题，是一种能够【安全】使用的图像。 5TIFF TIFF（Tag Image File Format，标记图像文件格式）是Aldus公司开发的一种用于存储位图图像的图形格式，
10、这种格式主要应用于出版和印刷。TIFF的格式非常灵活，曾经被当作未来的图像标准。但随着Web的出现和普及，它的应用范围没有更普及。 6BMP BMP（Bitmap，位图）格式是Windows操作系统中最常见的格式，用于显示位图图像。并且Windows自带的【画图】程序已经将其作为默认的文档格式。通常BMP格式不对数据进行压缩，因此文件很大，但是BMP文件的显示速度很快。,10.1.4 对GIF和PNG选择优化设置,了解了文件格式的特点之后，可以针对每种格式进行具体的优化设置。因为GIF格式和PNG格式在压缩算法上类似，所以相应的优化设置也是大同小异，因此将这两种格式的优化方法同时介绍。GIF格
11、式的文件在Web页中的使用要比PNG图像更普遍。所以介绍重点放在GIF格式上。 1选择调色板 通过减少图像中的颜色数目，可以得到非常好的优化效果。可以通过优化面板中的【颜色】、【色版】和【调色板】下拉列表设置图像的颜色数目和质量。对于GIF格式的图像，最多支持256种颜色。可以为其选择2、4、8、16、32、64、128和256等几种颜色数目。 2认识颜色表 在【颜色表】面板中可以查看当前图像中的调色板包含的颜色。 设置颜色标记：颜色表中很多颜色样本块上带有标记。通过这些标记，可以了解该颜色属于哪种颜色，以及包含的属性。单击【优化】面板右上角的菜单按钮，打开面板菜单，选中【显示样本反馈】。显示
12、颜色样本块上的标记。再次单击取消该命令，隐藏样本块上的标记。,3使用调色板进行编辑 使用调色板编辑颜色，可以快速编辑图像文件中的颜色。被编辑的颜色样本块上会出现编辑标记。 编辑现有颜色样本的操作如下： （1）在颜色表面板中，选中要编辑的颜色。 （2）单击【编辑颜色】按钮；或双击要编辑的颜色样本块。打开颜色编辑框。 （3）选择要替换的颜色。 （4）单击【确定】，改变颜色表中的颜色。 4使用Web安全色 设计Web图像时，应该将所有颜色设置为Web安全色。若不是Web安全色，则应使用与其最接近的Web安全色来代替。可以通过【调色板下拉列表】进行选择。 5恢复颜色样本 若在颜色的编辑时不小心进行了误
13、操作，Fireworks允许恢复为原先的颜色样本属性。恢复编辑的具体操作如下所示： （1）在颜色面板中，选中要恢复起初属性状态的颜色样本。 （2）打开面板菜单，选择【删除编辑】命令。将选中的颜色样本恢复为编辑前颜色状态。 若要恢复所有被编辑的颜色，可选择【删除所有编辑】命令。,6调色板的加载和保存 Fireworks可以载入其他的调色板，将其应用到当前文档中，也可以将某种设置好的调色板保存起来，以供将来使用。 将编辑好的调色板保存起来的具体操作如下： （1）完成对调色板的定制。 （2）打开优化面板菜单，选择【保存调色板】命令，打开Windows【另存为】对话框。 （3）选择合适的保存路径，并输
14、入调色板文件名。 （4）单击【保存】，保存调色板。 7设置抖动方式 因为GIF格式的图像只有256种颜色，所以若想使图像中的颜色显示超过256种，则需要使用【抖动】操作。抖动就是用现有的256种颜色中的两种或多种颜色混合起来，形成新的颜色。在【抖动】中的混合实际上是像素上的并行排列，不是【调和】，因此可能产生斑点效果，影响美观。 8损失量和减小文件大小 GIF采用无损压缩，所以采用该压缩算法不会丢失文档中的数据。但为了提供更多的文件大小的选择，Fireworks允许设置GIF的损失量，以获取更高的压缩率。较高的损失量可以获得较小的图像文件，但是图像的失真较大；较低的损失量会生成较大的图像文件，
15、但是图像的失真较小。,9透明区域 GIF图像流行的主要优点在于它可以制作透明效果。最常见的透明效果应用就是将背景（实际上就是图像的画布）设置为透明。在Fireworks中所有的图像都以矩形的方式存在，也就是说，每幅图像始终占用某个矩形区域。而将图像的背景设置为透明后，可以避免对网页背景的遮挡，从而获得形状不规则的图像效果。 10交错下载效果 通常在下载原始图像时，不能马上显示图像，而是从上至下显示图像。这样不便于用户观察图像的轮廓。GIF文件和PNG文件提供了一种【交错图】的文件格式，可以帮助用户快速了解图像的整体结构。 11优化面板菜单中的其他选项 此外优化面板的面板菜单中还有以下两个命令【
16、导出向导】和【优化到指定大小】命令。 若选择【导出向导】命令，会自动启动导出向导对话框，一步一步完成优化和导出操作。 若选择【优化到指定大小】命令，打开对话框，提示输入文件的最大尺寸，其单位是k。输入所需的最大尺寸，单击【确定】，确定操作。,10.1.5 JPEG选择优化设置,1改变图像质量 由于JPEG使用的压缩算法是一种有损压缩，所以通过改变图像的质量，可以改变对图像数据的压缩程度。在优化面板上，单击【品质】区域右方的箭头按钮，打开品质标尺，拖动标尺上的滑块，可以改变JPEG图像的质量；也可以在文本框中直接输入需要的品质值，其范围是0100。通常品质值越高，压缩程度越小，图像同原始图像之间就越接近，但是图像文件也相应变大；质量值越小，压缩程度越大，图像文件越小，图像也就越失真。 2图像模糊与锐化 JPEG压缩算法可以很好地处理带有连续变化的颜色，但不能很好的处理图像的边缘细节。所以在导出图像之前，若先对图像的边缘细节进行模糊，然后再进行压缩，这样可以提高压缩效率，减小图像文件的大小。而Fireworks的锐化颜色边缘特性，可使用户维持两种颜色之间交接位置的细节，避免过分丢失图像信息
