1、精确第一步,精准的使用 Photoshop 切图
拿到设计稿一般是 PSD 格式的,我们首先会观察一下设计稿,思考一下对应的 HTML 结构和 CSS 设计模式,然后开始根据需求进行切图。Photoshop 内置的自动切图脚本。位于“文件”-》“脚本”-》“将图层导出文件”。意思就是将你的图层分层分别导出为文件,而且还支持剪裁图片和格式选择等等。切图流程:从 PSD 中找到要剪切出来的图层,然后拖动到新画布上面,栅格化文字或者合并组、合并图层,将要剪切出来的图片们合并到一起变成一个图层,然后使用这个脚本自动导出,命名一下图片。
2、使用马克鳗量取精准尺寸
切图精准之后,为了精准还原设计稿,下一步就是精准的尺寸,包括间距、宽高、位置等等。
测量方法:打开设计稿(PSD 或者将 PSD 中不同页面的设计稿保存出来 jpg),使用马克鳗进行标注并且观察设计结构和样式,思考如何做页面结构如何切图。之后根据上面的方法切图,再打开马克鳗测量后的图片,对照尺寸重构页面。
3、使用 alloydesigner 像素级别对比设计稿(超高还原度要求下使用)
alloydesigner 是腾讯 alloyteam 团队开发的用来辅助前端页面重构的工具。
简单的介绍一下它的功能:alloydesigner 是基于浏览器端的一堆 js ,你可以把它拖动到浏览器书签上点击就可以使用。它可以加载设计稿,作为本透明的背景放在当前网页上面,以达到像素级别的全真对比。包括间距尺寸等等各方面全都一目了然。此外还提供了一些其他实用辅助功能,具体请看:全新理念的Web前端开发方式——AlloyDesigner。