UI设计师在设计好界面之后，一些设计图还有位置距离都需要标出，这样程序员在写代码的时候才可以更加方便的进行编写。我们可以用pxcook进行标注用，再用cuterman进行切图，最后根据命名的规则进行命名。pxcook本身也可以进行切图，但是在2x和3x进行切图的时候，需要多次操作，不太方便，而cuterman很好的解决了这个问题。
打开网易新闻 查看精彩图片
进入官网，下载软件，pxcook是一个单独的软件，可以标注和切图，但是cuterman是一个插件,在ps里面使用。
打开网易新闻 查看精彩图片
打开网易新闻 查看精彩图片
下载好之后，点开软件，创建项目
打开网易新闻 查看精彩图片
按照需求设置
打开网易新闻 查看精彩图片
拖入psd文件，双击打开，可以看见左边的一排工具，常用的有智能标注，还有颜色读取以及热区标注。
打开网易新闻 查看精彩图片
用鼠标拖动出现黑线，那么就可以进行标注。
打开网易新闻 查看精彩图片
标注的原则：从左到右、从上到下、就近原则、禁止跨层级标注，标注时可以按照位置、大小、样式分开标注、方便后续工作开展，如需要特殊说明需要写note。页面元素居中可以不标。通栏宽度不标注（标签栏、导航栏、安全距离等）。
文字在标注的时候按照字号，而非行高标注。如果文字需要点击要标注热区
关于按钮的标注等颜色单一，形状规矩的图标可以直接标注属性，不切图。浏览量、点赞数量等ICON后面有数字的，需要标注固定图标间距
打开PS，点击窗口，拓展功能，可以找到cuterman
打开网易新闻 查看精彩图片
点击之后进行设置，选中安卓的和苹果的按钮，选择2x和3x的，以及有三个x的都要选上。
打开网易新闻 查看精彩图片
打开网易新闻 查看精彩图片
对需要切图的图层进行建组，建好组之后进行命名，就可以导出了。（命名规则：控件_类别_页面_功能_状态）
打开网易新闻 查看精彩图片
点击导出后，过一下，就可以看见出现两个文件夹，一个是安卓的一个是苹果的
打开网易新闻 查看精彩图片
点开安卓的之后又会有三个格式的文件夹，之后导出的文件都会在里面显示。
打开网易新闻 查看精彩图片
你学会了吗？
热门跟贴