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