本文关键词：ps做好切片后怎么做网站

干这行15年，见过太多设计师把PS图做得花里胡哨，结果一交出去，前端开发直接头大。很多新手问得最多的就是：ps做好切片后怎么做网站？其实这事儿没那么玄乎，核心就俩字：规范。今天我不讲那些虚头巴脑的理论，直接上干货，聊聊怎么把那一堆切片变成能跑的网站。

首先，你得明白PS切片不是目的，而是手段。很多小白切完图，直接扔给开发，或者自己拿着图瞎拼凑，最后做出来的页面在手机上全变形。记住，切片的初衷是为了减少HTTP请求，提高加载速度，而不是为了把图切成碎块。

第一步，规范命名。这是最容易被忽视，却最影响后期维护的环节。别再把图片命名为“图层1副本.png”或者“最终版2.jpg”了。正确的做法是：背景用bg-xxx，按钮用btn-xxx，图标用icon-xxx。比如一个登录按钮，就叫login-btn.png。这样你在写HTML的时候，一眼就能对应上，不用去翻PSD文件找对应关系。我有个客户，之前找外包做的站，图片命名毫无规律，后来想加个功能，改个按钮颜色，找了三天都没找到对应的源文件，最后只能重新切图，浪费了不少钱。

第二步，导出设置。现在PS版本迭代快，导出选项也多了。建议用“导出为”功能，选择PNG-24用于透明背景，JPEG用于照片类图片。注意，对于图标和小元素，尽量用SVG格式，矢量无损，不管怎么缩放都清晰，而且文件极小。如果你还在用古老的“存储为Web所用格式”，赶紧升级习惯。另外，记得给图片加上ALT属性，这不仅对SEO友好，对盲人屏幕阅读器也是必要的。

第三步，HTML结构搭建。别一上来就写CSS，先搭骨架。用语义化标签，比如