幾年前,要把 app 介面,做成 iphone Mockup 的畫面,不是用 photoshop 合成就是用 Illustrator 畫,下載 3D 軟體又覺得太麻煩。現在只要透過 Spline (3D界的 figma) ,打開瀏覽器後,7 步驟,就能簡單地製作一張 iPhone mockup 啦!而且還能隨心調整成你想要的角度!
前置作業
步驟
步驟 1
到 Library 搜尋 iPhone 找到模型
步驟 2
左側圖層找到 Screen
步驟 3
右側 Upload image 上傳你要的截圖
步驟 4
上方或右側找到 Edit frame 可以輸入大小或拖拉 frame 範圍,這裡以 450x800 為例,待會輸出時可以再放大倍率
步驟 5,6
調整好 Frame 後,可以按滑主中鍵調整鏡頭,讓 iPhone 調整到你想要的位置,跳整好後按下 Export
步驟 7
選擇你想要的檔案格式,這裡以 PNG 為範例,Ratio 可以放大你 Frame 的尺寸,按下 Export 就完成了!
最後
你還可以旋轉模型,調整成你要的角度,也可以透過左側的圖層,選擇你要的元件,調整模型的顏色或材質。也可以在右側的 Camera 欄位中,新增一個自訂鏡頭,調整鏡頭的數值,改變拍攝範圍。