帮朋友改一个金融类H5单页，设计稿里按钮阴影差了0.3px，渐变色停点精确到1.7%。Figma导出PNG在iOS Safari上一测——边缘发虚，阴影直接错位。最后还是退回PS：栅格化图层、切片工具手动拉框，导出2x PNG再扔进Webpack的url-loader。折腾一圈，发现老手艺比啥新工具都靠谱。
这事让我重新翻了下2014年那版《HTML5移动Web开发指南》第7章——H5单页的本质没变：它仍是像素级视觉交付+轻量JS交互的组合体。PS不时髦，但它是唯一能让你亲手调alpha通道、压色阶、控dithering的工具。
其实你想想，这么多年过去了，从jQuery到React，从px到vw，甚至CSS里都支持了container queries。但一个H5单页放到微信里，那个首屏的渲染依然要看WebView的脸色。设计稿里一个#0066cc的蓝，到了iPhone上就偏紫——这时候你不会去找Figma插件，你会打开PS，吸管点一下，一对比sRGB和Display P3色域，就知道是哪个色空间在搞鬼。
PS切图不是怀旧，是保底。当所有新工具都在赌浏览器兼容性时，你手里还能有个输出确定性像素的工具。
为什么这活儿看着简单，但总有人搞砸
别一上来就狂按Ctrl+Shift+Alt+S。切图前先打开图层面板——那个叫“按钮_悬停@2x”的图层，如果底下混着“阴影蒙版副本 3”和“渐变遮罩（临时）”，导出的PNG连border-radius都对不上。
上周面试几个应届生。我问：“如果设计师给的蓝#0066cc在iPhone上发紫，你第一反应是查什么？”两个答Flex布局、一个答CSS变量。没人提“先用PS吸管比对sRGB/Display P3色域”。
图层名为什么那么重要？不是仪式感。PS里图层名带空格或中文括号？Webpack的file-loader会给你转成%20%EF%BC%88，最后在Safari里404。我们组现在强制用btn-primary--hover@2x这种BEM式命名，连切片名称都同步。上周有同事漏改一个icon_search@3x为icon-search@3x，导致Vue组件里require(`@/assets/${name}.png`)直接报错——不是路径问题，是PS里根本没生成那个文件。
还有那个“存储为Web所用格式”的坑。勾选“改进”会吃掉1px边缘抗锯齿。但“切片工具”拉框后右键→“建立在切片的导出”，选PNG-24+“仿色：扩散”+“透明度：杂边：白色”，出来的图在iOS 17.5上文字描边才不糊。记得关掉“使用切片大小”——否则自动裁白边会啃掉半像素的阴影偏移。
CSS Sprite和AI抠图，谁说老工具不能进化
金融类H5单页首屏图标17个。全走HTTP/2并发？不如用PS把它们拼成一张sprite@2x.png，再写段CSS：
.icon-bank { background-position: -0px -0px; width: 24px; height: 24px; }
.icon-card { background-position: -24px -0px; width: 24px; height: 24px; }
/* 手动算，别信插件——PS里用标尺拉距离，像素就是像素 */PSD里合并图层时记得保留原始尺寸，别让“图像→画布大小”悄悄缩放。切图这事，越手动，越确定。
但你也别觉得PS就没新东西。PS 2026.1的“切片智能识别”面板刚打开时，我盯着那个“自动检测可交互区域”按钮看了三秒——它真把“立即领取@2x”图层标成了btn-cta--primary@2x，连带把旁边半透明蒙版识别为overlay--dim@2x。不是靠图层名正则，是用像素级边缘+Alpha通道梯度分析的。
AI抠图现在敢进生产环境了。以前“选择并遮住”调半小时还留毛边，现在右键图层→“AI透明化（Beta）”，选“复杂背景·图标级精度”，1.7秒出PNG。实测过含发丝、烟雾、玻璃反光的H5抽奖转盘指针——导出后直接扔进<img>，没加任何<picture> hack，iOS Safari 17.5里缩放0.5倍依然干净。
多语言切图也不用重开PS了。选中所有文本图层，Ctrl+Click呼出“批量文本替换”：输入zh-CN:立即领取|en-US:Get Now|ja-JP:今すぐ獲得，回车。PS自动生成三个命名空间的切片组：btn-cta--primary-zh@2x.png、btn-cta--primary-en@2x.png……连图层组都按locale自动折叠。
软件越聪明，越要盯紧它的输出。上周导出发现AI把“¥”符号抠成锯齿，查日志才发现它默认用了“低对比度文字”预设。关掉，重跑，完事。
从保鲜到保命：切图尺寸与格式那点事
上周上线一个保险产品H5，首屏白屏1.8秒——查下来不是JS，是3张@2x PNG合计2.1MB。PS里导出时还勾着“品质100%”，仿佛像素越多越虔诚。
Can I Use显示WebP全局支持率96.3%，连Android 4.3的UC内核都认。PS 2026.1导出菜单里，WebP已顶替JPEG成第一选项。别手动勾“转换为WebP”——直接设为默认输出格式，批量切片时自动生效。导出参数就两行：
<meta http-equiv="Content-Security-Policy" content="img-src 'self' data:;">
<img src="bg.webp" alt="">82不是玄学，是实测：低于80文字边缘发虚，高于85体积增长陡增。iOS Safari 17.5、Chrome 124、微信8.0.53全过。
关键帧图标、主视觉Banner、CTA按钮图——这三类必须同步加载，但用JPEG渐进式（Progressive JPEG）比WebP更稳。PS里“文件→导出→存储为Web所用格式”仍保留该选项，别嫌老。非首屏区域，<img loading="lazy">加上就行，别写JS懒加载库了。
TinyPNG压缩后仍超？打开Squoosh，关掉“Smart Quality”，手动拖动Quality滑块到68——它会实时显示体积。所有切图合并后总重压到500KB内，这是微信WebView首屏可接受的硬阈值。别信“压缩率90%”这种虚数，看最终curl -I返回的Content-Length。
切图这事，格式只是表皮，尺寸才是骨相。再聪明的AI也救不了你把1920×1080背景图塞进手机屏里。
一个618活动页的PS切图全流程拆解
去年夏天某品牌618活动页，要做什么方扔过来一个PSD，分辨率375×667，图层堆了78个。产品经理的原话是“就一个页面，切出来拼上就行”。嗯，听起来确实简单——直到你真正动手。
设计稿里背景是张1920×1080的渐变星空图，直接铺在手机屏上。第一反应是切成整张背景，导出JPEG。但微信里一加载，Android低端机直接白屏——内存溢出。查了查日志，那张图解码后占用内存快30MB，WebView扛不住。
解决方案反而很土：把星空图拆成上下两段，顶部纯色渐变用CSS linear-gradient(180deg, #0b0f2a 0%, #1a2a6c 100%)代替，底部星点单独切成20×20的小图平铺。PS里用切片工具框出星点区域，导出为PNG-8，色板压到64色。代码里<div class="star-bg"></div>只引小图，<div class="gradient-top"></div>铺满。实测内存占用降了80%。
CTA按钮那层设计师给了三个状态：默认、悬停、按下。PS里每个状态单独切一个小图，命名按btn-cta--default@2x.png、btn-cta--hover@2x.png、btn-cta--active@2x.png。导出时注意关掉“转换为sRGB”，否则微信浏览器里颜色会变灰一截。悬停状态在移动端其实用不着，但需求方坚持要保留——末了用touch事件模拟了:active伪类，切图里只用了默认和按下两张。
最坑的反而是文案区域。设计师用的字体是方正兰亭黑，但H5里没法直接用。切图时把每行文字单独切片，导出PNG-24。结果iPhone 6上文字边缘发虚——图层里文字没转智能对象，PS缩放时抗锯齿算法走了旧版。退回PS，选定所有文字图层，右键转为智能对象，再切片导出，边缘才干净。后来学乖了：所有文字切片前，先执行一遍“图层→栅格化→文字”，再转智能对象，防止PS版本间的渲染差异。
整个页面切完，切片文件一共37个，总大小430KB。拼接时用了最简单的方式：一个div装背景，里面放绝对定位的切片。没上框架，没写webpack，纯手撸HTML。活动结束那天看数据，页面加载时间中位数1.2秒，转化率比上一版高15%。
回头想，PS切图做H5这事儿，不是炫技的活儿。它考验的是你能不能在设计师的理想和浏览器的现实之间，找到那个刚好不崩的平衡点。家伙越老，越要尊重它犯过的错。
几个常见的坑，踩过就长记性
切图不是把PSD拖进导出菜单就完事。它像老焊工点焊——火候差0.3秒，焊缝就脆。
背景图全切？错。渐变星空、模糊蒙版、长阴影这些，全该扔给CSS干。PS里留个纯色占位层就行。真要切图，优先切图标、按钮、装饰性小元素。大图只切不可替代的实拍素材，且必须带尺寸标注：@2x/@3x标清，WebP格式勾选“仅限RGB”——iOS Safari不认带Alpha通道的WebP。
文字切片前，栅格化文字这步真不能省。方正兰亭黑、思源黑体这些字体，PS 里直接切容易吃渲染差异的亏。2023 年之后的 PS 默认开着 GPU 加速，但导出 PNG 时没栅格化，文字边缘抗锯齿路径就会跟着系统缩放抖动。iPhone 6s 上发虚，红米 Note8 上偏色，都是同一张 PNG 惹的祸。别信“转智能对象”万能论——先栅格化，再转智能对象，到后面切片，这才稳。
源文件比切图还重要。客户说“改个按钮颜色”，你翻遍文件夹找不到PSD，只能靠截图反推色值？别等那天。每次交付，PSD必须带图层分组（Layer Group命名用英文，如header_cta），隐藏图层保留，文字图层不合并。我见过最惨的是：设计师用CC 2021做的PSD，外包方用CS6打开，所有文本图层全变成乱码——版本兼容性不是玄学，是刚需。
干这行越久越明白一个道理——PS切图做H5单页这事儿，听着像上个世纪的活儿，可每次项目里它都是最稳的那块砖。它不跟你讲什么花哨逻辑，但只要你摸透它的脾气，该对齐的对齐，该标高清的标高清，出来的东西别人挑不出毛病。工具老不老不重要，关键是你还愿不愿意花心思去养熟它。
评论