PhotoshopCS2有用的教程网页图像的设计.pptVIP

第11章 网页图像设计; Photoshop CS2和ImageReady CS2中的图形工具和功能简化了大多数Web设计任务，可以使用文本、绘图和绘画工具向版面中添加内容，可以设计和制作在Web上使用的静态或动态的图像。还可以使用切片工具，将页面版式或复杂图形划分为多个区域，并指定独立的压缩设置（从而获得较小的文件大小）。可以将图像分为切片、超链接和HTML文字、优化切片并将图像存储为一个Web页面。 还可以使用“动画”调板结合切片组、嵌套表、百分比宽度表以及远程翻转（将鼠标移到某幅图像上时，另一幅图像发生变化）来创建简单的Web动画，逐帧确定动画的外观。从 Photoshop CS2中将动画导出为动画GIF，也可以从Image-Ready CS2中将动画导出为动画GIF或SWF文件。; 单击工具箱下方的，便会打开ImageReady CS2，其工作界面与PhotoshopCS2相似，如图11-1所示。; 第11章 网页图像设计;11.1 设计Web页;11.1.1 关于切片;11.1.2 切片的类型; ? 用户切片 使用切片工具创建的切片称为用户切片。 ? 基于图层的切片 基于图层内容创建的切片称为基于图层的切片。 ? 自动切片 当创建新的用户切片或基于图层的切片时，将会用自动生成的自动切片来占据图像的其余区域。换句话说，自动切片填充图像中用户切片或基于图层的切片未定义的空间。每次添加或编辑用户切片或基于图层的切片时，都会重新生成自动切片。还可以将自动切片转换为用户切片。; ? 子切片 子切片是一种自动切片，它是在创建重叠切片时生成的。当存储被优化的文件时，子切片会显示文件的分割状况。尽管子切片有编号并显示切片标记，但是不能在脱离切片存在的情况下独立选择或编辑它们。每次排列切片的堆叠顺序时都会重新生成子切片。;11.1.3 创建切片;图11-2　打开的图像文件;（3）相应的工具选项栏，如图11-4所示。; （4）如果要改变切片的大小，可在工具箱中选择“切片选择工具”选择切片，然后拖曳切片边框的调节点。 （5）选择“文件”→“存储”命令，将完成的工作存储起来。;具体操作步骤如下： ;? 从垂直标尺拖移以创建垂直参考线，如图11-8所示。;3.基于图层的切片; （3）单击工具箱中的按钮，进入ImageReady的编辑窗口，ImageReady用一个“图层切片”取代了“自动切片”。注意切片左上角数字右侧的图标，它表示此切片（05）是一个“图层切片”，如图11-12所示。“Web内容”调板，如图11-13所示。 ; （4）单击工具箱中的按钮，返回到Photoshop中，保持当前图层的选中状态，选取“图层”→“图层样式”→“投影”和“描边”。注意“图层切片”的边框扩大，将执行效果后新的像素包含进来，如图11-14所示。; 由于基于图层的切片受图层的像素内容限制，因此编辑图层（移动、组合、划分、调整大小）是对齐该切片的惟一方法。还可以将基于图层的切片转换为用户切片，以取消它与图层的链接。;11.1.4 查看切片;1.更改切片行的颜色;3.显示或隐藏切片编号和切片标记 (ImageReady);11.1.5 修改切片;3.拷贝和粘贴切片 (ImageReady);11.2 优化图像; 在针对Web和其他联机介质准备图像时，通常需要在图像显示质量和图像文件大小之间加以折衷。Photoshop和ImageReady提供了许多控制选项，用于压缩图像的文件大小，同时优化其联机显示质量。 可以采用以下两种方式来针对Web存储图像： ? 对于基本优化，Photoshop的“存储为”命令能够将图像存储为GIF、JPEG或 PNG-24文件。根据文件格式的不同，可以指定图像品质、背景透明度或杂边、颜色显示和下载方法。但是，将不会保留向文件中添加的任何Web功能（如切片、链接、动画和翻转）。 ; ? 对于精确优化，可以使用Photoshop的“存储为Web所用格式”或ImageReady的“存储优化结果”，以不同的文件格式和不同的文件属性预览优化图像。当预览图像时，可以同时查看图像的多个版本并修改优化设置，选择最适合自己需要的设置组合。也可以指定透明度和杂边，选择用于控制仿色的选项，以及将图像大小调整到指定的像素尺寸或原大小的指定百分比。;11.2.1 在Photoshop CS2中优化图像切片 ; ? 名称 可以设置用户切片的名称。 ?