如何还原像素级别的设计稿 切图工具 Photoshop操作

前端重构项目外包做了也有一年左右了，分享一下还原设计稿的一些经验。

为什么要还原像素级别的设计稿

前端重构和美工是两个级别的，一个就在于精准还原设计稿而另一个是自我感觉怎么好怎么来。

而比较高端的项目是分三块的，由专业的设计师做设计，由前端工程师切图做页面，再由后端工程师开发功能整合到系统上。术业有专攻，每一个环节都会有很高的水准，组合成一个各方面都非常专业的网站，为客户的业务提供更好的帮助，因此客户也愿意支付高价。

所以，前端工程师的任务，就是精确还原设计稿甚至要精确到像素级别，不然为什么还需要设计师？

Photoshop 切图技巧

精确第一步，精准的使用 Photoshop 切图。拿到设计稿一般是 PSD 格式的，我们首先会认真观察一下设计稿，思考一下对应的 HTML 结构和 CSS 设计模式，然后开始根据需求进行切图。

传统的切图流程

确定好了切图方案之后，对于大的 PSD 来说，往往新建一个画布，然后将 PSD 里面需要切出来的图层拖动到新画布中，使用“剪裁”工具把这个图层进一步的剪切，变成最小内容，剪去多余的部分。然后打开“存储为 Web 所用格式”对话框，根据图片选择格式、压缩比以及是否是渐进式等等，然后选择路径修改文件名。

这样的缺点很明显，有时候图标或者图层有半透明的阴影，这时候对于边界的界定就不好处理，此外需要大量重复的剪裁、返回上一步、继续剪裁、保存图片等等。人工操作过多，导致效率底下，成本增加，大量时间浪费在基础重复的操作中（为此一般项目的扣图都扔给另一个同学^_^）。

改进后的切图流程

计算机就是为了帮助人类完成大量重复的工作，有没有自动切图的功能或插件呢？为此我也在不断的搜索。

然后有一天就发现了 Photoshop 内置的自动切图脚本。位于“文件”－》“脚本”－》“将图层导出文件”。意思就是将你的图层分层分别导出为文件，而且还支持剪裁图片和格式选择等等。

选择剪裁图片之后，将会自动给你剪裁到最小状态，由于是机器剪裁，所以精度非常高，半透明的阴影也完全 OK。

于是，改进后的切图流程就变成了：从 PSD 中找到要剪切出来的图层，然后拖动到新画布上面，栅格化文字或者合并组、合并图层，将要剪切出来的图片们合并到一起变成一个图层，然后使用这个脚本自动导出，命名一下图片。

这个脚本的不好就在于命名，输出的时候命名比较乱，需要自己修改一下，但是已经非常自动化操纵了，相见恨晚。

使用马克鳗量取精准尺寸

切图精准之后，为了精准还原设计稿，下一步就是精准的尺寸，包括间距、宽高、位置等等。

之前得测量方法

在没遇到马克鳗之前，我一直苦逼得用 QQ 截图来测量尺寸、大小和位置。好在 QQ 截图得功能比较强大，测量得还算准确，缺陷就是需要来回切换程序界面，一次次得测量，这样必然导致低效率。

此外，不只是测量尺寸，还原设计稿还需要提取对应位置得背景颜色等等。这样还需要在后台打开 Photoshop 然后偶尔切换到 PS 中，用拾色器来取色。

后来问了一下周良才知道了这么一个设计师必备得工具马克鳗，相见恨晚。

改进后得测量方法

马克鳗得主要功能就是对设计稿测量尺寸、获取颜色、标注信息等等。而且支持各种格式得图片，甚至支持 PSD 格式，标注完之后会自动生成一个 markman 文件，你可以发送给别人，不会影响原来得设计稿。还支持 Retina @2x 设计稿得缩小，例如针对移动端得设计稿往往设计成双倍尺寸得，测量之后尺寸都需要除以2，而使用马克鳗之后，会自动读取文件名后面的 @2x ，如果确定是双倍设计稿，就会自动给你缩小一倍。

这样改进后的测量方法就变成了：打开设计稿（PSD 或者将 PSD 中不同页面的设计稿保存出来 jpg），使用马克鳗进行标注并且观察设计结构和样式，思考如何做页面结构如何切图。之后根据上面的方法切图，再打开马克鳗测量后的图片，对照尺寸重构页面。

使用 alloydesigner 像素级别对比设计稿

alloydesigner 是腾讯 alloyteam 团队开发的用来辅助前端页面重构的工具。

简单的介绍一下它的功能：alloydesigner 是基于浏览器端的一堆 JS ，你可以把它拖动到浏览器书签上点击就可以使用。它可以加载设计稿，作为本透明的背景放在当前网页上面，以达到像素级别的全真对比。包括间距尺寸等等各方面全都一目了然。此外还提供了一些其他实用辅助功能，具体请看：全新理念的Web前端开发方式——AlloyDesigner。

今年3月份放出来之后，大家就开始试用了一下，但是反馈并不是特别好。我也跟着试了一下，感觉操作会比较繁琐，而且功能比较多，运行起来稍卡。而且是全新的开发方式，一时也不太习惯，于是就没再用了。

结果前段时间有个项目，客户有点“像素眼”，结果就用上这工具了，而且幸亏有这工具。前段时间得那个项目比较奇怪，设计稿是图片，要求根据浏览器宽度进行整体得缩放，即浏览器宽屏幕大得时候，里面得尺寸和字体各方面都要变大。所以各方面处理起来需要计算成流动得，文字、间距、尺寸都得用 em 或者百分比单位，再加上没有高清得 PSD 设计稿，还原就不是那么精准。

更要命的是，git 上另一个同事给我修改了一下尺寸，结果差距就更大了（其实本来还原的还好），客户反馈了一张差距图：

于是就想起了这个工具，马上拿出来用了一下。把设计稿主要几个页面裁切了一下，然后试用 Firefox 的响应式开发视图设置好跟设计稿相同的尺寸，然后应用 alloydesigner 加载设计稿图片，再在 Firebug 中调试尺寸等参数，最后达到基本相符：

由于 Web Font 渲染、结构、流动的单位等，没有完全重合，但这样就已经足够了。

回顾如何还原像素级别的设计稿

首先先要打开设计稿来认真观察并思考需要做的结构、样式和布局的实现思路等等，认真观察的时候使用马克鳗标注尺寸、颜色等信息。

准备前端基础文件，例如幻灯片组件、Web Font 等等，如果用 Sass 之类预处理器的话，可以将之前马克鳗标注的颜色等信息先声明好变量。这里自荐一下自己常用的前端基础文件结构 ysass。

开始通过 Photoshop 自动切图脚本，自动切图。

将切好图片图标等放在 images 文件夹下面，根据马克鳗标注的设计稿开始编写 HTML、CSS 等等。

如果项目要求比较严谨，要求超高还原度，这时候再使用 alloydesigner 工具，进行像素级别的对比调整。