中文版PhotoshopCS5案例与实训教程课件作者李敏第12章节优化Web图像.ppt

尚辅网 / 第12章 优化Web图像 本章主要内容 ： 网页图像及其概念 网页元素的制作 创建图像链接 图像的优化和输出 12.1学习任务：网页图像概述 网页图像，顾名思义，就是应用于网页中的图像。图形图像能将信息传达得更具体、更真实、更直接，且易于理解，从而高效率高质量的表达设计理念，使网页充满强烈的感情色彩。在网页中合理的应用图形图像，能够形成视觉信息的中心，有利于重要信息的传达。 12.1学习任务：网页图像概述 ?本节学习任务 理解网页图像的特点，掌握使用Photoshop优化网页图像的基本方法。 目前诸多的图形图像处理软件中，Photoshop以其强大的功能，受到业界的推崇。Photoshop提供的创建Web图像功能，更是令众多网页设计师欢欣鼓舞。利用Photoshop的图像功能，还可以制作出精美的Web图像。 虽然存在很多种图像文件格式，但网页中通常使用的只有3种，即 GIF、JPEG 和 PNG。 12.1学习任务：网页图像概述 JPEG（联合图像专家组）：JPEG文件格式是用于摄影或连续色调图像的较好格式，这是因为JPEG文件可以包含数百万种颜色。随着JPEG文件品质的提高，文件的大小和下载时间也会随之增加。通常可以通过压缩JPEG文件在图像品质和文件大小之间达到良好的平衡。JPEG文件的扩展名为.jpg或.jpeg。 PNG（可移植网络图形）：PNG文件格式是一种替代GIF格式的无专利权限制的格式，它包括对索引色、灰度、真彩色图像以及alpha通道透明度的支持。PNG是Adobe? Fireworks?固有的文件格式。PNG文件可保留所有原始层、矢量、颜色和效果信息（例如阴影），并且在任何时候所有元素都是可以完全编辑的。PNG文件的扩展名为.png。 12.1学习任务：网页图像概述 GIF（图形交换格式）：GIF文件最多使用256种颜色，最适合显示色调不连续或具有大面积单一颜色的图像，例如导航条、按钮、图标、徽标或其它具有统一色彩和色调的图像。GIF文件的扩展名为.gif。 12.2学习任务：图像的优化和输出 ?本节学习任务 了解影响文件大小的几个重要因素，掌握图像优化和输出的方法，能够编辑图页中使用的图像。 12.2学习任务：图像的优化和输出 网页图像和普通图像的主要区别是，由于网速问题，必须考虑网页图像大小。影响文件大小的几个重要因素是：分辨率、图像尺寸、颜色数目和图像格式，所以优化图像时，就必须考虑这些相关因素，特别是颜色数目和图像格式。 颜色数目不同，产生的文件大小也不一样。对于常见的Web图像格式，GIF格式的文件要小些，而PNG格式的文件要大些，JPEG格式的文件介于这两者之间。 在Photoshop CS5中，优化图像可以通过“文件→存储为Web和设备所用格式”菜单命令实现。下面通过具体操作介绍优化图像的方法。 （1）在Photoshop中打开网页banner，将其优化输出。选择“文件→存储为Web和设备所用格式”菜单命令，打开“存储为Web和设备所用格式”对话框。 （2）在“预设”选项下面的“优化的文件格式”列表中，优化格式有5种：GIF、JPEG、PNG-8、PNG-24和WBMP，根据需要选择优化的文件格式，本例选择优化的文件格式是JPEG格式。 12.2学习任务：图像的优化和输出 存储为Web和设备所用格式对话框 12.2学习任务：图像的优化和输出 （3）可以对优化的图像进行参数设置，比如，若图像的质量或大小不能满足用户的要求，可以通过调整“品质”、“模糊”的数值使之符合要求。设置时一定与原图进行比较，以达到最佳效果。 （4）对当前图像设置完优化格式后，还可以设置图像的颜色和大小。将图像优化为GIF格式、PNG格式和WBMP格式时，可以通过“储存为Web和设备所用格式”对话框中的“颜色表”对颜色进行进一步设置，颜色表如下图所示。 12.2学习任务：图像的优化和输出 图12-2 “颜色表”调板 12.2学习任务：图像的优化和输出 “颜色表”调板各项含义如下： 颜色总数：显示“颜色表”调板中颜色的总数量。 将选中的颜色映射为透明：在“颜色表”调板中选择相应的颜色后，单击该按钮，可以将当前优化图像中的选取颜色转换成透明。 Web转换：把在“颜色表”调板中选取的颜色转换成Web安全色。 颜色锁定：把在“颜色表”调板中选取的颜色锁定，被锁定的颜色样本在右下角会出现一个被锁定的方块图标。将锁定的颜色样本选取再单击“锁定颜色”按钮会将锁定的颜色样本解锁。 12.2学习任务：图像的优化和输出 新建颜色：单击该按钮可以将“吸管”工具吸取的颜色添加到“颜色表”调板中，新建的颜色样本会自动处于锁定状态。 删除：在“颜色表”调板中选择颜色样本后，单击此按钮可以将选