photoshop+图形图像设计与项目实践12

《photoshop+图形图像设计与项目实践12》由会员分享，可在线阅读，更多相关《photoshop+图形图像设计与项目实践12（26页珍藏版）》请在金锄头文库上搜索。

1、第12章 Web图形和动画,12.1 关于Web图像 12.2 切片 12.3 制作翻转图像或按钮 12.4 制作动画 12.5 优化并输出Web图像 12.6 应用实例 12.7 习题与实验指导,主目录,12.1 关于Web图像,12.1.1 常用的Web图像格式,Web图像主要有三种图像文件格式，分别为JPEG、GIF、PNG格式。 GIF格式： 通过减少图像中的颜色数目来压缩文件，因此适合颜色比较少的图像，如图标、符号、边框等。另外GIF格式还可以保存透明图像和动画图像。 JPEG格式： 通过删除图像中的数据信息来压缩文件，虽然也是有损压缩，但是不会改变图像的颜色数目，因此适合色彩丰富，

2、文件较大的图像，但是不支持透明图像。 PNG格式： 采用无损压缩方式来减少文件的大小，兼有GIF和JPG的色彩模式，不但能把图像文件压缩到极限又能保留所有与图像品质有关的信息，支持透明图像，不支持动画图像。,12.1.2 设计Web图像,Web图像通常是低分辨率的，一般设置为72像素/英寸，而且通常采用RGB色彩模式。一个Web页面是各种图像，文字和符号等信息内容的综合体，如何合理编排优化各种内容是Web图像设计的关键。Web图像设计包括如下内容： 背景设计 文本设计 图片设计 图标设计 动画设计,本章目录,12.2 切片,使用“切片工具”可以将一幅图像切割成若干个小图像，每个图像切片都包含独

3、立的调色板、URL链接对象和优化设置，可以提高图像的上传下载速度。一般应用于网络的大图或设计网页以及制作各种图标、图像，用户还可以利用切分制作翻转使用的图片组。,12.2.1 创建切片,1用户自定义切片 使用“切片工具” 绘制切片的基本步骤如下： （1）从工具箱中选择“切片工具”工具 。 （2）单击选项栏中的切片列表，从中选择一项：正常、约束长宽比、固定大小。 （3）移动切片工具到图像上，并在要创建切片的区域上拖动。按住Shift键可产生正方形切片，按住AltShift键可以单击点为中心向外扩展正方形，如下图所示。,用户自定义切片,2基于图层的切片 使用“新建基于图层的切片”菜单命令创建基于图

4、层的切片的基本步骤如下： （1）在“图层调板”新建一个“图层1”。 （2）在该图层里，使用“矩形”工具 绘制一矩形。 （3）选择 “图层新建基于图层的切片”命令，自动创建切片，如下图所示。,基于图层的切片,3基于参考线的切片 创建基于参考线的切片的基本步骤如下： （1）向图像中添加参考线。 （2）选择“切片工具” ，然后在选项栏中单击“基于参考线的切片”，如下图所示。,基于参考线的切片,4自动切片提升到用户切片 在创建新的用户切片或基于图层的切片时，将会生成附加自动切片来占据图像的其余区域。换句话说，自动切片填充图像中用户切片或基于图层的切片未定义的空间。每次添加或编辑用户切片或基于图层的切片

5、时，都会重新生成自动切片。可以将自动切片转换为用户切片。,12.2.2 修改切片, 移动切片： 用“切片选择”工具选择要移动的用户切片，然后按住鼠标左键不放，拖动“切片”即可改变用户切片的位置，如右图所示。 改变切片大小： 拖动“用户切片”四周的手柄则可以改变大小，如右图所示。,如果要修改切片，首先要选择切片。通过“切片选择”工具单击图片可选则切片，按住Shift键可以选择多个切片。,移动切片,改变切片大小, 复制切片： 选定一个或多个“用户切片”，按Ctrl键不放，拖动切片，即可复制切片，如右图所示。 删除切片： 选定一个或多个“用户切片”，单击右键，在弹出的菜单中选择“删除切片”选项，或者

6、按Del键也可以删除切片。 组合切片： 对于选定的多个“用户切片”，可执行“组合切片”命令，如右图所示。,复制切片,选择两个切片图,组合切片,12.2.3 划分切片,对要切分的切片单击“右键”，在弹出菜单中选择“划分切片”命令。在弹出的划分切片对话框中输入水平划分垂直划分的参数，如图所示。,水平划分 垂直划分 水平划分 垂直划分,12.2.4 切片属性, 切片类型：默认情况下，切片类型为“图像”，切片包含图像数据；若选择无图像，切片包含纯色或HTML文本。 名称：定义切片的名称 URL：在URL文本框中输入链接地址，创建超级链接。 目标：设置打开链接位置的窗口状态。 信息文本：切片选项调板会提

7、示输入一段文本，在网页上使用这段文本代替切片。 Alt标记：如果在该输入框输入内容，则当光标接触到切片时，这些内容就会在光标旁的提示信息中显示出来。 尺寸：设置切片的尺寸。 切片背景类型：设置空白切片的背景。,切片选项对话框,用户可以使用切片选项来指定切片数据显示在Web浏览器中的方式，右键单击切片，在快捷菜单中选择“编辑切片选项”命令，就会弹出切片选项对话框，如下图所示。,本章目录,12.3 制作翻转图像或按钮,翻转是网页上的一个按钮或图像，当鼠标移动到它上方时会发生变化。要创建翻转，至少需要两个图像：主图像表示处于正常状态的图像，而次图像表示处于更改状态的图像。 目前Photoshop C

8、S3虽然没有提供翻转功能，但用户可以通过Photoshop CS3的绘制工具和切片工具来制作用于翻转图像或按钮的图像组，最后使用 Dreamweaver CS3将这些图像置入网页中并添加Javascript代码制作翻转，具体方法如下：,1使用图层创建主图像和次图像。 2将每个图层存储为单独的图像以创建完成的翻转按钮组。,本章目录,12.4 制作动画,Photoshop CS3能够制作出网页GIF动画。GIF动画就是设置好一系列 图像或帧的顺序、装载时间和播放次数等，类似于电影胶片的原理。制作 动画需要结合应用“图层”和动画调板，且处理图层是创建动画的关键，如 下图所示。,12.4.1 帧动画,

9、本节通过制作一个简单的打字动画来详细了解制作帧动画的基本方法，如下图所示。,打字动画,12.4.2 过渡动画,本节通过制作一个“跳动的球”动画来详细了解制作过渡动画的基本方法，如下图所示。,跳动的球动画,本章目录,12.5 优化并输出Web图像,优化网页图像是在保证图像质量的前提下尽量使文件体积减小，以便于在网上传输。而在制作网页时要用到很多图片，如果这些图片教大，就会影响网页的浏览速度。Photoshop CS3提供了强大的优化输出工具，用户能够在压缩图像文件大小的同时又能优化在线显示图像的品质。,12.5.1 优化并输出图像,选择 “文件”“存储为Web和设备所用格式”命令，即可弹出“存储

10、为Web和设备所用格式”对话框，如右图所示。在对话框中可以选择输出JPEG、GIF、PNG等一般常用的网页图像的格式，设置相应的优化参数。 视图的显示方式可以有优化、双联、四联，如在四联视图模式下，用户可以看到原始图像，也可以看到其他3种不同压缩方式的预览图，每个预览都显示了文件的大小和下载时间，也可以用工具箱里的工具对预览图进行移动、缩放及颜色取样等操作。,“存储为Web和设备所用格式”对话框,12.5.2 Web图像文件的格式的选择及其优化,1. JPEG。 擅长压缩图片，可提供完全的32位颜色，但不允许使图像的部分透明，如果用了过高的压缩值，JPEG会导致严重的图像失真，如右图所示。 预

11、设：已存储的优化设置 文件格式：JPEG 压缩品质：下拉列表有低、中、高、非常高、最佳5个选项可以选择。 连续：在 Web 浏览器中以渐进方式显示图像。 IOC配置文件：随文件一起保留图片的 ICC 配置文件。 优化：创建文件大小稍小的增强 JPEG。 品质：微调压缩品质。 模糊：指定应用于图像的模糊量。 杂边：为在原始图像中透明的像素指定一个填充颜色。,优化JPEG,2. GIF格式。 适合单调颜色的图片和较小的文件，支持有限的透明度，支持动画，但其压缩方法是对颜色单调区域优化的，因此对较大的图片效果比较差。优化设置对话框如右图所示。,优化GIF, 预设：已存储的优化设置 文件格式：GIF

12、减低颜色深度算法：指定用于生成颜色查找表的方法，以及想要在颜色查找表中使用的颜色数量。 仿色算法和仿色：确定应用程序仿色的方法和数量。 透明度：选择则启用透明度的相关设置。 透明度设置：确定如何优化图像中的透明像素。 交错：当完整图像文件正在下载时，在浏览器中显示图像的低分辨率版本。 损耗：通过有选择地扔掉数据来减小文件大小。 颜色：设置颜色的数量。 杂边：为在原始图像中透明的像素指定一个填充颜色。 Web靠色：指定将颜色转换为最接近的 Web 调板等效颜色的容差级别（并防止颜色在浏览器中进行仿色）。,3. PNG-8 能精确控制透明度，压缩效果很好，但一些较老的浏览器不支持PNG所有的选项，

13、常用于FLASH动画的图片制作。优化设置对话框如右图所示，其具体的设置可参考GIF格式。 4. PNG-24 PNG-24 适合于压缩连续色调图像；但它所生成的文件比 JPEG 格式生成的文件要大得多。使用 PNG-24 的优点在于可在图像中保留多达 256 个透明度级别。优化设置对话框如右图所示，其具体的设置可参考GIF格式。,优化PNG-8,优化PNG-24, 无仿色：根本不应用仿色，同时用纯黑和纯白像素渲染图像。 扩散：应用与“图案”仿色相比通常不太明显的随机图案。仿色效果在相邻像素间扩散。如果选择此算法，请指定“仿色”百分比以控制应用于图像的仿色量。 图案：应用类似半调的方块图案来确定

14、像素值。 杂色：应用与“扩散”仿色相似的随机图案，但不在相邻像素间扩散图案。使用“杂色”算法时不会出现接缝。,5. WBMP WBMP 格式是用于优化移动设备（如移动电话）图像的标准格式。WBMP 支持 1 位颜色，意即 WBMP 图像只包含黑色和白色像素。其优化设置对话框如下图所示。 仿色算法和“仿色”选项确定应用程序仿色的方法和数量。为了获得最佳压缩比，请使用可提供所需细节的最低百分比的仿色。可以选择以下几种仿色方法之一：,优化WBMP,12.5.3 优化切片图像,（1）选择 “文件”“存储为Web和设备所用格式”菜单命令，在弹出的对话框中进行优化设置，选择“双联”，再选择“放大镜” 将网

15、页图像缩小到能完整预览。用户可以选择“切片选择工具” ，选择任何一个切片进行独立的优化设置，也可以选择所有的切片，对所有的切片进行整体的优化。然后在右边的“预设”栏里选择相应的优化参数，最后单击“存储”按钮，即可完成优化设置，如右图所示。,存储为Web和设备所用格式,其中，保存类型选择： HTML和图像（*.html）：保存切分的网页框架及相应的切分图片，且切分的图片放在image文件夹里。 仅图像（*.jpg）：仅保存切分的图片。 仅HTML（*.html）：仅保存网页的框架。,存储优化结果,（2）在弹出的“将优化结果存储为”对话框中，选择保存路径，输入文件名，在选择保存类型。最后单击“存储”，即可完成切分的输出保存，如右图所示。,本章目录,12.6 应用实例,实例1：制作怪物公司电影宣传网页,主要运用网页切片及Web图像优化输出来制作怪物公司电影宣传静态网页，完成得效果如右图所示。,怪物公司宣传网页,本章目录,12.7 习题与实验指导,实验1 制作逐帧动画 实验 制作过渡动画 实验 设计制作一个主题为“关于我的学校”的网页,按照教材的“习题与实验指导”部分的要求，完成作业和实验。,本章目录,