製作搭配漂亮 iPhone 外框的 gif

讓模擬器錄製的影片不要有邊框

我們待會將手動加入漂亮的 iPhoen 外框，因此請先取消預設的邊框。打開 Preferences，取消 Show device mask in screenshots and videos 的勾選。

參考以下連結錄製 App 操作的影片

請錄製成影片，之後再轉成 gif。如果直接錄製 gif，它的尺寸將無法對應 iPhone 外框圖片的尺寸。

使用 Xcode 錄製 iOS 模擬器操作 App 的 gif & 影片

將影片轉成 gif

安裝 Mac App Gifski，將剛剛錄製的影片轉成 gif。

‎Gifski

從 Apple 官網下載 iPhone 外框圖片

Apple Design Resources

比方我們下載 Apple Product Images 下的 iPhone 13。

連到幫我們合成 gif & iPhone 外框的網站 Photopea

Photopea | Online Photo Editor

點選網頁裡的 File > Open 開啟 iPhone 外框圖片

點選網頁裡的 File > Open 開啟 gif 檔

此時將變成 2 個分頁，第一頁顯示 iPhone 外框，第二頁顯示 gif。

將 gif 加到 iPhone 外框上

如下圖所示，找到 gif 頁面右下區塊的資料夾圖示，然後在它身上點選滑鼠右鍵，從選單點選 Duplicate Into。

將 Destination 指定為 iPhone 外框圖片的檔名，將 gif 加到 iPhone 外框上。

切換回 iPhone 外框的分頁

點選 iPhone 外框的分頁標籤。

調整圖層的階層

拖曳 gif 的圖層，將它移到 iPhone 外框的下面，如此 App 畫面才不會檔到 iPhone 外框。

調整 gif 的位置，讓它剛好落在 iPhone 外框裡

點選 gif 的圖層，在畫面上拖曳移動位置，讓它剛好落在 iPhone 外框裡。

輸出成 gif

點選 File > Export as > GIF。

點選 Save 下載跟 iPhone 外框合成的 gif。

若是原圖太大，photopea 會幫我們縮小調整輸出的 gif 尺寸。