注意：我使用的是PhotoShop cc2017，因为版本的不同，在操作上会有所不同。
1.针对切图最适合的PhotoShop界面设置
1.1 新建设置
文件 ----> 新建
快捷键为： control / command + n
我们可以看到已经给我们准备好了需要的默认
我们也可以自己创建，并存储于预设
1.2 移动工具设置
左侧工具栏最上面的一个，快捷键为 v
当我们想通过点击psd，然后找到相对应的图层的时候，需要将左上方的改为图层，记住自动选择按钮不用勾选。
我们按住 control / command，然后点击psd，就会显示相对应的图层了。（不用勾选自动选择按钮的原因是按住 control / command就会自动勾选上，松开就会自动取消）
1.3 视图界面设置
1.视图 -----> 显示 -----> 智能参考线 (切图的时候会有很大的帮助）
2.视图 -----> 标尺
3.窗口 将相关的打开和关闭，然后拖动，组成下面的形式
4.单击 信息 右边的更多按钮，选择面板选项，改为如下的样子
5. Photoshop cc / 文件 —> 首选项 —> 单位与标尺
将单位更改为像素
6.设置好界面后，通过 control / command + 点击图层图标找到对应的psd位置，相关信息会在信息栏中显示
7.窗口 —> 工作区 ----->新建工作区 ---->然后命名，将界面进行存储，方便下次使用
2. Photoshop的基本操作
我们主要是简单讲解左边的工具栏，和上面第二行的属性栏，每一个工具都会对应不同的属性
2.1 移动工具
工具栏的第一个，有两种选中方式
control / command+ 点击psd 选中对应的图层，然后移动control / command+ 点击图层的小图标 选中对应的psd，然后移动
我们也可以选中多个图层， control / command + 点击多个图层，就可以移动多个图层了，当我们选中多个图层的时候，会发现我们可以通过属性改变对其的方式。（具体的含义，当我们的鼠标放上去的时候会有提示）。
2.2 选框工具
工具栏第二个
我们可以通过该工具，选择我们想要的区域。并且有属性供我们选择
分别为： 正常选择， 增加选择， 减少选择， 获取选择的公共部分。
我们在选择的时候按住 shift，可以使得被选中的部分为正方形或者正圆形
2.2 套索工具
工具栏第三个
可以选择不规则的选区
2.3 快速选择工具
工具栏第4个
可以快速选择一大片区域
2.4 裁剪和偏切片工具
工具栏第5个
可以裁剪和切片。
裁剪工具：
- 选中区域，然后选中右上方书属性位置的对号就可以了。
- 先不选中裁剪，选中图层，
control / command+ 点击图层的小图标 选中对应的psd，然后选中裁剪，再按enter键和对号键进行裁剪 - 在我们裁剪的页面，通过
control / command+ 点击psd 找到对应的图层，然后alt+眼镜图标，就可以变为只显示该图层，其他的图层隐藏，也就是该图层的显影模式
2.5 参考线及其辅助
视图 —> 新建参考线 ---->选择横向和纵向，单位为像素
也可是使用快捷键 control / command + r
从原始位置拉动，就可以了，想取消的话，就重新拉回原来的位置，通过alt键可以改变方向
可以选中图层后在放置参考线，那样会更加的准
3 切片
3.1 传统切片
使用参考线，限制大小，后使用切片工具，完成后
文件 —> 导出 ----> 存储为web导出格式 —>选择为png24格式
3.2 精准切片
计算机自动计算，会切图更加的准确
文件----> 导出 ----> 将图层导出到文件 ---->格式为png24格式（并将选项都勾选上）
3.3 自动切图
- Photoshop cc ----> 首选项 ----> 增效工具 ----> 将启动生成器打开
- 文件 ----> 生成 ------> 图像资源
这是我们打开psd的目录，会发现有一个新的以assets结尾的文件夹，
- 我们选择图层，增加后缀
然后在文件夹中我们可以看到png图片生成了。
- 我们可以选择多种后缀
例如：- 200% ***@2x.png (200%后面有空格) ---->生成的图片为 ***@2x.png ，宽高扩大一倍
- ***.png24 —> ***.png 但是质量是24 的
- ***.jpg —> ***.jpg
- 也可以导出svg格式
同样是将图层的后缀改为 .svg
生成后可能并不是十分的准确，所以我们要去看一眼生成的svg的代码，主要看背景的颜色是否需要更能该 - 我么可以直接选择图层，右击选择复制css，然后贴代码，省去很多的步骤
- 我们可以对psd的所有图层进行筛选
