PhotoshopCS中文版实用教程第15章.ppt

第15章创建Web图像 15 1关于Web图像15 2应用ImageReadyCS处理Web图像15 3使用ImageReady优化Web图像15 4GIF动画的制作 主目录 PhotoshopCS增强的一项重要功能就是创建Web 网络 图像 该功能令众多网页设计师欢欣鼓舞 利用PhotoshopCS的图像功能 本身就可以制作精美的Web图像 但更重要的是它继续捆绑了ImageReadyCS 大大提高了网页图像设计的效率 在Photoshop7 0版本时 Adobe将Photoshop和ImageReady两个软件结合在一起 从而大受客户欢迎 在PhotoshopCS版本发布时捆绑发布了ImageReadyCS 其中增强了不少关于进阶网页设计时可以使用的优异功能 这提高了网页设计师的工作效率 15 1关于Web图像 Web图像比其他的专业图像小 一般都是几KB到几十KB 上百KB的一般都做成专门的图像链接了 这一特点主要是由网络的带宽所决定的 许多Web图像内还必须包含超级链接 作为页面的一部分 Web图像不仅仅是一幅图像 它还是通往站点中其他内容的路径 在Web图像领域中还有两个基本概念 位深和文件格式 位深 用来表示图像中每种颜色的位数 它也可以代表一个文件中的颜色数 文件可以是8位 16位或24位的 文件格式 是图像存储的方法 同一个图像 不同的存储方法将会有不同的文件大小 所以图像浏览器都支持两种文件格式 GIF和JPEG 15 2应用ImageReadyCS处理Web图像 ImageReady是专门用于处理Web图像和动画的编辑工具 可以用图像装饰Web网页 并通过切片工具和图像映射工具将图像划分为几个热区 然后与不同图像 Web网页或站点链接 当其他用户浏览该Web网页时 单击链接区域就可以访问相应的内容 另外还可以通过翻转和动画制作特殊的Web网页效果 本章目录 15 2 1ImageReadyCS主窗口 1 优化面板通过该面板 可以对Web图像进行优化处理 ImageReady允许用GIF JPEG PNG 8 PNG 24等格式进行优化 2 切片面板对于用切片工具创建好的切片 用切片面板可以设置URL 链接对象 尺寸 背景 状态栏信息等 15 2 2应用ImageReady创建切片 打开要创建切片的图像 在工具箱中选择切片工具 从选项工具栏的样式列表框中选择一种创建切片的样式 在图像中的目标区域拖动鼠标创建一个矩形用户切片 图像中的剩余区域都会自动成为自动切片 如图所示 选择Windows菜单中的切片命令 打开切片面板 指定切片的类型 背景颜色 名称和要链接到的URL地址等信息 在创建切片时 如果按住Shift键 则创建的切片都将是正方形切片 如果按住Alt键 则创建的切片将以鼠标单击处为中心 如果需要均分图像时 可以选择 切片 划分切片 命令 打开的 划分切片 对话框 划分切片 对话框 分割切片的图像 本章目录 15 3使用ImageReady优化Web图像 15 3 1优化Web图像的基本步骤 1 ImageReady中打开需要修改的图像文件 用裁切工具裁切图像 只留取需要的部分 2 执行 图像 图像大小 命令 将图像规格设置为需要的大小 3 单击图像窗口的 四联 标签 图像窗口将出现4个在不同格式 或压缩比 下的预览图像 可以根据每个图像底部的信息初步作出压缩比的选择 4 如果要对初步选择的压缩图像进一步修改 可以先单击该图像的压缩预览窗口 然后修改优化工作面板的各选项 5 单击预设列表右侧的按钮打开一个对话框 用来保存优化设置的各个设置参数 如文件格式 颜色工作面板 品质信息等 6 位于预设列表下面的是文件格式列表 通过选择列表中的项目可以改变图像的格式 优化工作结束后 单击视觉品质和文件大小都达到最满意的一个图像 然后保存 15 3 2JPEG格式图像的优化 对于JPG格式的图像 可以通过设置它的压缩品质以及模糊等选项来改变其文件大小 15 3 3GIF格式图像的优化 在优化工作面板中 只能对GIF格式图像的颜色做总体的设置 如果希望编辑图像的每一种颜色 则需要使用颜色表工作面板 颜色表工作面板的使用方法如下 1 在图像窗口中选择要编辑颜色的GIF图像 2 在颜色表工作面板中单击颜色右边的按钮 此时所有图像中用到的颜色都出现在该工作面板中 如图所示 在工作面板底部可以看到当前图像中使用颜色的具体数目 3 如果要从图像中减少一种颜色 可以在颜色表工作面板的颜色列表中单击这种颜色 然后单击工作面板的删除图标即可 如果要从图像中减少多种颜色 则可以按住Shift键来单击选中颜色列表中的多个颜色 然后进行删除操作 删除颜色可以减小图像的大小 15 3 4PNG格式图像的优化 4 双击颜色表工作面板的颜色列表可以打开 拾色器 对话框 用以挑选并改变当前颜色 5 选择颜色后 单击转换颜色图标 可以将颜色转换为相应的Web工作面板颜色 转换后图像的颜色数目以及文件长度都将相应减少 6 也可以锁定某些颜色不被转换 方法是 单击要保留的颜色 然后单击颜色表工作面板的锁定颜色图标 由于GIF格式的图像允许在图像中出现透明部分 因此在有透明部分的图像中 其颜色表的末尾还会有一个用灰白格子标示的 透明 颜色 这与其他格式的图像是不同的 1 优化PNG 8格式PNG 8使用8位颜色 在压缩时采用较高级的压缩技术 可以有效压缩图像中的颜色 并可以保存一些图像细节 图像质量要比GIF好10 30 左右 如果要优化的图像使用8位颜色 可以使用PNG 8格式来优化进行无损压缩 2 优化PNG 24格式PNG 24是一种支持24位颜色的PNG图像格式 它支持图像多级透明度 PNG 24格式的图像质量比较高 能够连续下载显示 是对质量要求比较高的图像首选的优化格式 不过 PNG 24格式的文件相对尺寸比较大 本章目录 15 4GIF动画的制作 本节内容请同学们上机实践完成 本章目录 课堂讲解全部结束 谢谢大家