如何将设计好的Sketch、Psd设计图如何转Html页面

将设计好的PSD设计稿转换为前端可访问的HTML页面，是网页制作过程中，继设计之后的一个重要环节，相信对于很多对前端切图不是很了解的UI网页设计人员来讲，这确实是一个疑惑点，就好比我们十多年前也以为注册一个域名，不懂虚拟主机、服务器就能做网站一样。每个职业都有自己的成长过程。本篇文章，我们就来讲讲，如何将已经设计好的Sketch、PSD设计稿转换为前端HTML页面？

一、前端开发工程师编写代码实现页面

此类实现是正常的手工将设计稿转HTML方法，即使用DIV+CSS+JS代码编写的方式来实现前端页面切图。部分公司有自己完善的技术团队，其配套有专业的前端技术人员，在设计完成之后，设计师即可将设计稿转发至前端开发人员，进行编写。大部分公司没有技术团队，甚至设计也是外包，那么在验收完设计稿件之后，需要寻找前端切图外包团队进行将PSD设计稿转为浏览器可访问的HTML页面。

二、利用第三方工具或插件来实现

很久以前网页三剑客软件大行其道的时候，使用firework在完成设计稿之后，其导出菜单中也可以直接将所设计的页面进行导出为html，但是这种导出其实是将一个网页设计稿以表格的方式进行切分，比如横向分十列，竖向分十列，然后建一个十行十列的表格，再将所有的图片填充至表格内。这种页面基本不存在任何语义的概念，但是也是“前端切图”的始祖，基本上这个词也是从这里得来的。

目前市面上也存在一个较为智能的将网页设计稿直接导出为前端html页面的程序或插件，比如蓝湖、Sketch上上的kuaiui插件等等。这些程序和插件可以将设计稿直接转为html。

存在即和合理，这类页面主要适用于，页面效果展示，或者基本的百度竞价推广，信息流广告等短期内使用。如果长期使用的话，这类工具就会凸显出弊端，这种工具只是比以前的firework更先进了一些，使用到了现代的一些html标签，不再使用table布局而已，其标签页多为 div1、div2、div3这种形式，页面代码无过多逻辑和语义。从优化、标签语义化和SEO的角度来讲的话，这类页面表现并不佳。

综上，如果您对网页的要求只是用来做竞价推广等信息流广告，且考虑节省成本的话，使用第三方工具和插件足够了。如果您考虑长期运营或者在推广的时候考虑页面的打开性能等因素的话，建议找专业的前端切图团队进行手工编写有语义的代码进行制作。