1.完成网页切片

该阶段主要通过切片工具来实现。切片工具通常是在设计Web页中用来分割页面的工具，就像在Dreamweaver中绘制表格一样，在PS中，我们同样可以使用切片工具直接在图片上绘制切片线条。首先用Photoshop软件打开网页界面文件（图5-26）。在工具栏中单击“切片工具”选项（图5-27），鼠标样式即变成了切片工具的图标，就像是钢笔头一样的按钮；然后将其转移到要编辑的图片上，可根据自己的需要将整个页面进行切片。为了后期上传速度快一些，可将每个切片切得小一点（图5-28）。

图5-26

(https://www.daowen.com)

图5-27

可以看出，需要文字编辑的部分都有相应切片，只需要替换图片的部分也可单独切片。对于需要设计的页面，都可以手动切片，以区别文本或图像的区域；而对于普通用来展示的图像，也可以进行均匀的简单切割（选择切片工具后，在图像上单击右键，在快捷菜单中选择“划分切片”命令，设置“水平划分为”和“垂直划分为”两项的横向切片和纵向切片的数量）。设置好数量后，图像上就会出现图片的预览效果，这样会更加快速和高效。

图5-28