现在的手机有不同的型号，同时也有不同的屏幕分辨率。比方上图中不同分辨率的手机需要不同大小的图标设计，所以就需要切图。把同一个图标为了能在不同型号的手机上清晰的显示出来，就需要切成不同尺寸和分辨率的图标，这个就是切图的原因。
第一：什么是切图？
切图就是把一张大界面里小元素单独保存成小图的过程。
这张大界面需要动动刀
把图标切成不同尺寸单独保存
第二：UI设计师为什么要切图？
单纯靠代码实现不了
UI设计师的产出物只是普通的图片或者是PSD，是用于观看预览的演示稿设计稿，真正的APP应用还必须通过代码的编写，数据的储存和系统的配合才能完成，所以界面的元素都需要通过代码写入实现。
但是有些内容是代码也实现不了的，例如设计师设计的图标，背景图片等等，这些就需要通过图片的方式存在，所以设计师要把这些内容切成一张张的小图，给到程序进行代码的制作。
（代码实现不了的图标）
需要适配不同的屏幕
目前手机市场设备种类繁多，即使是iPhone也有3种不同的屏幕分辨率，这就要求了同样的界面元素需要有不同的尺寸。
第三：如何切图？
第一种是利用PS自身的切图功能，“导出为”（这个功能只有更新到PS最新版本才有）在想要切出来的图层或者图层组上，选中并右键，会有一个导出为，点击导出为就可以看到下面的界面。
第二种利用PS插件cutterman，直接安装在PS里面，然后在窗口-拓展功能里面可以找到，界面如下：
按上面的参数可知，直接可以切除安卓、苹果和pc端的尺寸，下面可以设置画布大小，选择需要的分辨率，然后在导出之前需要先选择导出的位置，之后直接单击导出选中图层按设置键，按照自己设计出来的界面尺寸，填写参数即可。
第四：切图的技巧
切图的时候并不是直接把小图保存就可以了，其中还有些小技巧，能够帮助程序猿更方便地进行页面编写：
1.相同位置相同功能的图标尺寸应该保持一致
2.保证图标的可点击区域大小
第五：如何标注？
标注也有相应的方法，最傻瓜的就是在元素旁边写上需要标注的信息，但是这种方法又慢又麻烦，页面多起来还会让设计师崩溃，所以我们又要用插件了：
标注软件——markman
步骤：
打开马克鳗，会要求我们先拖进一张图片，如下图：
拖进一张图，我们即可看到下面图中红色框的小图标，再进行操作。
选择标图工具，比如第一个长度标记，找到想要标出的位置，然后按住鼠标并拖动到自己想要的位置，就能得到想要的间距了，选择颜色标记工具，在想标记的位置直接单击，就会出现颜色值，还有一些不能标出的，可以用说明工具去单击，然后直接手动输入即可。
利用标注插件——Assistor PS
本文地址：
http://www.njanyou.cn/news/694.html
Tag：
为什么 UI 设计师
专业服务：
南京网站制作,
南京网站制作公司,
南京网站建设公司
联系电话：025-65016872
上一篇：
UI设计新手绝对不能错过的几个概念
下一篇：
新手最常犯的10个PS操作错误
