第12章 优化Web图像

1、第12章 优化Web图像(t xin)共三十页本章主要(zhyo)内容 ：网页图像及其概念网页元素的制作创建(chungjin)图像链接图像的优化和输出共三十页12.1学习任务：网页(wn y)图像概述网页图像，顾名思义，就是应用于网页中的图像。图形图像能将信息传达得更具体、更真实、更直接(zhji)，且易于理解，从而高效率高质量的表达设计理念，使网页充满强烈的感情色彩。在网页中合理的应用图形图像，能够形成视觉信息的中心，有利于重要信息的传达。共三十页12.1学习任务(rn wu)：网页图像概述本节学习任务理解网页图像的特点，掌握使用Photoshop优化网页图像的基本方法。目前诸多(zhdu

2、)的图形图像处理软件中，Photoshop以其强大的功能，受到业界的推崇。Photoshop提供的创建Web图像功能，更是令众多网页设计师欢欣鼓舞。利用Photoshop的图像功能，还可以制作出精美的Web图像。虽然存在很多种图像文件格式，但网页中通常使用的只有3种，即 GIF、JPEG 和 PNG。共三十页12.1学习任务(rn wu)：网页图像概述JPEG（联合图像专家组）：JPEG文件格式是用于摄影或连续色调图像的较好格式，这是因为JPEG文件可以包含数百万种颜色。随着JPEG文件品质的提高，文件的大小和下载时间也会随之增加。通常可以通过压缩JPEG文件在图像品质和文件大小之间达到良好的

3、平衡。JPEG文件的扩展(kuzhn)名为.jpg或.jpeg。PNG（可移植网络图形）：PNG文件格式是一种替代GIF格式的无专利权限制的格式，它包括对索引色、灰度、真彩色图像以及alpha通道透明度的支持。PNG是Adobe Fireworks固有的文件格式。PNG文件可保留所有原始层、矢量、颜色和效果信息（例如阴影），并且在任何时候所有元素都是可以完全编辑的。PNG文件的扩展名为.png。共三十页12.1学习任务(rn wu)：网页图像概述GIF（图形交换格式）：GIF文件最多使用256种颜色，最适合显示色调不连续或具有大面积单一颜色的图像(t xin)，例如导航条、按钮、图标、徽标或其

4、它具有统一色彩和色调的图像(t xin)。GIF文件的扩展名为.gif。共三十页12.2学习(xux)任务：图像的优化和输出 本节学习任务了解影响文件大小的几个重要因素，掌握图像(t xin)优化和输出的方法，能够编辑图页中使用的图像(t xin)。共三十页12.2学习任务(rn wu)：图像的优化和输出 网页图像和普通图像的主要区别是，由于网速问题，必须考虑网页图像大小。影响文件大小的几个重要因素是：分辨率、图像尺寸、颜色数目和图像格式，所以优化图像时，就必须考虑这些相关因素，特别是颜色数目和图像格式。颜色数目不同，产生的文件大小也不一样。对于常见的Web图像格式，GIF格式(g shi)的

5、文件要小些，而PNG格式的文件要大些，JPEG格式的文件介于这两者之间。共三十页在Photoshop CS5中，优化图像可以通过“文件存储(cn ch)为Web和设备所用格式”菜单命令实现。下面通过具体操作介绍优化图像的方法。（1）在Photoshop中打开网页banner，将其优化输出。选择“文件存储为Web和设备所用格式”菜单命令，打开“存储为Web和设备所用格式”对话框。（2）在“预设”选项下面的“优化的文件格式”列表中，优化格式有5种：GIF、JPEG、PNG-8、PNG-24和WBMP，根据需要选择优化的文件格式，本例选择优化的文件格式是JPEG格式。12.2学习任务(rn wu)：

6、图像的优化和输出 共三十页存储为Web和设备所用(su yn)格式对话框12.2学习任务(rn wu)：图像的优化和输出 共三十页（3）可以对优化的图像进行参数设置，比如，若图像的质量或大小不能满足用户的要求，可以通过调整(tiozhng)“品质”、“模糊”的数值使之符合要求。设置时一定与原图进行比较，以达到最佳效果。（4）对当前图像设置完优化格式后，还可以设置图像的颜色和大小。将图像优化为GIF格式、PNG格式和WBMP格式时，可以通过“储存为Web和设备所用格式”对话框中的“颜色表”对颜色进行进一步设置，颜色表如下图所示。12.2学习(xux)任务：图像的优化和输出 共三十页图12-2 “

7、颜色(yns)表”调板12.2学习任务：图像(t xin)的优化和输出 共三十页“颜色表”调板各项含义如下：颜色总数：显示(xinsh)“颜色表”调板中颜色的总数量。将选中的颜色映射为透明：在“颜色表”调板中选择相应的颜色后，单击该按钮，可以将当前优化图像中的选取颜色转换成透明。Web转换：把在“颜色表”调板中选取的颜色转换成Web安全色。颜色锁定：把在“颜色表”调板中选取的颜色锁定，被锁定的颜色样本在右下角会出现一个被锁定的方块图标。将锁定的颜色样本选取再单击“锁定颜色”按钮会将锁定的颜色样本解锁。12.2学习任务：图像(t xin)的优化和输出 共三十页新建颜色：单击该按钮可以(ky)将“

8、吸管”工具吸取的颜色添加到“颜色表”调板中，新建的颜色样本会自动处于锁定状态。删除：在“颜色表”调板中选择颜色样本后，单击此按钮可以将选取的颜色样本删除，或者直接拖曳到删除按钮上将其删除。12.2学习任务(rn wu)：图像的优化和输出 共三十页提示：当图像较大时，优化的效果不会太理想，这时可以采取分片压缩功能，也就是说将较大的图像按照用户的要求裁成很多块，每一块图像都可以按照不同的设置进行优化压缩，并且每一块都可以连接不同的URL地址，存储后生成(shn chn)一段HTML代码，但在网页中还是一幅完整的图像，这样图像在网页中的显示速度就快多了。（5）颜色设置完毕，可以通过“储存为Web和设

9、备所用格式”对话框中的“图像大小”部分对优化的图像设置输出大小，设置完毕，单击【存储】按钮，将图像保存为Web图像格式。12.2学习(xux)任务：图像的优化和输出 共三十页12.3学习(xux)任务：切片 本节学习任务了解切片的含义，熟悉切片工具的使用方法，掌握为切片创建超链接的基本操作。创建切片的方法非常简单，单击工具箱中“切片”工具，在打开的图像中，按住鼠标左键在图像需要切分的区域拖动鼠标，图像被自动分割成多个区域，并自动为各个分割区域自左向右、自上而下(z shn r xi)自动编号，默认设置下按照01、02、03顺序命名，其中1个区域为用户切片，另外的区域为自动切片。共三十页使用“切

10、片选择”工具可以选择分割后的切片，按下鼠标拖动即可移动切片。对于(duy)创建的切片，可以在Photoshop中为其设置图像超链接。“切片选项”对话框中各选项的含义：切片类型：在下拉列表中可选择所选切片的类型，默认为“图像”。名称：设定所选切片的名称。URL：设定所选切片的超链接地址。目标：设定被链接目标的打开方式。12.3学习任务(rn wu)：切片 共三十页Alt标记：指定当前切片(qi pin)的替代文本，在生成的HTML网页中，鼠标指向切片时可显示该文本。尺寸：指定当前切片的位置、宽度和高度。切片背景类型：指定当前切片背景的颜色。生成(shn chn)的文件 浏览效果12.3学习任务：

11、切片 共三十页12.4案例(n l)制作制作网页banner当浏览者访问网站的时候，网站首页效果是非常(fichng)重要的，它在很大程度上影响了用户是否继续访问网站。因此，网页banner设计起到了至关重要的展示作用，特别是对于首页banner，有效的信息传达让用户和文字之间的互动变得生动而有趣。 共三十页案例分析本案例介绍某学院网页banner的制作(zhzu)方法。在制作(zhzu)过程中，要综合考虑图像素材的搜集与选用，图像配色方案的选择以及元素的布局，并要求和网页的主题协调一致。案例效果网页banner最终效果图所示。图12-8 网页(wn y)banner效果图12.4案例制作制作

12、网页banner共三十页提示：banner的大小和网页的分辨率有关，目前主流分辨率为1024像素*768像素，通常将网页宽度设置为1002像素。在进行网页banner设计时，要注意色彩(sci)的搭配，确保其风格和网页整体风格是统一的。12.4案例制作(zhzu)制作网页banner共三十页12.5 实训演练(yn lin)一、实训目的掌握使用切片(qi pin)工具分割图像的方法掌握创建图像超链接的方法掌握图像优化和输出的方法掌握使用Photoshop创建网页元素的方法共三十页二、实训内容1制作Web交互图像按钮图像交互技术在网页制作中被广泛应用于图像按钮特效。当鼠标指向网页中的图像时，会触

13、发(chf)另一幅图像的交互显示。交互式图像按钮可以使网页导航更加人性化和美观，深得网页设计者的喜爱。交互图像有两幅图像组成 鼠标经过(jnggu)前的图像 鼠标经过(jnggu)时的图像12.5 实训演练共三十页2制作Web网页背景网页的背景设计非常重要。网页背景好比于一间房子的墙壁和地板(dbn)，是整个房间的基础。网页背景不但影响浏览者对网页内容的接受程度，还能影响浏览者对整个网站的印象。网页背景分为颜色背景和图片背景两种。颜色背景又称为纯色背景，使用一种纯色作为网页背景；图片背景分为渐变背景、图案背景、照片背景、复合背景等。12.5 实训演练(yn lin)共三十页网页(wn y)设计

14、中的渐变背景12.5 实训演练(yn lin)共三十页3设计一个展示家乡风采的网站首页。选择网站主色调及整体风格，用Photshop处理首页效果图，用切片工具分割图像并设计导航栏的超链接地址，最后(zuhu)通过Photoshop中的“文件存储为Web和设备所用格式”菜单命令将其发布为Web页。12.5 实训演练(yn lin)共三十页参考(cnko)效果图12.5 实训演练(yn lin)共三十页12.6 习题(xt)请完成本章最后(zuhu)列出的习题。共三十页谢 谢 ！共三十页内容摘要第12章 优化Web图像。网页图像，顾名思义，就是应用(yngyng)于网页中的图像。虽然存在很多种图像文件格式，但网页中通常使用的只有3种，即 GIF、JPEG 和 P