像素级页面制作

1、精确第一步，精准的使用 Photoshop 切图

拿到设计稿一般是 PSD 格式的，我们首先会观察一下设计稿，思考一下对应的 HTML 结构和 CSS 设计模式，然后开始根据需求进行切图。Photoshop 内置的自动切图脚本。位于“文件”－》“脚本”－》“将图层导出文件”。意思就是将你的图层分层分别导出为文件，而且还支持剪裁图片和格式选择等等。切图流程：从 PSD 中找到要剪切出来的图层，然后拖动到新画布上面，栅格化文字或者合并组、合并图层，将要剪切出来的图片们合并到一起变成一个图层，然后使用这个脚本自动导出，命名一下图片。

2、使用马克鳗量取精准尺寸

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

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

3、使用 alloydesigner 像素级别对比设计稿（超高还原度要求下使用）

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

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