Photoshop CS3图像处理案例教程 教学课件 作者 梁建华 第3章 图像的绘制与处理.pptVIP

3.4　【案例10】提高网页访问效率 3.4.1　创作思路用“切片工具”对图像进行分块，将一幅大图像分割成数块小图像，并存储为Web格式，就可以充分利用网络带宽的资源，将多幅图像同时传送，达到提高图像传输速度的目的。3.4.2　操作步骤1)在Photoshop中打开素材库中的“第3章\素材\网页.jpg”文件，效果如图3-104所示。2)选择工具箱中的“切片工具”，在图像上进行切割，从左上角开始切割，得到用户切片“01”，同时得到占据图像的其余区域的自动切片“02”和“03”，如图3-105所示。 3.4　【案例10】提高网页访问效率 图3-104　网页.jpg 3)选择“切片选择工具”，在“02”切片上单击鼠标右键， 3.4　【案例10】提高网页访问效率 选择“提升到用户切片”命令，此时“02”切片的边界由虚线变为实线。 图3-106　光标变为上下箭头 4)用步骤3的方法，依次将自动切片“03”和“04”提升为用户切片。5)按上述方法继续切割，最终效果如图3-108所示。 3.4　【案例10】提高网页访问效率 图3-108　本例切片最终效果 6)执行“文件”→“存储为Web和设备所用格式”菜单命令， 3.4　【案例10】提高网页访问效率 该命令用于将PSD源文件输出成网页或是手机等设备所使用格式的文件。 图3-109　“切片选项”对话框 3.4　【案例10】提高网页访问效率 3.4.3　相关知识☆切片工具组 图3-111　切片工具组 (1)“切片工具”的应用(2)“切片工具”的使用方法1)用“切片工具”在图片上进行切割，每一个分割区域都有一个数字标签，数字即表示切割的块数。 3.4　【案例10】提高网页访问效率 2)执行“文件”→“存储为Web和设备所用格式”菜单命令，在弹出的对话框的左侧选择“切片选择工具”项。3)在视图中任意选择一块切片，外框变色，表示选中状态，然后保存为所需的格式(JPG或GIF均可)，可选择保存“所有切片”和“所有用户切片”。☆切片选取工具 图3-113　“切片选取工具”选项栏 ☆附注工具☆语音批注工具 3.4　【案例10】提高网页访问效率 图3-114　附注文字输入框 3.4.4　案例拓展 3.4　【案例10】提高网页访问效率 ☆【拓展案例10】羊城八景网页本案例利用Photoshop制作出“羊城八景网页”，如图3?116所示。 图3-116　“羊城八景网页”效果图 3.4　【案例10】提高网页访问效率 (1)创作思路(2)操作步骤1.使用Photoshop软件制作网页子页1)在素材库中的“第3章\素材”文件夹中，分别打开名称为“云山叠翠.jpg”、“珠水夜韵.jpg”、“越秀新晖.jpg”、“天河飘绢.jpg”、“古祠留芳.jpg”、“黄花皓月.jpg”、“五环晨曦.jpg”和“莲峰观海.jpg”的8幅图像。 图3-117　“将优化结果存储为”对话框 3.4　【案例10】提高网页访问效率 2)单击选中“云山叠翠.jpg”图像，执行“文件”→“存储为Web和设备所用格式”菜单命令，调出“存储为Web和设备所用格式”对话框。3)单击【存储】按钮，调出“将优化结果存储为”对话框。4)单击【保存】按钮，生成网页文件“云山叠翠.html”以及相关的GIF图像文件。5)按照上述方法，将其他7幅图像也保存为网页文件(HTML文件和GIF图像文件)，HTML文件名分别为“珠水夜韵.html”、“越秀新晖.html”、“天河飘绢.html”、“古祠留芳.html”、“黄花皓月.html”、“五环晨曦.html”和“莲峰观海.html”。2.制作主页画面 3.4　【案例10】提高网页访问效率 1)选中“云山叠翠.jpg”图像，执行“图像”→“图像大小”命令，在打开的“图像大小”对话框中，勾选“约束比例”复选框，修改高度为150像素，单击【确定】按钮后，再执行“文件”→“存储为”命令，在弹出的“存储为”对话框中，将文件名改名为“云山叠翠1”，其余选项不变，单击【保存】按钮。2)按照上述方法，将其他7幅图像的高度均修改为150像素，分别保存为网页文件“珠水夜韵1.html”、“越秀新晖1.html”、“天河飘绢1.html”、“古祠留芳1.html”、“黄花皓月1.html”、“五环晨曦1.html”和“莲峰观海1.html”。3)新建宽度为1200像素、高度为700像素，模式为RGB颜色，背景为淡黄色(R=206、G=170、B=115)的画布。 3.4　【案例10】提高网页访问效率 4)使用工具箱中的“移动工具”，将“云山叠翠1.html”等8幅高度为150像素的图像拖曳到“羊城八景.psd”图像上，适当调整它们的位置，如图3-118所示。 图3-118　将各张小图像摆放到“