昨天吭哧吭哧给小店折腾宣传海报，结果上传网页直接糊成马赛克！气得我差点把电脑砸了。今儿个就把这趟踩坑经历捋清楚，新手看完能少走三年弯路。

开局一张图，尺寸先干懵

打开设计软件咔咔就是画，满脑子想着配色排版多酷炫。传到网站后台当场傻眼——右边被剁掉一大截！原来网页海报尺寸和印刷海报根本两码事。我蹲电脑前抠了三天头皮才搞明白：网页海报必须按像素算尺寸，而且每个展示位置都有固定比例！

• 血泪教训：先找程序员要展示框尺寸
• 土法子：打开浏览器按F12量像素

字体炸成二维码

精心挑的手写字体传到网页上，顾客手机打开直接变方块儿！折腾到半夜发现：电脑本地字体网页根本不认。连夜把宣传语全改成"微软雅黑"，丑得我眼泪汪汪。后来扒着淘宝大店海报研究了整晚，终于开窍：

• 保命操作：标题用图片，正文用系统默认字体
• 偷师技巧：特殊字体做成透明PNG贴上去

高清大图变马赛克

5MB的精致产品图传上网，加载出来满屏锯齿。压缩了十几次要么糊要么卡，发现网页海报200KB足够用！用PS导出时勾选"转换为sRGB"，品质调到60%左右最顺眼。手机电脑来回切换看效果，眼珠子都快瞪出火星子了。

关键发现：横版海报宽度控制在1200像素内，竖版别超800像素高度！

血染的按钮

"立即购买"按钮做得闪亮亮，结果顾客点了八百次没反应。检查代码发现点击区域被图片压在底下！重做时直接给按钮留出10像素安全边距，测试时举着触屏笔当手指戳了五十多遍。现在逢人就唠叨：

• 按钮周围必须留白
• 手机端按钮最小44×44像素
• 电脑端别小于32×32

折腾完这摊子破事，回头看看最初版海报简直像车祸现场。现在每次做新海报都先翻出这篇血泪笔记——都是真金白银买来的教训！