ImageReady的切片和优化(讲稿)

1、imageready的切片和优化(讲稿) photoshop(imageready)的切片和优化 photoshop (imageready)的一个主要功能是为网页设计做前端处理：即页面的分割、图像超链接、翻转按钮。在通常状况下，构成网页的图像有着不同的图像格式，或许一些图片很适合用jpg格式来保存，另一些存为gif格式会得到更好的质量和更快的下载速度。把一张大图片切成一些小部分，就能对每一部分进行单独的优化处理，使其图片质量和文件大小的比例更合理。 切片的定义： 切片就是图像的一块矩形区域，可用于在结果网页中创建链接、翻转和动画。将图像切片可以有选择地优化图像，使图片下载速度更快，画面质量更

2、高。虽然在photoshop中也进行一些基本的切片操作，但无法组和、对齐或分布切片。imageready具备专业的切片调板和菜单，其切片编辑功能要比photoshop更强大，所以，我们习惯在完成图像之后转跳到imageready中对图像切片。在工具面板中，那个像小切刀一样的图标就是切片工具。点击工具图标下的小三角，与切片工具组合在一起的就是它的最佳搭档切片选择工具。无论当前所选择的是切片工具还是切片选择工具，只要按住ctrl键，你就能在这两者之间随便切换。记住：我们把一幅图片切成肯定数量的小图片，其目的在于依据每一片的不同特征，对其进行单独优化。 建议将全部的切片都定义为用户切片，由于对用户切

3、片可以进行移动、复制、组合、划分、调整大小、删除、排列、对齐和分布，还可以应用不同的优化设置。而自动切片是链接在一起并共享相同优化设置的。而且将自动切片转换为用户切片还可防止自动切片在重新生成时发生更改。 在默认状态下，全部的切片边线的颜色都是蓝色，而消失在每个切片上的彩色小数字都是它们被安排的切片编号。切片从图像的左上角开头，从左到右、从上到下的挨次编号。 请记住：所做的切片越多，最终得到的表格单元也就越多，也就意味着更多的代码和字节。 imageready的文档窗口 在imageready中，可直接在文档窗口中查看和处理优化图像。可以以原稿（未优化图像）、优化（应用了当前优化设置的图像）、

4、双联（原稿与优化后的图像，或两种优化图像的比较）、四联（原稿和三种优化格式，或四种不同图像版本的比较）这四种形式来显示当前图像。一般来说，在加工图像时，我们多采纳原稿显示；在比较优化图像时，双联和四联被更多的使用。在你拿不定办法该用什么设置来保存图像时，四联的形式可以让你预览不同设置时图像的品质和大小，这样就不用反复的保存比较 了。 优化切片 下面我们要对切片进行优化。优化可以在调整图像显示品质的同时，有效地掌握图像文件的压缩大小，在用于网页之前，优化是必不行少的一步。有两种优化图像的方法：一种是基本优化，是在photoshop的“存储为”命令，它可以依据文件格式的不同，可以指定图像品质、背景

5、透亮度或杂边、颜色显示和下载方法。但不支持web特性，也就不能保留切片；还有一种是精确优化，可以通过多个优化版本的比较，选择最适合的设置组合，这种精确优化就是今日的另一个重点。 imageready的优化面板 在优化调板中，最有影响力的选项是优化的文件格式、颜色（针对gif格式）和品质（针对jpeg格式）。 优化图像格式 imageready包括的优化图像格式共有gif、jpg、png-8、png-24、wbmp5种。 gif：这个格式最适合压缩具有单调颜色和清楚细节的图像，对诸如艺术线条、徽标或带文字的插图这样的图像有很好的效果。gif格式压缩实色区域来减小文件大小，同时又能保留清楚细节。颜

6、色数量是打算gif格式图像大小和品质的关键。因此，削减图像中的颜色数量是优化gif图像的关键因素。可以从优化面板的颜色选项中选择颜色表中颜色的最多数目。颜色数量越少，文件就越小，但图像损失也就越大；但也并不是说颜色数量越多图像就越好。假如觉得一种颜色设置不太抱负，还可以微小调整最大颜色数量。使用颜色表，你可以精确掌握图像中的颜色。 选择不同的切片，颜色表也不同；假如同时选择多个切片，那么颜色表是空的，将切片链接后，这些链接切片共享颜色调板和仿色图案，这样，相邻切片的边界就不会消失裂缝了。除了颜色数量，耗损值也可以减小文件大小，幅度达到540，自然，损耗设置越高，扔掉的数据越多。这个选项是gif

7、格式特有的，但它不能与交叉、杂色和图案仿色一起使用。 jpg：是我们最常用的压缩格式之一，最适合用来压缩连续色调图像。它通过有选择的扔掉数据，达到减小文件大小的目的，是一种有损压缩。像在gif格式中设定颜色数量一样，可以设定压缩品质来掌握图像大小：品质越高，图像损失越小，文件也就越大。调整品质滑杆，可以更精确的掌握压缩效果（图14）。更多的时候，需要打开双联或四联，认真观看每一个细小改动对图像的转变。视图下方的解释区域供应了重要的优化信息，优化图像的解释显示当前优化选项、优化文件的大小以及使用选中的调制解调器速度时的估量下载时间。这样你或许会在图像品质和大小之间作出更恰当的选择。也可以在图像信

8、息栏中选择显示不同的信息，如不同的调制解调器速度等。 png：png格式的全称为“portable network graphics （移植的网络图象文件格式 ）”。 优点： 1. 压缩比率高，并且是无损压缩，适合在网络中传 播； 2. 具有8位、24位和32位三中颜色深度； 3.支持alpha通道透亮（ 32位）和颜色索引透亮（ 8位）； 缺点： 1) 没有动画功能； 2) 扫瞄器支持不抱负，只有最新的主流扫瞄器才支持； 目前最新的版本是于1996年10月w3c组织制定的。适用于颜色丰富简单，图象画面要求高的状况，比如作品展现等。 和 gif 格式一样，png-8 格式在保留清楚细节的同时，

9、高效地压缩实色区域；但并不是全部的 web 扫瞄器都能显示 png-8 文件。png-8 的设置与 gif 设置很相像 wbmp ：wbmp 格式是用于优化移动设备（如移动电话）图像的标准格式。wbmp 支持 1 位颜色，即 wbmp 图像只包含黑色和白色像素。 图像优化有两种方法：基本优化和精确优化。 基本优化：将图像另存为gif、jpeg或png文件。依据格式不同，可以指定图像品质、背景透亮度或杂边、颜色显示和下载方法，但不会保留文件中添加的任何web功能:切片、链接等。 精确优化：使用“存储为web全部格式”，同时查看图像的多个版本并修改优化设置，选择最适合的设置组合。也可以指定 透亮度

10、和杂色，选择用于掌握仿色的选项及图像大小调整到指定的像素尺寸。 仿色 “仿色”是指模拟计算机的颜色显示系统中未供应的颜色的方法。若图像所包含的颜色主要是纯色，则在不应用仿色时通常也能正常显示。包含连续色调（尤其是颜色渐变）的图像，可能需要仿色以防止消失颜色条带现象。 带有 0% 仿色和 100% 仿色的 gif 图像 从“仿色算法”菜单中选取一个选项以确定将像素值转换为黑色或白色的方法： “无仿色”不对图像应用仿色。 “集中”：应用与“图案”仿色相比通常不太明显的随机图案。仿色效果在相邻像素间集中。假如选择此算法，请指定“仿色”百分比以掌握应用于图像的仿色量。可以使用文字图层、外形图层和 al

11、pha 通道中的蒙版来转变整个图像的“仿色”百分比。此方法可在关键图像区域产生更高品质的效果，而且不会牺牲文件大小。 解释：集中仿色可能导致切片边界上消失可觉察到的接缝。链接切片可在全部链接的切片上集中仿色图案并消退接缝。 “图案”：应用类似半调的方块图案以确定像素的值。 “杂色”：应用与“集中”仿色相像的随机图案，但不在相邻像素间集中图案。使用“杂色”算法时不会消失接缝。 损耗（仅限于 gif） 指定有损压缩所允许的“损耗”值。有损压缩可通过有选择地扔掉数据来削减文件大小 损耗设置越高，扔掉的数据越多。通常可以使用 5-10 的损耗值，有时可高达 50 而不会降低图像品质。使用“损耗”选项通

12、常可使文件大小削减 5%-40%。 “透亮区域”和“杂边” 选择“透亮区域”和“杂边”选项的组合以指定图像中透亮像素的优化方式： 若要使完全透亮的像素透亮并将部分透亮的像素与一种颜色相混合，请选择“透亮区域”，并选择一种杂边颜色。 若要使透亮度大于 50% 的全部像素完全透亮并使透亮度小于或等于 50% 的全部像素完全不透亮，请选择“透亮区域”，并从“杂边”菜单中选取“无”。 若要用选中的颜色填充完全透亮的像素并将部分透亮的像素与同一种颜色相混合，请选择一种杂边颜色，并 取消选择“透亮区域”。 透亮区域和杂边示例：a. 原稿图像 b.选中“透亮区域”并且带有杂边颜色c.选中“透亮区域”并且不带杂边颜色 d. 取消选择“透亮区域”并且带有杂边颜色 交叉 选择“交叉”可创建在整个图像文件的下载过程中，在扫瞄器中以低辨别率显示的图像。“交叉”可以使下载时间显得较短，并使查看者确信下载正在进行。但是交叉也会增大文件大小。 web 对齐 指定将颜色转换为最接近的 web 调板颜色的容差级别（并防止颜色在扫瞄器中消失仿色）。值越大，转换的颜色越多。 使用统一的颜色表 (imageready) 选择该选项可对全部翻转状态使用同一颜色表。 另：网页图像大小计算： 依据视屏辨别率和显示界面大小确定设计的网页图像大小，也就是说网页图像尺寸是以