文章目录
- 快速导航
带壳截图怎么做：真机边框套壳、导出透明底，再决定要不要上架
搜「带壳截图」，多数人要的不是设计理论，而是：截一张 App 界面 → 套上真机边框 → 导出能发官网 / 社媒的图。本站把这件事做成了本地工具：带壳截图生成器。截图不上传服务器，边框合成在浏览器里完成。
若你还在纠结「商店页该不该加壳」，先看 截图要不要加手机壳 与 商店截图加真机边框规则。本文只写怎么做出一张干净的带壳图。
和商店预览图、裸截图怎么分工
| 你要发到哪 | 推荐做法 | 本站入口 |
|---|---|---|
| 官网、文档、社媒、融资 BP | 带壳更易一眼看出是手机 App | /tools/device-mockup |
| App Store / Google Play 上架槽 | 多数情况用全出血界面 + 标题条；加壳前先核对平台规则 | /preview → 再 /tools/screenshot-check |
| 想看商店页长什么样 | 模拟产品页布局，不是单张加壳 | /tools/store-preview |
Google Play 对部分置顶大图、Wear OS 等场景有「避免 / 禁止设备外观」的口径；App Store 相对宽松但仍忌误导性外框。不确定时：宣传图用带壳，上架槽用全出血，两套预设分开导出。
一手步骤（约两分钟）
- 打开 /tools/device-mockup。
- 上传一张竖屏界面截图（模拟器、真机皆可；尽量去掉多余桌面背景）。
- 选择机型边框（iPhone / iPad / 常见 Android 等；以工具内当前列表为准）。
- 微调贴合：画面应铺满屏幕区域，避免上下黑边或裁掉关键按钮。
- 导出 透明底 PNG——方便叠到浅色或深色落地页；需要实底时再在设计稿里铺品牌色。
- 若同一套界面还要做商店标题图，回到 /preview 用商店画布另出一版，不要把带壳 PNG 硬拉成 Connect 尺寸。
导出前自检
| 检查项 | 为什么 |
|---|---|
| 状态栏时间、电量是否演示数据 | 真机杂讯会显得不专业 |
| 是否露出未发布功能 / 调试面板 | 外发素材常见翻车 |
| 圆角与刘海是否与所选机型一致 | 错机型边框一眼假 |
| 文件是否透明底 | 官网换背景时少抠图 |
需要批量改成多档商店像素、去透明通道再打 ZIP，用 /tools/batch-processor；那是上架打包，不是加壳。
常见问题
Q：带壳截图能直接传 App Store Connect 吗？
A：技术上可以上传，但许多团队仍用全出血构图更稳。加壳前请对照 边框规则文；Play 侧更要小心设备图像限制。
Q：和「应用截图」有什么区别？
A：「应用截图」常泛指商店/宣传用的界面图；「带壳截图」特指加了设备外框的那一种。完整商店构图流程见 应用截图在线制作指南。
Q：要不要付费？有没有专业版？
A：带壳工具在浏览器本地免费使用，本站不设「专业版」门槛；请按页面说明使用即可。
做完一张后，用 /tools/store-preview 把图标 + 截图摆进商店页草稿，比单独盯一张 PNG 更容易发现比例问题。