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

2014.05.28

前端相关

TOC

1. 1. 为什么要还原像素级别的设计稿
2. 2. Photoshop 切图技巧
   1. 2.1. 传统的切图流程
   2. 2.2. 改进后的切图流程
3. 3. 使用马克鳗量取精准尺寸
   1. 3.1. 之前得测量方法
   2. 3.2. 改进后得测量方法
4. 4. 使用 alloydesigner 像素级别对比设计稿
5. 5. 回顾如何还原像素级别的设计稿

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

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

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

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

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

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 工具，进行像素级别的对比调整。