UI给咱们设计图的时候都会有一份设计原稿psd文件，有的公司可能UI会把须要的图标给切好，更多时候是须要咱们本身来切的。并且，有的时候可能须要的东西UI没有切出来，你就要去是去找UI切好了再发给咱们，这个过程就变得很麻烦，因此不如本身学一些切图方法 
工具
没有psd文件的，我这里准备了一份，须要的能够去下载spa
psd练习文件设计
http://pan.baidu.com/s/1pL2dwL1
- 1
工具：1、二是用photoshop cs6演示的，三是用photoshop cc 2015演示的，一二中的方法两个版本的软件均可以实现，三中的方法cc才能实现，因此建议你们下载photoshop cc 20153d
没有photoshop，这里准备了photoshop cc 2015的安装包和破解工具，具体安装和破解方法能够百度一下code
http://pan.baidu.com/s/1gfJUEzT
- 1
开始
1、传统的切图方法
咱们先介绍一个传统的切图方法
使用范围：须要切多张图，带背景的blog
1.打开下载的psd文件
出现下面不要紧，直接点肯定便可 图片
打开后，由于文件比较长因此看不清细节，因此咱们要放大图片到合适的大小。
放大图片：”CTRL” +“+”
缩小图片：“CTRL”+ “-”it
而后咱们来认识下photoshop中的一些工具 asm
2.修改参考线
咱们能够看到咱们的图片中不少条蓝色的参考线，这些线是设计人员用来设计用的，有的文件中的线会直接把咱们须要切的东西给包裹出来，可是像咱们练习的这个文件中的参考线特别的多，特别的密集，不少咱们都不须要，因此咱们先把这些参考线都清除掉。class
删除参考线：选择移动工具，而后把要删除的参考线往标尺上拖，往上或者往左均可以
没有参考线的多是参考线被隐藏了，经过“CTRL”+ “；”就能够显示出来
（制图软件因此鼠标没有变，本身操做的时候鼠标会变成黑色的）
咱们只要把挡住图标的参考线给删除就能够
3.选择要切的图标
这里咱们就切几个页面上的图标，文字部分咱们均可以经过代码来实现，因此就不切了。
①选择工具栏第一个“移动工具”
②而后查看上面选项栏“自动选择”有没有被选中，没有被选中点击选中，将它旁边的“组”改成“图层”，这样咱们点击图标的时候，右下角的图层面板就能自动的选中对应的图层
③点击咱们要切的图标，而后到右下角的图层面板，点击当前选中的这个图层旁边的小眼睛来隐藏当前图层，经过显隐来肯定是否是咱们要切的图标
④确认了咱们要切的图标后，分别从水平标尺和竖直标尺的地方拉取参考线来把图标给包裹住。由于咱们当前选中的就是咱们要切的图层，因此当参考线拖过去的时候会自动吸附到图标的边缘。
⑤用一样的方法把图标都用参考线包裹出来，最下面一排，要把图标切成同样高的才好，因此以第一个的上边界和下边界为基准。
4.切片须要的图标
如今，咱们已经用参考线把咱们的图标给包裹出来了，下面，咱们要用切片工具来切出咱们的图标
①选择切片工具，左边工具栏从上往下数第五个，而后右键就能够找到，而后选中
②而后找到咱们刚才用参考线包裹的图标，从左上角一直拖到右下角，由于有参考线的帮助，因此软件可以自动吸附到参考线上，因此只要大概找准左上角和右下角就能够选取出来
③用一样的方法把剩下的都选取出来
5.将切片存储为图片
①选择 “文件”=》“存储为Web所用格式”
②调整缩放比例，让图片能完整的在窗口显示
③在窗口中，从左上角一直拖到右下角，选中全部切片，这样咱们才能把切片都存储为咱们想要的格式
④存储为png-24格式，png-24格式的图片质量比较高
⑤保存，选择用户全部切片能够只保存咱们本身切出来的切片
⑥而后查看保存的文件里面就多了一个images文件夹，里面就是咱们切出来的图片
可是这样作会发现png格式的背景仍是有的，并且若是只是须要一张图的时候，还要这样切就会比较麻烦，因此(二)中会介绍一些切一两个小图标的方法