文章目录
- 1.常见的图片格式
- 方法1. PS图层切图
- 方法2. 切片切图
- 方法3.Cutterman插件切图(最简单、最好用的切图工具)
准备工作：一个非绿色版的PS软件，如果还没安装好PS的，建议在微信搜“软件安装目录”小程序，里面有大多数办公和编程的软件，重要是免费还是中文版，这里建议下载PS2020，这个不是绿色版。
1.常见的图片格式
- jpg图像格式：JPEG(JPG)对色彩的信息保留较好，高清，颜色较多，适用于产品类图片。
- gif图像格式：GIF格式最多储存256色，所以通常用来显示简单图形及字体，但是可以保存透明背景和动画效果，实际用于一些图片小动画效果。
- png图像格式是一种新兴的网络图像格式，结合gif和jpeg的优点，具有储存形式丰富的特点，能够保持透明背景，如果想要切成背景透明图片，请选择png格式。
- PSD图像格式是photoshop的专用格式，里面可以存放图层、通道、遮罩等多种设计稿，对我们前端人员来说，最大的优点就是可以直接从上面复制文字，获取图片还可以测量大小和距离。
方法1. PS图层切图
图层切图对应的图片格式必须是PSD格式图片，PSD图片是UI设计者给前端开发人员的设计稿，学会图层切图很重要。在浏览器找个PSD格式图片来学习切图。
- 打开PS，打开PSD格式图片，与普通图片不同的是，软件右侧有很多图层：
PSD格式图片就是由许多图层组成的。 - 如何选定要切图的图片呢？看图：
- 我们如何确定右侧图层就是点击图片所对应的图层呢？看图：
注意：有时候我们要切的图片对应多个图层，所以点击眼睛隐藏方法确认图层是很重要的。 - 如何切图？看图：
导出png即可获得想要获得的对应的切图。
查看是否获得切图，我保存在电脑桌面：
注意：我们还需考虑一种情况，我们想要获得的切图由多个图层组成，那我们导出png时就需选中多个图层并合并图层，由于这张PSD格式的图片没有这种情况，我只能用交你合并方法：
合并之后，就会生成一个显式地新图层，再按上面方法导出切图即可。
导出后：
方法2. 切片切图
- 利用切片工具划出想要地图片
- 点击文件菜单
- 导出
- 存储为web设备所用格式
- 选择我们要的图片格式
- 存储
按步骤用图片说明：
1.选中切片工具
2.划出图片
3.点击文件菜单
4.选择格式
这样就切图完成啦，再保存地方找到它。
方法3.Cutterman插件切图(最简单、最好用的切图工具)
cutterman插件下载地址.注意，想要在PS中安装cutterman插件，必需是完整版的PS，而非绿色版PS，要想知道是否为绿色版，看下图：
当然，在前面第一种方法切图也可以判断是否为绿色版，在想导出png图片时，绿色版是没有这个功能的。所以绿色版无法通过图层导出png图片。
首先需要在PS中安装Cutterman插件，在上面网址下载好cutterman压缩包之后，解压进行安装：
安装好之后重启PS，在窗口的扩展功能查看是否存在该插件：
存在该插件说明安装插件成功，第一使用该插件需要注册一个账号，注意这是免费的。
在扩展功能点击该插件便会跳出注册界面，我们就直接注册即可。
安装注册好之后，我们就来尝试最好的切图工具。
a.切图之前，我们现在扩展功能中打开cutterman：
我们这里处理的是PC端切图，选中Web即可。
b.选中切图图片格式，点击web下的下拉框：
好啦，设置好图片格式以及存储路径，下面我们切图就一键导出即可。
c.我们导出一个切图(我们还是可以像方法1一样通过移动工具找出想要切图的图层)：
d.去刚刚设置存储切图的文件查看是否存在切图：
没错，配置好cutterman之后，就直接选中和导出即可，比前面方法简单很多。
上面只是单个图层的切图，那多个图层呢？
e.很简单，按住Ctrl键，左击选中多个图层,然后勾选合并图层即可：
在相同文件查看切图：
其实，合并多个图层就是一个勾不勾选的问题。
用了这个插件就不用每次在图层中导出png格式或切图转换为web格式那么复杂，体验到它的好处了吗？
