幫 iOS App 螢幕截圖加上漂亮的 iPhone / iPad 邊框(bezel)
iPhone 模擬器(simulator)有很方便的螢幕截圖功能(cmd + s)，可惜截出來的圖片不像真的 iPhone 那麼漂亮，因為產生的截圖少了美美的邊框。
彼得潘最近研究了一下，製作一個幫截圖加上 iPhone / iPad 邊框的 iOS App Bezel。透過它我們可以用以下兩個方法產生加上 iPhone 邊框的截圖。
- 方法1: 在模擬器操作 App 時，點選 Copy to Clipboard 複製 App 畫面，然後切到 Bezel App 幫畫面加上邊框。
- 方法2: 將多張螢幕截圖加到 Bezel App 的 Xcode 專案，然後啟動 Bezel App，利用它將多張截圖加上邊框。
以下我們分別介紹兩種方法的操作步驟。
方法1: 在模擬器操作 App 時，點選 Copy to Clipboard 複製 App 畫面，然後切到 Bezel App 幫截圖加上邊框
從 GitHub 下載幫截圖加上邊框的 Swift 程式
從 Xcode 打開 App 專案
專案的 device 資料夾下是各種 iPhone & iPad 邊框的圖片，圖片來自 Apple Design Resources 的 Product Bezels，目前專案裡包含以下分類:
- iPhone 14 系列
- iPhone 13 系列
- iPhone 12 系列
- iPhone 11 系列
- 各種 iPad 機型。
比方 iPhone 14 Pro — Deep Purple — Portrait 的圖片如下。
將 Bezel App 裝到模擬器上
以下我們將 Bezel App 裝到 iPhone 14 Pro 模擬器。
有了 Bezel App，之後我們在 iPhone 14 Pro 模擬器將可依以下步驟方便地幫 App 畫面截圖加上邊框。
勾選 Show device mask in screenshots and videos
打開模擬器的 Preferences 視窗，勾選 Show device mask in screenshots and videos，這樣等下在 14 Pro 對 App 進行截圖時，才能截出有圓角的圖片。
複製 App 畫面
以 News App 為例，以下我們啟動模擬器的 News App。點選 cmd + s 截圖，然後在模擬器右下方的截圖預覽按右鍵，點選 Copy to Clipboard 複製 App 畫面。
啟動 Bezel App
當 Bezel App 回到前景時(可以是重新啟動，也可以是從背景回到前景)，App 將讀取我們剛剛複製的畫面，請點選 Allow Paste。
App 將依據畫面的大小顯示可能的 iPhone / iPad 機型。剛剛我們在 iPhone 14 Pro 截圖，可能的機型只有 iPhone 14 Pro，因為沒有其它 iPhone 跟 14 Pro 的尺寸一樣。
從上圖的 App 畫面，我們看到可選擇 pasteboard / project & portrait / landscape。由於我們想幫剛剛複製的畫面加上邊框，因此採用預設選取的 pasteboard & portrait。
點選想要加上邊框的機型產生邊框截圖
在此我們點選 iPhone 14 Pro — Deep Purple。點選後 App 將產生加上邊框的截圖，存在某個神秘的 temp 資料夾下。
圖片的位置將被存成字串，存在複製貼上的暫存區(pasteboard)。以下我們利用 Finder 快速找到圖片。
從 Finder 的 menu 點選 Go > Go to Folder (快速鍵 cmd + shift + g)。
按 cmd + v 貼上圖片的位置後按 enter。
Cool，Finder 快速切換到圖片所在的位置，顯示加了美美 iPhone 邊框的圖片。
加上邊框的圖片如下，除了加上邊框，我們還偷偷地加了陰影效果。
突顯最近製作邊框的裝置
為了方便使用者選取最近製作邊框的裝置，App 會記錄上次選取的裝置。如下圖所示，排在第一個並以橘色大字顯示的 iPhone 14 — Deep Purple — Portrait 是最近使用的裝置。
剛剛的方法適合在截圖之後順手加上邊框，若是想幫多張圖片加上邊框，則可採用以下的方法 2。
方法2: 將多張螢幕截圖加到 Bezel App 的 Xcode 專案，然後啟動 Bezel App，利用它將多張截圖加上邊框
將多張螢幕截圖加到 Bezel App Xcode 專案的 screenshot 資料夾下
以下我們加入兩張 News App 的螢幕截圖。
模擬器螢幕截圖時檔名有個特別的規則。比方在 iPhone 14 Pro 截圖時，檔名也會包含 iPhone 14 Pro。待會 Bezel App 將依據此規則聰明地判斷我們想要加上邊框的機型，因此記得 screenshot 資料夾下要放同一種機型的螢幕截圖。
啟動 App，選擇 project
選擇 project 表示將採用專案裡事先加入的螢幕截圖，然後 App 會依據截圖的檔名顯示可能的 iPhone 機型。以下它聰明地顯示 iPhone 14 Pro 的相關邊框，因為圖片的檔名包含 iPhone 14 Pro。
ps: 若是想產生的圖片是 landscape，也可以切換到 landscape。
在此我們點選 iPhone 14 Pro — Deep Purple，然後利用 Finder 快速找到圖片。如下圖所示，這次一口氣產生兩張加了邊框的圖片。
透過網站 MockuPhone 產生外框
除了以上的方法，我們也可以透過網站 MockuPhone 產生外框。
