网页设计与制作模块4.ppt

模块4：网页切图 学 习 导 入 在本模块中着重介绍切片工具、切片选择工具在切图面方面的应用，通过讲解一个简单的例子，掌握切图的方法和技巧 学 习 导 入 学 习 目 标 任务切割图片 任务目标 任务实施 任务评价 必备知识 任务描述 任务分析 任务总结 模块4：网页切图 学 习 目 标 技能目标： 将photoshop制作出的整体网页，切割成若干个小图片 知识目标： 1.掌握切片工具工具的应用 2.掌握切片选择工具的应用 3.了解切图的原因 4.了解切图的一些基础原则 学 习 导 入 学 习 目 标 任务切割图片 任务目标 任务实施 任务评价 必备知识 任务描述 任务分析 任务总结 模块4：网页切图 任务描述、任务目标、任务分析 ○任务描述 小花毕业后在一家网络公司从事网页美工工作，要将网页切图处理。 ○任务目标 利用切片工具、切片选择工具将下图4-1所示，切成两个小块，并将切出的图片保存。 图4-1 ○任务分析 使用切片工具切出图片，再用切片选择工具对切片进行调整，最后将切片保存。 学 习 导 入 学 习 目 标 任务切割图片 任务目标 任务实施 任务评价 必备知识 任务描述 任务分析 任务总结 模块4：网页切图 任务实施 1、切图工具有两个，一个是切片工具，另一个是切片选择工具。左边有个小按钮，按住它这三个选项就会显示出来,如图4-2所示。 图4-3 图4-2 图4-4 2、将要切割的图片放入photoshop中。 （图4-3） 3、在切图之前有一点需要说明的是，如果需要辅助切图可以先添加参考线。在PS上方的菜单栏，可以在视图里找到新建参考线选项。如上图，添加两条参考线，因为参考线在鼠标靠近的时候有吸附功能，所以切图不容易切错位置。（ 图4-4） 学 习 导 入 学 习 目 标 任务切割图片 任务目标 任务实施 任务评价 必备知识 任务描述 任务分析 任务总结 模块4：网页切图 任务实施 4、切片工具先裁一个框出来，我们可以看到图片上已经有01的框，但是右边02显示为灰色。（图4-5 ） 图4-5 图4-6 5、继续用切图工具裁第二个框，01和02的框一定要贴合，否则会出现一个03的框。当切图位置没切对，可能给后面带来麻烦的是换图片会比较麻烦。这个时候切图的框是可以移动的，你可以把鼠标放在边框上试着移动下，看下效果。你只能移动02，不能移动01。 （图4-6） 6、发现切图的位置出现错误，开始调整，刚才把02位置往右挪好，它从02变成了03。（图4-7） 图4-7 学 习 导 入 学 习 目 标 任务切割图片 任务目标 任务实施 任务评价 必备知识 任务描述 任务分析 任务总结 模块4：网