怎样用ps对设计稿进行一键切图？

Question

看了一篇文章http://www.th7.cn/web/html-css/201308/12356.shtml
是关于网页切图的，但是没有搞明白他是怎么做的？是不是要下载插件呢？
不知大家平时是怎么切图的，怎样让切图变得既高效又准确呢？

Answer 1

前言

因为平时做app较多，偶尔也会制作web，但是感觉两者的切图方案比较一致,因为移动的时代来了，web也由pc到phone的转变

先上工具

强烈建议使用ps的插件，阅读ui.cn的工具表,地址见下方

• tool.ui.cn

分析一下

• 移动App切图()

这里我想推荐下Cutterman,因为自己在使用

移动切图比较麻烦的事情是在分辨率，但是ps中的插件，如cutterman可以帮助您解决这个问题。

类似的还有很多都在上面tool.ui.cn的推荐列表中

• web切图

随着web的发展，估计现在很多的web页面都会要求在不同的设备上进行显示，所以，上面的切图工具依然可以使用。

1.纯pc web切图

纯pcweb切图，感觉固定长宽等下，没有难点，按照图层输出，也没有问题

2.自适应（phone+pc）

对于H5等针对手机切图，依然考虑分辨率，所以也应该按照移动app的切图方式来切

Answer 2

切图这项流程在制作页面中所站的地位是很高的，不能小看了切图，肯定有人会说：我觉得切图很简单啊，唰，一刀，唰，一刀...如果你觉得这样子的话，我就只能呵呵了。为啥我说切图地位很重要了？因为在你切图之前，你必须要对效果图有一个很深的认识：
1、你要了解效果图中的操作逻辑，设计逻辑
2、然后对效果图中的各个元素和部位都做一个大概的分析：哪里我可以写成公共部分，哪里我花的时间较长，哪里的特效比较复杂
3、这都有一个初步的认识后，你开始切图：在切图的过程中，你还要想：图标我该怎么切，切出来的格式什么，这里我改用图片还是CSS代码来实现，这里的结构该怎么写方便以后扩展，方便JS来操作DOM...

所以我现在看一个页面写的好不好，基本上就可以从他怎么切图看出来。如果一个有经验的前端，他切的图肯定是相当清晰的，对了，还有切出来的图的命名，嗯，这个也是一个很重要的，方便一眼看出这个图片放在哪里的。

怀恋一下切图的日子：还是在兼容IE6+的时代，圆角是靠切的，阴影是靠切的，渐变是靠切的，各种各样的图片是需要处理png24的兼容性的。

写CSS要记住的几点：重用、扩展、维护

Answer 3

要想精准的话，那就只能把设计稿分成几个部分来切图了，要是叠加的话，就得拆分的更细一些了

Answer 4

ps cc有智能切图

Answer 5

比较喜欢用PS的UI设计师可以充分利用这个工具进行切图，如果要进行团队协作，那么建议使用摹客iDoc呢.最近新上线的产品，试用了一下，感觉还不错。支持一键下载切图，智能标注，可以轻松地与团队成员协作完成设计。

Answer 6

http://www.cutterman.cn/zh/cu...

Cutterman是一款运行在photoshop中的插件，能够自动将你需要的图层进行输出， 以替代传统的手工 "导出web所用格式" 以及使用切片工具进行挨个切图的繁琐流程。 它支持各种各样的图片尺寸、格式、形态输出，方便你在pc、ios、Android等端上使用。 它不需要你记住一堆的语法、规则，纯点击操作，方便、快捷，易于上手。