资源描述
单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,第,12,章,Web,图形和动画,12.1,关于,Web,图像,12.2,切片,12.3,制作翻转图像或按钮,12.4,制作动画,12.5,优化并输出,Web,图像,12.6,应用实例,12.7,习题与实验指导,主目录,第12章 Web图形和动画 12.1 关于Web图像,12.1,关于,Web,图像,12.1.1,常用的,Web,图像格式,Web,图像主要有三种图像文件格式，分别为,JPEG,、,GIF,、,PNG,格式。,GIF,格式：,通过减少图像中的颜色数目来压缩文件，因此适合颜色比较少的图像，如图标、符号、边框等。另外,GIF,格式还可以保存透明图像和动画图像。,JPEG,格式：,通过删除图像中的数据信息来压缩文件，虽然也是有损压缩，但是不会改变图像的颜色数目，因此适合色彩丰富，文件较大的图像，但是不支持透明图像。,PNG,格式：,采用无损压缩方式来减少文件的大小，兼有,GIF,和,JPG,的色彩模式，不但能把图像文件压缩到极限又能保留所有与图像品质有关的信息，支持透明图像，不支持动画图像。,12.1 关于Web图像12.1.1 常用的Web图像格,12.1.2,设计,Web,图像,Web,图像通常是低分辨率的，一般设置为,72,像素,/,英寸，而且通常采用,RGB,色彩模式。一个,Web,页面是各种图像，文字和符号等信息内容的综合体，如何合理编排优化各种内容是,Web,图像设计的关键。,Web,图像设计包括如下内容：,背景设计,文本设计,图片设计,图标设计,动画设计,本章目录,12.1.2 设计Web图像 Web图像通常是低分辨率,12.2,切片,使用“切片工具”可以将一幅图像切割成若干个小图像，每个图像切片都包含独立的调色板、,URL,链接对象和优化设置，可以提高图像的上传下载速度。一般应用于网络的大图或设计网页以及制作各种图标、图像，用户还可以利用切分制作翻转使用的图片组。,12.2 切片使用“切片工具”可以将一幅图像切割成若,12.2.1,创建切片,1,用户自定义切片,使用“切片工具”绘制切片的基本步骤如下：,（,1,）从工具箱中选择“切片工具”工具。,（,2,）单击选项栏中的切片列表，从中选择一项：正常、约束长宽比、固定大小。,（,3,）移动切片工具到图像上，并在要创建切片的区域上拖动。按住,Shift,键可产生正方形切片，按住,Alt,Shift,键可以单击点为中心向外扩展正方形，如下图所示。,用户自定义切片,12.2.1 创建切片 1用户自定义切片用户自定义切,2,基于图层的切片,使用“新建基于图层的切片”菜单命令创建基于图层的切片的基本步骤如下：,（,1,）在“图层调板”新建一个“图层,1”,。,（,2,）在该图层里，使用“矩形”工具 绘制一矩形。,（,3,）选择“图层,新建基于图层的切片”命令，自动创建切片，如下图所示。,基于图层的切片,2基于图层的切片基于图层的切片,3,基于参考线的切片,创建基于参考线的切片的基本步骤如下：,（,1,）向图像中添加参考线。,（,2,）选择“切片工具”，然后在选项栏中单击“基于参考线的切片”，如下图所示。,基于参考线的切片,3基于参考线的切片 基于参考线的切片,4,自动切片提升到用户切片,在创建新的用户切片或基于图层的切片时，将会生成附加自动切片来占据图像的其余区域。换句话说，自动切片填充图像中用户切片或基于图层的切片未定义的空间。每次添加或编辑用户切片或基于图层的切片时，都会重新生成自动切片。可以将自动切片转换为用户切片。,4自动切片提升到用户切片,12.2.2,修改切片,移动切片：,用“切片选择”工具选择要移动的用户切片，然后按住鼠标左键不放，拖动“切片”即可改变用户切片的位置，如右图所示。,改变切片大小,：,拖动“用户切片”四周的手柄则可以改变大小，如右图所示。,如果要修改切片，首先要选择切片。通过“切片选择”工具单击图片可选则切片，按住,Shift,键可以选择多个切片。,移动切片,改变切片大小,12.2.2 修改切片 移动切片：如果要修改切,复制切片：,选定一个或多个“用户切片”，按,Ctrl,键不放，拖动切片，即可复制切片，如右图所示。,删除切片：,选定一个或多个“用户切片”，单击右键，在弹出的菜单中选择“删除切片”选项，或者按,Del,键也可以删除切片。,组合切片：,对于选定的多个“用户切片”，可执行“组合切片”命令，如右图所示。,复制切片,选择两个切片图,组合切片,复制切片：复制切片 选择两个切片图 组合切片,12.2.3,划分切片,对要切分的切片单击“右键”，在弹出菜单中选择“划分切片”命令。在弹出的划分切片对话框中输入水平划分垂直划分的参数，如图所示。,水平划分 垂直划分 水平划分 垂直划分,12.2.3 划分切片 对要切分的切片单击“右键”，在,12.2.4,切片属性,切片类型：,默认情况下，切片类型为“图像”，切片包含图像数据；若选择无图像，切片包含纯色或,HTML,文本。,名称：,定义切片的名称,URL,：,在,URL,文本框中输入链接地址，创建超级链接。,目标：,设置打开链接位置的窗口状态。,信息文本：,切片选项调板会提示输入一段文本，在网页上使用这段文本代替切片。,Alt,标记：,如果在该输入框输入内容，则当光标接触到切片时，这些内容就会在光标旁的提示信息中显示出来。,尺寸：,设置切片的尺寸。,切片背景类型：,设置空白切片的背景。,切片选项对话框,用户可以使用切片选项来指定切片数据显示在,Web,浏览器中的方式，右键单击切片，在快捷菜单中选择“编辑切片选项”命令，就会弹出切片选项对话框，如下图所示。,本章目录,12.2.4 切片属性 切片类型：默认情况下，切片类型,12.3,制作翻转图像或按钮,翻转是网页上的一个按钮或图像，当鼠标移动到它上方时会发生变化。要创建翻转，至少需要两个图像：主图像表示处于正常状态的图像，而次图像表示处于更改状态的图像。,目前,Photoshop CS3,虽然没有提供翻转功能，但用户可以通过,Photoshop CS3,的绘制工具和切片工具来制作用于翻转图像或按钮的图像组，最后使用,Dreamweaver CS3,将这些图像置入网页中并添加,Javascript,代码制作翻转，具体方法如下：,1,使用图层创建主图像和次图像。,2,将每个图层存储为单独的图像以创建完成的翻转按钮组。,本章目录,12.3 制作翻转图像或按钮翻转是网页上的一个按钮或,12.4,制作动画,Photoshop CS3,能够制作出网页,GIF,动画。,GIF,动画就是设置好一系列,图像或帧的顺序、装载时间和播放次数等，类似于电影胶片的原理。制作,动画需要结合应用“图层”和动画调板，且处理图层是创建动画的关键，如,下图所示。,动画调板,帧延迟时间,删除,所选帧,复制所选帧,过渡动画,帧,选择下一,帧,播放动画,选择上一,帧,选择第一,帧,12.4 制作动画 Photoshop CS3能够制作,12.4.1,帧动画,本节通过制作一个简单的打字动画来详细了解制作帧动画的基本方法，如下图所示。,打字动画,12.4.1 帧动画 本节通过制作一个简单的打字动画来,12.4.2,过渡动画,本节通过制作一个“跳动的球”动画来详细了解制作过渡动画的基本方法，如下图所示。,跳动的球动画,本章目录,12.4.2 过渡动画 本节通过制作一个“跳动的球”动,12.5,优化并输出,Web,图像,优化网页图像是在保证图像质量的前提下尽量使文件体积减小，以便于在网上传输。而在制作网页时要用到很多图片，如果这些图片教大，就会影响网页的浏览速度。,Photoshop CS3,提供了强大的优化输出工具，用户能够在压缩图像文件大小的同时又能优化在线显示图像的品质。,12.5 优化并输出Web图像 优化网页图像是在保证图,12.5.1,优化并输出图像,选择“文件”,“,存储为,Web,和设备所用格式”命令，即可弹出“存储为,Web,和设备所用格式”对话框，如右图所示。在对话框中可以选择输出,JPEG,、,GIF,、,PNG,等一般常用的网页图像的格式，设置相应的优化参数。,视图的显示方式可以有优化、双联、四联，如在四联视图模式下，用户可以看到原始图像，也可以看到其他,3,种不同压缩方式的预览图，每个预览都显示了文件的大小和下载时间，也可以用工具箱里的工具对预览图进行移动、缩放及颜色取样等操作。,“,存储为,Web,和设备所用格式”对话框,12.5.1 优化并输出图像选择“文件”“存储为We,12.5.2 Web,图像文件的格式的选择及其优化,1.JPEG,。,擅长压缩图片，可提供完全的,32,位颜色，但不允许使图像的部分透明，如果用了过高的压缩值，,JPEG,会导致严重的图像失真，如右图所示。,预设：已存储的优化设置,文件格式：,JPEG,压缩品质：下拉列表有低、中、高、非常高、最佳,5,个选项可以选择。,连续：在,Web,浏览器中以渐进方式显示图像。,IOC,配置文件：随文件一起保留图片的,ICC,配置文件。,优化：创建文件大小稍小的增强,JPEG,。,品质：微调压缩品质。,模糊：指定应用于图像的模糊量。,杂边：为在原始图像中透明的像素指定一个填充颜色。,优化,JPEG,12.5.2 Web图像文件的格式的选择及其优化 1.,2.GIF,格式。,适合单调颜色的图片和较小的文件，支持有限的透明度，支持动画，但其压缩方法是对颜色单调,区域,优化的，因此对较大的图片效果比较差。优化设置对话框如右图所示。,优化,GIF,预设：已存储的优化设置,文件格式：,GIF,减低颜色深度算法：指定用于生成颜色查找表的方法，以及想要在颜色查找表中使用的颜色数量。,仿色算法和仿色：确定应用程序仿色的方法和数量。,透明度：选择则启用透明度的相关设置。,透明度设置：确定如何优化图像中的透明像素。,交错：当完整图像文件正在下载时，在浏览器中显示图像的低分辨率版本。,损耗：通过有选择地扔掉数据来减小文件大小。,颜色：设置颜色的数量。,杂边：为在原始图像中透明的像素指定一个填充颜色。,Web,靠色：指定将颜色转换为最接近的,Web,调板等效颜色的容差级别（并防止颜色在浏览器中进行仿色）。,2.GIF格式。优化GIF 预设：已存储的优化设置,3.PNG-8,能精确控制透明度，压缩效果很好，但一些较老的浏览器不支持,PNG,所有的选项，常用于,FLASH,动画的图片制作。优化设置对话框如右图所示，其具体的设置可参考,GIF,格式。,4.PNG-24,PNG-24,适合于压缩连续色调图像；但它所生成的文件比,JPEG,格式生成的文件要大得多。使用,PNG-24,的优点在于可在图像中保留多达,256,个透明度级别。优化设置对话框如右图所示，其具体的设置可参考,GIF,格式。,优化,PNG-8,优化,PNG-24,3.PNG-8优化PNG-8 优化PNG-24,无仿色：根本不应用仿色，同时用纯黑和纯白像素渲染图像。,扩散：应用与“图案”仿色相比通常不太明显的随机图案。仿色效果在相邻像素间扩散。如果选择此算法，请指定“仿色”百分比以控制应用于图像的仿色量。,图案：应用类似半调的方块图案来确定像素值。,杂色：应用与“扩散”仿色相似的随机图案，但不在相邻像素间扩散图案。使用“杂色”算法时不会出现接缝。,5.WBMP,WBMP,格式是用于优化移动设备（如移动电话）图像的标准格式。,WBMP,支持,1,位颜色，意即,WBMP,图像只包含黑色和白色像素。其优化设置对话框如下图所示。,仿色算法和“仿色”选项确定应用程序仿色的方法和数量。为了获得最佳压缩比，请使用可提供所需细节的最低百分比的仿色。可以选择以下几种仿色方法之一：,优化,WBMP,无仿色：根本不应用仿色，同时用纯黑和纯白像素渲染图像,12.5.3,优化切片图像,（,1,）选择“文件”,“,存储为,Web,和设备所用格式”菜单命令，在弹出的对话框中进行优化设置，选择“双联”，
展开阅读全文