文章目录
- 快速导航
截图美化在线免费：加渐变背景、浏览器框与标注后导出
想搜「截图美化」时，多数人要的是：把一张干巴巴的 UI 截图，换成好看的底、套上浏览器框、加一句标题或箭头，再导出给落地页、推文或文档用——最好免费、在线、别把图传到服务器。本站 截图美化 就是干这件事：全在浏览器 Canvas 里完成，图片不上传。
真机金属边框和 App Store / Google Play 像素尺寸仍走 /preview；本文只讲营销向包装怎么用。规格核对日：2026-10-30。
和设备预览怎么分工
| 你要的结果 | 去哪 |
|---|---|
| iPhone / 安卓真机边框 + 商店尺寸 | /preview 或 设备模型 |
| 渐变/网格底、Safari·Chrome 窗、标题与标注、风格预设、批量 ZIP | /tools/screenshot-beautify（本文） |
| 社媒静图比例（1:1、OG 等）快速包装 | 美化工具内尺寸预设；或 /tools/og-share |
口诀：上架真机壳用预览；官网/推文/文档用美化。
一手步骤
- 打开 /tools/screenshot-beautify，拖入或粘贴一张 PNG/JPG/WebP。
- 背景：纯色、预设渐变、网格、噪点，或上传自定义底图；需要透明底导出选透明（PNG）。
- 窗框：无框 / Safari 明暗 / Chrome 明暗 / macOS 窗 / 玻璃描边；地址栏文字可改成你的域名或功能名。
- 呈现：内边距、圆角、阴影、轻倾斜（flat / soft / strong）。倾斜适合 Hero，商店静图建议保持平视。
- 文字叠层：标题 + 副标题，调位置与对比度，避免压住关键 UI。
- 标注：箭头指向按钮或矩形高亮区域；一张图只圈 1–2 处，避免「满屏记号笔」。
- 一键风格：从 8 套预设起步，再微调颜色与阴影。
- 尺寸预设：自由 / 16:9 / 1:1 / 4:5 / X 推文 / OG 1200×630。导出 PNG（主推）或 JPEG；多张图用批量 ZIP。
超大原图会自动缩到约 8192 边长 / 16MP 量级并提示——先缩小再美化更稳。
风格预设怎么选
| 场景 | 建议 | 注意 |
|---|---|---|
| 产品站 Hero | 深色渐变 + Safari/Chrome 暗色框 + 轻倾斜 | 标题对比度要够 |
| 文档 / README | 浅底 + 浅色窗框 + 无倾斜 | 体积与可读性优先 |
| 社媒方图 | 1:1 + 强一点阴影 | 文字别贴边 |
| 多语言物料 | 批量 ZIP + 同一预设 | 换文案图时保持框与底一致 |
和截图管线怎么接
- /preview 或设计稿导出静帧
- 需要多商店像素 → /tools/batch-processor
- 营销包装 → /tools/screenshot-beautify
- 敏感信息上屏前 → /tools/privacy-redact
常见翻车
| 现象 | 原因 | 处理 |
|---|---|---|
| 把美化图当 App Store 截图上传 | 窗框/倾斜不符合「设备内 UI」预期 | 上架仍用无窗框真机预览图 |
| 标题挡住核心按钮 | 叠层默认居中 | 挪到安全区或缩小字号 |
| JPEG 发白边 | 透明底用了 JPEG | 透明务必 PNG |
| ZIP 里比例乱 | 批量前未统一尺寸预设 | 先锁定预设再导出 |
小结
截图美化 把「换底 + 窗框 + 文案 + 标注 + 批量」收成一步本地流程。真机商店素材继续用预览；美化负责站外传播与文档配图。英文版说明见 /en/articles/screenshot-beautify-marketing-mockup-guide。