今天想聊聊怎么把psd网站模板变成真正的网页，这事我折腾了好几天，总算摸出点门道。

一开始我连psd是啥都搞不清

最开始我寻思这psd不就是个图片吗？结果用浏览器打开全是乱码。后来问了做设计的朋友，才知道得用photoshop才能打开。可我电脑上根本没装这软件，当时就懵了。

后来找了个在线转换工具，把psd转成了png预览。结果发现图层全糊在一起了，根本没法用。这时候我才反应过来，得把每个按钮、每段文字都单独拆出来。

第一个方法：用标注工具硬拆

我试了ps自出的测量工具，把每个元素的尺寸和颜色都记下来。比如导航栏宽度1200像素，背景色是#f5f5f5。记了整整三页纸，手都快抽筋了。

• 先框选整个画布尺寸
• 再用吸管工具取色值
• 用标尺量间距

折腾到半夜才把首页拆完，结果第二天发现忘了记字体大小，又得重新来过。

第二个方法：找插件帮忙

后来朋友给我推荐了个ps插件，能自动生成标注信息。安装完点一下按钮，直接就把css代码吐出来了。不过有个坑爹的地方——中文字体它识别不了，老是显示成默认字体。

这时候我发现个取巧的办法：先在ps里把中文图层删掉，用插件生成代码后再手动补回去。虽然麻烦点，但总比纯手打强。

第三个方法：直接切图导出

有些特别复杂的图标实在没法用代码实现，我就直接切片导出成png。比如那个带渐变效果的按钮，切出来居然有200k，网站打开慢得像蜗牛。

后来学乖了，把渐变改成纯色，图标尽量用svg格式。虽然效果打了折扣，但网页加载快多了。

现在回头看这三个方法

最好的办法是混着用：简单的部分用代码写，复杂的图标适当切图。最重要的是提前和设计师沟通别等切完了才发现要改设计。

最近我又在琢磨怎么把psd转成响应式页面，这又是另一个坑了。等踩完坑再和大家分享。