前端切图

使用切片工具切图

 

 以上面这个psd的图片为例，将左上角的图形、文字还有鞋子切出来。

1、首先打开psd文件，然后选择切片工具：

2、如果不需要做透明图，就可以直接切，要是需要做透明图，就需要先将多余的背景图层隐藏掉，如下所示：

3、然后使用切片工具，选择需要切图的范围，从图左上角拖动鼠标到右下角，逐个选择切片：

4、点击菜单中的文件--存储为web所用格式

 

 弹窗的右上角可以选择图片存储格式，如果打开弹窗后直接选择格式，那么选择的格式只对当前所有切片中最后一个切片生效，所以需要在左侧预览窗口用鼠标从做上面拖拽到右下角，选中所有切片后，再去选择存储格式。

5、选择好存储格式，就可以直接点击下方的存储按钮了：

 在弹窗的新窗口中，有一个切片的下拉框，默认选择所有切片，如果是基于参考生成的切片，会生成很多多余的切片，所以这里通常选择所有用户切片，然后保存就可以了。