PHOTOSHOP基础与实例任务一 公司主页——切片工具的使用.ppt

【任务概述】 　许多网页为了追求更好的视觉效果，往往采用一整幅图片来布局网页。但这样做的结果就是使下载速度慢了许多。为了加快下载速度和使用独特的图片链接，就要对图片使用切片技术。也就是把一整张图切割成若干小块。只使用某一个特定的图像区域连接到其他的网站或网页，Photoshop cs3具有强大的切片功能，能方便地输出切片和包括切片的网页文件。 PhototShop CS3基础与实例教程 模块十 网页工具的应用 【试一试】网站主页的布局与优化 PhototShop CS3基础与实例教程 1．在photoshop cs3中打开“素材\模块十\ index.jpg”图片，在工具箱中找到切片工具(如下图左所示)，在图片上‘画’出每个切割区域，可见每个切割区域都会带上一个数字标签（如下图右所示）。 模块十 网页工具的应用 提示： (1)蓝色标签为用户切片（即用户用切片工具分出的切片），如果只为了下载速度快，此时可直接存盘为“存储为Web和设备所用格式”。 (2)如果要将此图片中某些区域进行链接，则选择“切片选择工具 ”，在切片区域双击。 【试一试】 PhototShop CS3基础与实例教程 模块十 网页工具的应用 用“切片选择工具 ”双击第三个切片，即“知识结构”区域，则出现如下图所示： PhototShop CS3基础与实例教程 【试一试】 ２．3．在①切片类型中选择“图像”。 在②中切片名称保持默认值。 在③中URL(统一资源定位)填入单击该切片时相链接网页的地址。如zsjg.html。 在④中目标填入“_blank”。 在⑤中信息文本写入在浏览器状态栏显示出的信息“本书的知识结构示意图”在⑥中ALT标记写入替代浏览器的替代文本，如果浏览器无法显示，则显示的文本。该项通常可以省略. 模块十 网页工具的应用 PhototShop CS3基础与实例教程 【试一试】 4．重复第②和③步， 将“实例特色”切片链接到“slts.html”,提示信息为“photoshop s3之实例特色”。 将“学习方法”切片链接到“xxff.html”,提示信息为“良法的学习方法是通向成功的天梯”。 将“效果图展示”切片链接到“xgt.html”,提示信息为“photoshop s3之效果图”。 模块十 网页工具的应用 PhototShop CS3基础与实例教程 【试一试】 5．执行“文件\存储为Web和设备所用的格式….(Alt+Shift+Ctrl+s)”则出现如下图所示。 模块十 网页工具的应用 PhototShop CS3基础与实例教程 【试一试】 6．单击“确定”，则出现如下图所示。 模块十 网页工具的应用 7．在文件名中输入“index”,文件类型中选择“html和图像（jpg）”单击“保存”。 【专家点拨】移动、变换工具 使用与技巧 【专家点拨】 PhototShop CS3基础与实例教程 1．切片工具 和切片选择工具 . (1).切片工具创建切片。 (2)切片选择工具选择切片，以便进一步对切片进行处理或链接。 2．切片工具 属性栏及含义: 当选择了“切片工具 ”时，属性栏如下： （1）样式有如下几项： ①正常 ：拖动时确定切片比例。 ②固定长宽比 ：设置高宽比，输入整数或小数作为长宽比。 ③固定大小 ：指定切片的高度和宽度，输入整数像素值。 注意：在要创建切片的区域上拖动。按住 Shift 键并拖动可将切片限制为正方形。 （2）基于参考线创建切片：向图像中添加参考线,根据参考线创建切片。 模块十 网页工具的应用 【专家点拨】移动、变换工具 使用与技巧 【专家点拨 PhototShop CS3基础与实例教程 3.切片的类型：按创建方式分为。 (1)用户切片：用切片工具创建的切片。 (2)基于图层的切片：用“图层”调板创建的切片。 (3)自动切片：自动生成的切片。 (4)子切片：创建重叠切片时生成的一种自动切片类型。 4. 切片选择工具 属性栏及含义： 　上图中其余选项的含义如下： (1)提升:将自动或图层切片提升为用户切片。 (2)划分：进行水平和垂直方向划用切片。 (3)隐藏自动切片:显示或隐藏自动切片。 模块十 网页工具的应用 【专家点拨】移动、变换工具 使用与技巧 【知识连接】 PhototShop CS3基础与实例教程 5．切片选项对话框：当利用“切片选择工具 ”单击某切片时，出现如下图所示的“切片选项”对话框（图中提示部份为常用的关键内容）,在此对话框中设置切片的网页联接。 模块十 网页工具的应用 Thank~