1.3.4 网站效果图的切图

在切割网页效果图时，通过添加参考线，可以很明确地对页面图像进行划分，明确页面中哪些内容需要被切割为图像、哪些内容被切割为背景色，从而为后期网站的开发设计做好完善的预案。本节内容，我们一起分享网站效果图的切图技巧。

01 切割网站图像之前要首先分析网站的结构特点。打开设计效果图1.35以后，我们发现，页面主要分为上中下3部分，页面上部主要包括了网站导航、logo、导航栏等内容，中间部分又分为左、中、右3部分。其中左边与右边在基本布局形式上都相同，而中间部分看似简单，只有一则突出的banner，但由于涉及倒影、光照等因素，在裁切时一定要格外小心。

图1.35

02 仔细观察页面我们还发现网页的背景是一个具有渐变平滑过渡效果的渐变色背景，如图1.36所示。网站的导航设计比较特别，所以可整体进行裁切。

图1.36

03 网站的主题banner所包含的各个图像、图形在后期将进行图层合并，所以不需要再次进行单独切割。

04 网站的正文文案不需要裁切，只需标注文字的字号、颜色、字体即可。执行“视图”→“标尺”命令，在工作区显示标尺，单击标尺，并拖曳鼠标至页面中需要进行模块划分的区域，松开鼠标即可产生一条参考线。重复类似的操作，完成页面中所有参考线的添加。

05 背景的切割：打开图层面板，隐藏除背景效果以外的其他图层，选择矩形选框工具，绘制出如图1.37所示的矩形选框，按Ctrl+C组合键复制所选区域的内容，执行“文件”→“新建”命令，然后按Ctrl+V组合键粘贴所选区域的内容到当前文档中。

图1.37

06 执行图像裁切命令，然后在弹出的对话框中选择“左上角像素颜色”选项，这样可以保证所裁切的图像不包含多余的非透明内容，如图1.38所示。

图1.38

07 保存文件：执行“文件” →“存储为…”命令，然后设定保存文件的名称和保存位置，我们设定的品质值一定不要低于5，否则系统会产生额外的优化算法，在图像的周围产生影响视觉浏览的噪点，如图1.39、图1.40所示。

图1.39

图1.40

08 重复以上操作即可完整整个网站的裁切。如图1.41所示，为笔者用同样的方法裁切网站的导航。

图1.41