下面就开始用Photoshop CS6切片工具切片界面。

1）启动Photoshop CS6。选择菜单栏上的“文件”→“打开”命令，打开前面所做的首页平面效果index.psd文件，如图3-49所示。

图3-49 打开将要切片的首页图

2）由于网站后面的网页在编排时，使用的是一些图片和小图标，所以要将一些调用的动态文字关闭显示，这里通过单击“图层”面板上相应图层前面的“指示图层可视性”按钮，即可以关闭在界面中的显示。图3-50所示为关闭导航文字的显示。

3）单击工具箱中的“矩形选框工具”按钮，在“页面内容”图层上，拖放鼠标将一些产品显示的效果选择选区，然后按下＜Delete＞键删除，最后将首页编辑成图3-51所示的效果。

图3-50 关闭导航文字的显示

图3-51 删除多余图片和文字后的显示效果

4）开始切片logo所在行的图片，单击工具箱中的“切片工具”按钮，从场景的左上角拉到logo的右下角，如图3-52所示，图中绘制虚线框的就是切片大小，切片后左上角会有一个图标显示。

图3-52 导航背景的切片效果

5）切片后再将Banner图片切割成两个图片，其中“新娘”为一张，说明文字为另一张，这样方便后面我们将文字部分制作成Flash动画。切片的效果如图3-53所示。

图3-53 切片Banner图片(www.daowen.com)

6）切片购物车的背景图片。保持“切片工具”按钮为选中状态，从小导航左边的背景开始，分别切片出3个有用的切片，如图3-54所示。

图3-54 切片小导航

专家指导：

最好使切片选区的下边框与周边的线条重合。如果划分切片区域不够准确的话，先用放大镜工具进行放大，再选中“切片选择工具”进行调整。在切片的时候要注意切片的原则：所有带转角的背景图片，都需要单独切成一小片，这样方便后面网页的设计编排。

7）切片新闻前面的符号。单击工具箱中的“缩放工具”按钮，然后单击鼠标左键拖放，选择第一条新闻前面的小花片并放大，最后单击工具箱中的“切片工具”按钮并拖放鼠标，切片符号效果如图3-55所示。

图3-55 切片符号效果

8）切片新闻图片。在这里，要把新闻图片单独切开，在后面的章节中我们将以此图片的大小为模板，再设计一些图片在首页实现动态的切换效果，如图3-56所示。

图3-56 切片新闻图片

9）最后切片版权说明。保持“切片工具”按钮为选中状态，在场景的左下角拖动鼠标切片出两个矩形切片区域即可，如图3-57所示。

图3-57 切片后的效果