昨儿折腾了一天网页切图的事，可算把公司新首页搞定了。这事儿，说简单也简单，就是把设计师给的图变成能动的网页，但真干起来全是细节，跟拼乐高似的，差一毫米都对不上。

先扒拉设计稿

打开PSD文件我就傻眼了——光图层组就叠了二十多层。设计师老张还特别喜欢用混合模式，黄色渐变叠紫色阴影，导出来颜色准不准全看运气。我冲了杯浓咖啡定神，干的第一件事就是把隐藏图层全关了。鼠标咔咔点了半小时，终于扒拉出核心的导航栏、轮播图和产品卡片三块肉。

• 按住Alt键狂点眼睛图标，跟扫雷似的
• 文字图层单独拎出来重命名，"标题-主"、"副标题-蓝"这种土办法最好使
• 找到个隐藏的装饰小图标，差点当成空白图层删了

动刀切素材

掏出祖传的切片工具，从导航栏LOGO开始下手。这小图标带透明底还得适应暗黑模式，我直接切成SVG格式，放大十倍都不糊。切到产品卡片时犯难了——设计师加了毛玻璃效果，背景还会跟着页面滚动变。心一横把卡片拆成三部分：顶部的半透明白色遮罩单独切PNG，中间内容区域老老实实用CSS写样式，底部阴影切成1像素高的条条重复拉伸。

轮播图最折磨人。大Banner图里嵌着渐变按钮，鼠标放上去还会发光。我用钢笔工具抠按钮轮廓时手都在抖，切完发现发光效果切不出来，只能跟设计师扯皮半小时，改成CSS滤镜实现。切到下午五点才明白个真理：能代码实现的绝不切图，否则手机端加载慢得能泡碗面。

拼积木写代码

打开编辑器先把切好的素材按文件夹码整齐。图片扔assets，icons归svg，这步偷懒后面绝对抓瞎。写HTML时卡在导航栏菜单——本来想偷懒用div糊弄，想起上次被前端主管骂"语义化喂狗了"，还是老老实实敲nav>ul>li>a。结果手机端测试时发现菜单挤成麻花，临时加了个汉堡图标救场。

• 轮播图用flex布局比float省心十倍
• 毛玻璃效果backdrop-filter属性真香
• 产品卡片用grid排版，换行对齐不操心

调间距调到怀疑人生。设计师标注按钮间距20像素，实际写出来看着像隔了条河。掏出像素眼插件量，原来标注的是从文字基线开始算，我按按钮边框算能不错么。手机屏上一看更离谱，部分安卓机默认字体大得吓人，只好把padding改成相对单位。

踩坑后的顿悟

收工时发现页面加载要十几秒。一查才知道切成片的装饰线条居然用的3MB大图，赶紧用在线工具压到50KB。更蠢的是轮播图切了五张超清图，只有第一张需要完整加载，后面四张搞个模糊缩略图先顶着就行。

最搞笑的是测试时发现某图标颜色失真。原来切图时没关闭PS的色域警告，导出的PNG自带灰蒙蒙滤镜。返工重切时学乖了：切图前先合并可见图层再复制到新文件，从源头避免设计师的魔法图层污染。

搞完这趟活最大体会是：切图不是力气活，是脑力活。提前跟设计师对好响应式断点，确认好动效实现方式，比吭哧切完再返工强一百倍。下次谁再让我切渐变投影，我直接甩CSS代码到他脸上！