目录

1. 常见的图片格式

1.1JPG图片格式

1.2 GIF图片格式

1.3 PNG图片格式

1.4 PSD图片格式

2. PS切图方式

2.1 图层切图（重要）

2.1.1 直接切图

2.1.2 合并图层后切图

2.2 切片切图

2.3 PS插件切图

2.3.1 Cutterman插件

 2.3.2 cutterman插件的使用

---

1. 常见的图片格式

1.1JPG图片格式

色彩的信息保留较好，高清，色彩多。产品类图片经常用JPG格式。

1.2 GIF图片格式

最多存储256色，通常显示简单图形和字体，可以保存透明背景和动画效果，常用于小动画效果。

1.3 PNG图片格式

一种新兴的网络格式，结合了GIF和JPEG的优点，存储形式丰富，能保持透明背景。背景透明效果用PNG格式。

1.4 PSD图片格式

PSD格式是Photoshop的专用格式，可以放图层，通道，遮罩等设计稿。对前端人员最大的有优点是直接复制文字，获取图片，还可以测量大小和距离。

2. PS切图方式

2.1 图层切图（重要）

2.1.1 直接切图

最简单的切图方式：点击图，右击图层，快速导出PNG图片（PS的版本低没有快速导出选项，可以右键转化为智能对象，然后双击，选择为存储即可哦）

2.1.2 合并图层后切图

有的图分为多个图层，比如分为图片和文字的两个图层，我们想要文字和图片一起的图时，就想要合并图层，在右边按住shift键选择两个图层，在上方图层菜单选择合并图层（快捷键Ctrl+E），最后再右键导出PNG格式。实际中需要合并图层后导出。

2.2 切片切图

1. 利用切片选中图片（用切片工具手动划出）

      2. 导出选中的图片

文件菜单→导出→存储为web所用格式→选择图片格式→存储。

注意：在保存图片时，默认保存的是所用切边，我们要选择选中切片噢~

 

2.3 PS插件切图

2.3.1 Cutterman插件

是一款在Photoshop的插件，能自动将需要的图层输出，代替了“导出web所用格式”以及切片工具的整个复杂流程。（cutterman下载安装的教程在上篇文章有讲解哦，需要的可以去看~）

 2.3.2 cutterman插件的使用

①选好需要合并的图层后→选择web→在输出选项选择保存图片的路径→导出选中图层即可

②通过选区选取出来的图片也是也是在cutterman中切图保存导出的