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

第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学习任务：图像的优化和输出,新建颜色：单击该按钮可以将“吸管”工具吸取的颜色添加到“颜色表”调板中，新建的颜色样本会自动处于锁定状态。 删除：在“颜色表”调板中选择颜色样本后，单击此按钮可以将选取的颜色样本删除，或者直接拖曳到删除按钮上将其删除。,12.2学习任务：图像的优化和输出,提示：当图像较大时，优化的效果不会太理想，这时可以采取分片压缩功能，也就是说将较大的图像按照用户的要求裁成很多块，每一块图像都可以按照不同的设置进行优化压缩，并且每一块都可以连接不同的URL地址，存储后生成一段HTML代码，但在网页中还是一幅完整的图像，这样图像在网页中的显示速度就快多了。 （5）颜色设置完毕，可以通过“储存为Web和设备所用格式”对话框中的“图像大小”部分对优化的图像设置输出大小，设置完毕，单击【存储】按钮，将图像保存为Web图像格式。,12.2学习任务：图像的优化和输出,12.3学习任务：切片,本节学习任务 了解切片的含义，熟悉切片工具的使用方法，掌握为切片创建超链接的基本操作。 创建切片的方法非常简单，单击工具箱中“切片”工具，在打开的图像中，按住鼠标左键在图像需要切分的区域拖动鼠标，图像被自动分割成多个区域，并自动为各个分割区域自左向右、自上而下自动编号，默认设置下按照01、02、03顺序命名，其中1个区域为用户切片，另外的区域为自动切片。,使用“切片选择”工具可以选择分割后的切片，按下鼠标拖动即可移动切片。对于创建的切片，可以在Photoshop中为其设置图像超链接。 “切片选项”对话框中各选项的含义： 切片类型：在下拉列表中可选择所选切片的类型，默认为“图像”。 名称：设定所选切片的名称。 URL：设定所选切片的超链接地址。 目标：设定被链接目标的打开方式。,12.3学习任务：切片,Alt标记：指定当前切片的替代文本，在生成的HTML网页中，鼠标指向切片时可显示该文本。 尺寸：指定当前切片的位置、宽度和高度。 切片背景类型：指定当前切片背景的颜色。,生成的文件,浏览效果,12.3学习任务：切片,12.4案例制作制作网页banner,当浏览者访问网站的时候，网站首页效果是非常重要的，它在很大程度上影响了用户是否继续访问网站。因此，网页banner设计起到了至关重要的展示作用，特别是对于首页banner，有效的信息传达让用户和文字之间的互动变得生动而有趣。,案例分析本案例介绍某学院网页banner的制作方法。在制作过程中，要综合考虑图像素材的搜集与选用，图像配色方案的选择以及元素的布局，并要求和网页的主题协调一致。 案例效果网页banner最终效果图所示。,图12-8 网页banner效果图,12.4案例制作制作网页banner,提示：banner的大小和网页的分辨率有关，目前主流分辨率为1024像素*768像素，通常将网页宽度设置为1002像素。在进行网页banner设计时，要注意色彩的搭配，确保其风格和网页整体风格是统一的。,12.4案例制作制作网页banner,12.5 实训演练,一、实训目的 掌握使用切片工具分割图像的方法 掌握创建图像超链接的方法 掌握图像优化和输出的方法 掌握使用Photoshop创建网页元素的方法,二、实训内容 1制作Web交互图像按钮 图像交互技术在网页制作中被广泛应用于图像按钮特效。当鼠标指向网页中的图像时，会触发另一幅图像的交互显示。交互式图像按钮可以使网页导航更加人性化和美观，深得网页设计者的喜爱。交互图像有两幅图像组成,鼠标经过前的图像 鼠标经过时的图像,12.5 实训演练,2制作Web网页背景 网页的背景设计非常重要。网页背景好比于一间房子的墙壁和地板，是整个房间的基础。网页背景不但影响浏览者对网页内容的接受程度，还能影响浏览者对整个网站的印象。 网页背景分为颜色背景和图片背景两种。颜色背景又称为纯色背景，使用一种纯色作为网页背景；图片背景分为渐变背景、图案背景、照片背景、复合背景等。,12.5 实训演练,网页设计中的渐变背景,12.5 实训演练,3设计一个展示家乡风采的网站首页。选择网站主色调及整体风格，用Photshop处理首页效果图，用切片工具分割图像并设计导航栏的超链接地址，最后通过Photoshop中的“文件存储为Web和设备所用格式”菜单命令将其发布为Web页。,12.5 实训演练,参考效果图,12.5 实训演练,12.6 习题,请完成本章最后列出的习题。,谢 谢 ！,