数字媒体交互设计（慕课版） 课件 11组件设计-网页元素的动态模拟-PS动态应用.ppt

7 对比原始版本和优化版本 在“存储为web所用格式…”面板中，提供了原稿优化的对比视图模式，方便我们进行检查，以得到最好的结果，操作如图所示： web交互设计中Ps动态元素的几种优化设置 8 仿色方法 01、扩散：应用与“图案”仿色相比通常不太明显的随机图案。仿色效果在相邻像素间扩散。 02、图案：使用类似半调的方形图案模拟颜色表中没有的任何颜色。 03、杂色：应用与“扩散”仿色方法相似的随机图案，但不在相邻像素间扩散图案。使用“杂色”仿色方法时不会出现接缝。 web交互设计中Ps动态元素的几种优化设置 该功能是用来确定如何优化图像中的透明像素。大部分情况下都使用默认设置即可； 如果需要进一步设置，可以参考如文本中的官方文档解释：这里不做过多讲解，可作为扩展知识了解即可。 01.要使完全透明的像素透明并将部分透明的像素与一种颜色相混合，请选择“透明度”，然后选择一种杂边颜色。 02.要使用一种颜色填充完全透明的像素并将部分透明的像素与同一种颜色相混合，请选择一种杂边颜色，然后取消选择“透明度”。 03.要选择杂边颜色，请单击“杂边”色板，然后在拾色器中选择一种颜色。或者，从“杂边”菜单中选择一个选项：“吸管颜色”(使用吸管样本框中的颜色)、“前景色”、“背景色”、“白色”、“黑色”或“其它”(使用拾色器)。 当透明度仿色选择“透明度”选项后，如图所示：可以选取对部分透明的像素应用仿色的方法： 01、“无透明度仿色”不对图像中部分透明的像素应用仿色。 02、“扩散透明度仿色”应用的随机图案通常没有“图案”仿色那么明显。仿色效果在相邻像素间扩散。如果选择此算法，请指定“仿色”百分比以控制应用于图像的仿色量。 03、“图案透明度仿色”对部分透明的像素应用类似半调的方块图案。 04、“杂色透明度仿色”应用与“扩散”算法相似的随机图案，但不在相邻像素间扩散图案。使用“杂色”算法时不会出现接缝。 前面我们都需要手动调参数，对比效果，反复的调整修改，以求达到最好的效果， 而优化菜单项的“优化文件大小”，会自动帮我们平衡各项参数，然后在我们设置的文件大小内，算出最优的结果。 设置好后，在浏览器中“预览”选项看最终GIF效果，也可以将设置保存为预设，作为参数模版供后续使用。 以上 我们讲解了web交互设计中Ps动态元素的几种优化方法，可以帮助我们在文件大小和效果之间取得一种平衡，搭配出合适的性价比；本次课我们就讲到这里，祝大家学习顺利 * 保存为网页格式是一项平衡选择——你必须在图片品质和介质的文件尺寸之间做好平衡，以便满足原型设计及平台的需求。 在速度相对重要的地方（如快速地加载网站），你可能需要牺牲一些图片品质。而在品质重要的地方，则需要牺牲一点速度。 本节课程的目的就是介绍一些方法，在这两个因素之间寻求平衡，与此同时保留尽可能高的图像品质；并教给你关于“存储为web所用格式”你需要知道的知识。 * 虽然存在有非常多的图片格式（仅举几例，如jpeg，gif和png），但是依据压缩方法不同，所有的图片都能进一步归类为两大类别：无损和有损。 无损数据压缩保证了图像在没有任何品质和信息丢失的情况下重现，而有损数据压缩的结果就是可能造成品质和信息的丢失。 在设计领域主流的无损媒介格式包括GIF，PNG，以及TIFF，而JPEG是最主流的有损压缩的图形格式。 * 由于图片巨大的文件体积，它们更多是以有损压缩格式来保存的。甚至在拍照时，相对于数倍大小的RAW格式，相机也倾向于用有损格式（如JPEG）来保存图片。 JPEG是日常中首选的图片格式，它是以它的创造者“联合图像专家小组”来命名的。Jpeg之所以能够成为标准，是因为它在压缩图像数据的同时可以保留高品质，并且在相关信息上能够接近无损图像的效果。 当我们在保存图片的时候，有几种网页格式预设可供选择。对于一张图片，我们应该考虑是使用JPEG 低、JPEG 中，还是JPEG高。观察下对比图，可以发现案例中的图片经过压缩后并没有多大的品质损耗。相比起超过1.1M的源文件，我们选择中等质量或者高等质量的压缩预设就能够得到一个大小不超过4KB，并有合适品质的图片。 * 有些时候,我们会被要求用无损格式来保存，以便最好地优化正在创作的作品。这在网页设计中时常遇到，在布局上使用比普通图片更少的颜色。 GIF，全称为“图像互换格式”，是一种只用到256个颜色调色板的图片格式，这让它成为不需要使用太广泛色域的网页图片的理想选择。 如图展示了一张(使用着256个颜色的)GIF图像和JPEG图像的对比照，它们拥有同样的大小.正如图所见到的，无损GIF图片能更好的接近源文件。 因为GIF图像受到256色的限制，它本应该极少被用到图片中，但是他们恰好适合那些使用纯色或是有限色彩的图像。