iPhone 给截图加设备外壳 —— 三条路各自说清楚

最后更新:2026 年 7 月 22 日

一张裸截图看着就是一个漂浮的矩形。把它套进真实的 iPhone 边框里,同一张图就立刻像一张产品图 —— 眼睛立即知道这是一个手机屏幕,边框外的留白让内容有呼吸空间,屏幕里的颜色也在金属或陶瓷机身的衬托下更亮。麻烦是:iOS 没有自带的方式做这件事。Apple 有源头的外壳文件,但它是以 Sketch、Figma、Photoshop 三份文件的形式发给 Mac 上的设计师用的,不是“照片”App 里的一个按钮。这篇讲清楚在 iPhone 上给截图套壳的三条真实路径。

Scrollie 的 Device Mockup 应用在一张长截图上,外壳是 iPhone 17 的 Apple 官方配色。

诚实的起点:iOS 没有自带套壳功能

值得直接讲清楚,不然容易以为它藏在某个角落里。在“照片”App 里你可以裁剪、调整、标注,iOS 18 在支持的机型上还可以用 Clean Up。但你不能点一个按钮把截图放进 iPhone 边框里。“照片”里没有这个滤镜,Markup 里没这个工具,Apple 也没做一个能加壳的 Shortcuts 动作。所有的套壳路径都要走出 iOS 默认工具集 —— 要么上 Mac + 设计工具,要么打开浏览器,要么装一款专门的 iOS App。

方法一 · Apple 官方 Design Resources(Mac + 设计工具)

Apple 有一个叫 Design Resources 的页面,里面提供 Sketch、Figma、Photoshop 三种格式的库文件,每一份都包含近几年 iPhone 和 iPad 的精确外壳、颜色、材质。这是设备外壳的源头 —— 别人所有的 mockup 最终都能追溯回 Apple 发的这些文件。如果你已经在 Sketch 或 Figma 里工作,这条路最干净。

1. 在 Mac 上打开 Apple 的 Design Resources 页面。搜索 "iPhone"(或 "iPad"),下载你在用的工具对应的文件 —— Sketch、Figma 或 Photoshop。
2. 打开文件。里面按机型和颜色排了一堆画板,选一个你要的。
3. 把你的截图拖进外壳里预留的占位区。Apple 的模板一般都有蒙版或裁切图层,截图会自动匹配尺寸。
4. 把画板导成 PNG 或 JPEG,分辨率随需要选 —— retina 2x、App Store 上架图 3x 等等。

诚实的限制:这是设计师的工作流。你需要一台 Mac、一款设计工具、第一次大约十分钟熟悉。做营销主图、作品集、上架图都值得走这条路。想“我现在在手机上就想要一张 mockup”,这条路太重。

方法二 · 在线 mockup 生成器(浏览器,不装 App)

网上有几款免费的网页工具 —— mockuphone.com 是比较常见的一款 —— 让你上传截图,给你套上设备外壳,再把 PNG 下回来。有浏览器就能用,iPhone 上也可以。

1. 在 Safari 里打开一款在线 mockup 生成器(比如 mockuphone.com 或类似服务)。
2. 选你要套的设备 —— iPhone、iPad、Android 或者别的形态。
3. 点上传,从“照片”里选你的截图。
4. 等服务器渲染一会儿(一般几秒),点下载,mockup 就存回相册里。

诚实的限制:你的截图必须上传到第三方服务器处理。营销图反正要发到公开落地页,上传没问题;但如果是私人聊天截图、银行 App、公司内网 App、私人文档 —— 就不是那么合适。在线工具通常也在最新机型上略慢一拍,外壳不一定是 Apple 精确发的那一版。

方法三 · 一款专门的 iOS App(设备本地、一键、最新机型)

大多数人的中间路径:装一款带 mockup 功能的小 iOS App。Scrollie 内置了 Device Mockup 功能,一键把截图套进真实的 iPhone 或 iPad 边框里,设备本地完成,外壳库里已经有 iPhone 17 系列多款机型和 Apple 官方配色。

普通截图套壳

1. 打开 Scrollie,从相册选一张截图,或从“照片”里分享进来。
2. 点 Device Mockup 工具。外壳库弹出,里面是近几年的 iPhone 和 iPad,每款都配上真实的 Apple 官方颜色。
3. 挑一款机型 + 颜色,截图会自动放进屏幕位置。截图如果是圆角或者比例不同,Scrollie 会自动适配显示区。
4. 可以再加背景、标题、或者把几张 mockup 排成一张拼图当成营销素材集。导出格式:JPEG / PNG / HEIC / PDF。

长截图逐片套壳

长截图通常太高塞不进单个设备外壳。Scrollie 的 mockup 想清楚了这一点:如果长截图导出选“切片”,可以让每一片单独套一个设备外壳,拿到一组看起来真实的手机屏,而不是一个高得离谱的假手机。

1. 在 Scrollie 编辑器里导入长截图(或者用多张截图拼一张)。
2. 打开导出面板,选“切片”。长图会按等高切成几段。
3. 打开“每片套壳”这个开关,每一片都会被套进单独的设备外壳。
4. 导出整组。你拿到的是三、四、五张 mockup 图,把整个故事讲完,而不是一个塞不下屏幕的巨型手机。

快速对比

常见问题

相关页面