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

《Photoshop CS3实用教程 教学课件 郭万军 第11章.ppt》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、本章简介：本章针对图像切片、存储网页图片以及动画制作等内容进行讲解。第11章网页制作课堂学习目标了解切片的类型掌握切片的创建与编辑掌握存储网页图片的方法掌握优化网页图片的方法11.1图像切片切片的类型创建切片编辑切片11.1.1切片的类型图像的切片分为以下3种类型。用户切片：用【切片】工具创建的切片为用户切片，切片的四周以实线表示。基于图层的切片：执行【图层】/【新建基于图层的切片】命令创建的切片为基于图层的切片。自动切片：在创建用户切片和基于图层的切片时，图像中剩余的区域将自动添加切片，称为自动切片，其四周以虚线表示。11.1.2创建切片一、用切片工具将教学资源

2、包素材文件中“图库第11章”目录下的“网站主页.psd”文件打开，在工具箱中选择【切片】工具，在画面中按下鼠标左键拖曳，释放鼠标左键后即可绘制出如图所示的切片。创建的切片11.1.2创建切片二、基于参考线如果图像文件中按照切片的位置需要添加了参考线，在工具箱中选择了工具后，单击属性栏中的按钮，即可根据参考线添加切片，如图所示。创建的基于参考线的切片11.1.2创建切片三、基于图层对于PSD格式分层的图像来说，可以根据图层来创建切片，创建的切片会包含图层中所有的图像内容，如果移动该图层或编辑其内容时，切片将自动跟随图层中的内容一起进行调整。在【图层】面板中选择需要

3、创建切片的图层，如图所示。执行【图层】/【新建基于图层的切片】命令，即可完成切片的创建，如图所示。11.1.2创建切片创建的基于图层的切片选择图层11.1.3编辑切片编辑切片操作包括选择切片、调整切片、删除切片、划分切片、转换切片和查看与编辑切片选项、及隐藏切片、显示切片和清除切片等操作，具体设置详见教材。11.2存储网页图片存储为JPG格式图片存储为GIF格式图片优化存储网页图片11.2.1存储为JPG格式图片JPG格式是一种图片存储质量较高且压缩量也较大的格式。将图片存储成JPG格式的操作方法详见教材。11.2.2存储为GIF格式图片GIF格式是一种没有渐变颜

4、色的单一色块图片，可以保留图片透明背景或者动画图片。将图片存储成GIF格式的操作方法详见教材。11.2.3优化存储网页图片执行【文件】/【存储为Web和设备所用格式】命令，弹出如图所示的对话框。【存储为Web和设备所用格式】对话框11.2.3优化存储网页图片对于“GIF”格式的图片，可以适当设置“损耗”和减小“颜色”数量得到较小的文件，一般设置不超过“10”的损耗值即可；对于“JPEG”格式的图片，可以适当降低图像的“品质”来得到较小的文件，一般设置为“40”左右即可。如果图像文件是删除了“背景”层而包含有透明区域的图层，在【杂边】右侧可以设置用于填充图像透明图层

5、区域的背景色。所有选项如果设置完成，可以通过浏览器查看效果。在【存储为Web和设备所用格式】对话框左下角设置【缩放级别】选项后，单击右边的按钮即可在浏览器中浏览该图像效果，如图所示。11.2.3优化存储网页图片在浏览器中浏览图像效果11.2.3优化存储网页图片关闭该浏览器，单击按钮，弹出【将优化结果存储为】对话框，如果在【保存类型】下拉列表中设置【HTML和图像（*.html）】选项，文件存储后会把所有的切片图像文件保存并同时生成一个“*.html”网页文件；如果设置【仅限图像（*.jpg）】选项，则只会把所有的切片图像文件保存，而不生成“*.html”网页文件；

6、如果设置【仅限HTML（*.html）】选项，则保存一个“*.html”网页文件，而不保存切片图像。