Photoshop CS3实用教程 教学课件 郭万军 第11章.pdfVIP

第11章 网页制作 本章简介： 本章针对图像切片、存储 网页图片以及动画制作等内容 进行讲解。 课堂学习目标 了解切片的类型 掌握切片的创建与编辑 掌握存储网页图片的方法 掌握优化网页图片的方法 11.1 图像切片 切片的类型 创建切片 编辑切片 11.1.1 切片的类型 图像的切片分为以下3种类型。 用户切片：用【切片】工具创建的切片为用户切片， 切片的四周以实线表示。 基于图层的切片：执行【图层】/ 【新建基于图层的 切片】命令创建的切片为基于图层的切片。 自动切片：在创建用户切片和基于图层的切片时， 图像中剩余的区域将自动添加切片，称为自动切片， 其四周以虚线表示。 11.1.2 创建切片 一、用切片工具 将教学资源包素材文 件中“图库\第11章” 目录下的“网站主 页.psd”文件打开， 在工具箱中选择 【切片】工具，在 画面中按下鼠标左 键拖曳，释放鼠标 左键后即可绘制出 如图所示的切片。 创建的切片 11.1.2 创建切片 二、基于参考线 如果图像文件中按照 切片的位置需要添 加了参考线，在工 具箱中选择了 工具 后，单击属性栏中 的 按钮，即 可根据参考线添加 切片，如图所示。 创建的基于参考线的切片 11.1.2 创建切片 三、基于图层 对于PSD格式分层的图像来说，可以根据图 层来创建切片，创建的切片会包含图层中所 有的图像内容，如果移动该图层或编辑其内 容时，切片将自动跟随图层中的内容一起进 行调整。在【图层】面板中选择需要创建切 片的图层，如图所示。执行【图层】/ 【新建 基于图层的切片】命令，即可完成切片的创 建，如图所示。 11.1.2 创建切片 选择图层 创建的基于图层的切片 11.1.3 编辑切片 编辑切片操作包括选择切片、调整切片、 删除切片、划分切片、转换切片和查看与编 辑切片选项、及隐藏切片、显示切片和清除 切片等操作，具体设置详见教材。 11.2 存储网页图片 存储为JPG格式图片 存储为GIF格式图片 优化存储网页图片 11.2.1 存储为JPG格式图片 JPG格式是一种图片存储质量较高且压 缩量也较大的格式。将图片存储成JPG格式 的操作方法详见教材。 11.2.2 存储为GIF格式图片 GIF格式是一种没有渐变颜色的单一色 块图片，可以保留图片透明背景或者动画图 片。将图片存储成GIF格式的操作方法详见 教材。 11.2.3 优化存储网页图片 执行【文件】/ 【存储为Web和设备所用格式】命令，弹出如图 所示的对话框。 【存储为Web和设备所用格式】对话框 11.2.3 优化存储网页图片 对于“GIF”格式的图片，可以适当设置“损耗”和 减小“颜色”数量得到较小的文件，一般设置不超过“10” 的损耗值即可；对于“JPEG”格式的图片，可以适当降低 图像的“品质”来得到较小的文件，一般设置为“40”左 右即可。如果图像文件是删除了“背景”层而包含有透明 区域的图层，在【杂边】右侧可以设置用于填充图像透明 图层区域的背景色。 所有选项如果设置完成，可以通过浏览器查看效果。 在【存储为Web和设备所用格式】对话框左下角设置【缩 放级别】选项后，单击右边的