7 步驟,輕鬆製作 iPhone Mockup

更新於 發佈於 閱讀時間約 1 分鐘
幾年前,要把 app 介面,做成 iphone Mockup 的畫面,不是用 photoshop 合成就是用 Illustrator 畫,下載 3D 軟體又覺得太麻煩。現在只要透過 Spline (3D界的 figma) ,打開瀏覽器後,7 步驟,就能簡單地製作一張 iPhone mockup 啦!而且還能隨心調整成你想要的角度!

前置作業

註冊 Spline 的帳號:https://spline.design/

步驟

步驟 1

到 Library 搜尋 iPhone 找到模型

步驟 2

左側圖層找到 Screen

步驟 3

右側 Upload image 上傳你要的截圖

步驟 4

上方或右側找到 Edit frame 可以輸入大小或拖拉 frame 範圍,這裡以 450x800 為例,待會輸出時可以再放大倍率

步驟 5,6

調整好 Frame 後,可以按滑主中鍵調整鏡頭,讓 iPhone 調整到你想要的位置,跳整好後按下 Export

步驟 7

選擇你想要的檔案格式,這裡以 PNG 為範例,Ratio 可以放大你 Frame 的尺寸,按下 Export 就完成了!

最後

你還可以旋轉模型,調整成你要的角度,也可以透過左側的圖層,選擇你要的元件,調整模型的顏色或材質。也可以在右側的 Camera 欄位中,新增一個自訂鏡頭,調整鏡頭的數值,改變拍攝範圍。
avatar-img
1會員
2內容數
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
Ku Chou的沙龍 的其他內容
第一印象不只是產品的外觀、視覺,像是文案、聲音、氣味…都會令人產生印象。了解第一印象,可以讓我們從更廣的視角,去觀察和設計一個產品、一個品牌,甚至是一個廣告活動。另外,因為我們的產品是要給人們使用的,所以我們需要了解目標,才能更好地抓住人們的注意力,在短暫的時刻中留下印象。
第一印象不只是產品的外觀、視覺,像是文案、聲音、氣味…都會令人產生印象。了解第一印象,可以讓我們從更廣的視角,去觀察和設計一個產品、一個品牌,甚至是一個廣告活動。另外,因為我們的產品是要給人們使用的,所以我們需要了解目標,才能更好地抓住人們的注意力,在短暫的時刻中留下印象。
你可能也想看
Google News 追蹤
提問的內容越是清晰,強者、聰明人越能在短時間內做判斷、給出精準的建議,他們會對你產生「好印象」,認定你是「積極」的人,有機會、好人脈會不自覺地想引薦給你
Thumbnail
本文介紹瞭如何使用 Photoshop 和 Cinema 4D 創建手繪風格動畫場景。從照片處理到模型建模、材質貼圖、額外元素建模、光線和打光、渲染與後期處理,逐步解說了創建過程。通過這些建議,你將能夠創建一個既細緻又富有動畫效果的手繪風格場景,為你的動畫作品增添獨特的魅力和視覺吸引力。
我自己是希望可以製作iOS app來更好存放我的文章, 更進階一點,可以變成直接錄音後, 照我設定的方式轉換成文檔,讓iPhone變成我更強的助手。 感覺有很多可以探索,用時間慢慢累積經驗。
Thumbnail
Part.1 搞定基本的 UI 開始開發 iOS App。 首先準備一台 Mac,然後安裝 Xcode,新增專案,系統即刻生成基本的專案結構。coding 的起點在檔案 ContentView.swift: import SwiftUI struct ContentView: View {  
Thumbnail
本篇文章將分享手機App設計教學,並往後介紹使用Flutter開發App的相關知識和技巧。透過這系列的分享,讀者將能夠學習如何利用設計和程式開發技能來製作一個App。文章中也提供了一些靈感來源和教學資源,幫助讀者進行設計和開發的思考和學習。
Thumbnail
Spline是一款輕量化的3D建模工具,只需在網頁上登入就能輕鬆繪製3D物件並加上互動效果,創作出的成品還可以轉成程式碼應用在網站或app上,也能轉成其他3D格式或影片、圖片...等。而Spline其實在去年時就有推出AI生成3D設計了,最近官方又有發布AI更新訊息,新版的 Spline AI 專注
Thumbnail
1.設計系統不用從頭開始 在設計產品時,有一個觀念可能會顛覆我們對於產品設計的傳統想法。這是初期在 AlleyPin 擔任一人設計師,負責各種產品或視覺設計工作時才逐漸領悟到的一點。 當時,我在購買UI Kits這件事情上猶豫不決,擔心使用現成的設計資源會使我的設計變得無聊或是缺乏創造。後來面臨
Thumbnail
在設計有四年快五年的時間,大部分都是從實戰經驗中去不斷摸索產品開發的流程。從視覺傳達的背景出來,在用戶體驗的經驗都是在實際開發中去摸索出來的。不是理論派,只是根據我本人的經驗摸索出來的設計方法,也不會用太多高深的詞彙說明。 以前搜尋怎麼做產品設計?究竟是要從什麼步驟開始的這件事情,大部分看到的
Thumbnail
UI設計是一個令人著迷的過程,它將設計概念轉化為最終的產品界面。本文將帶您深入瞭解UI設計的六個階段,包括Sketching、Wireframing、Component Design、使用者流程、模型設計和原型製作,以幫助您更好地理解每個階段的作用和重要性。
Thumbnail
本文介紹如何使用Mockup模板圖庫快速合成高質感的圖檔,包含選擇模板、PSD下載、PS套圖等步驟,讓您輕鬆展現作品並模擬示意圖。
Thumbnail
由於iphone的「捷徑」功能實在太方便,連續幾篇都在探索還有什麼應用,這篇加上「動作按鈕」使用,讓捷徑功能更強大! 首先,預設的動作按鈕開啟相機功能需要進入UI畫面,然後再進行拍照,但有時畫面一閃而過,根本來不及捕捉。因此,今天分享一個簡化拍照動作的方法,只需一鍵完成拍照。 步驟如下: 先建
提問的內容越是清晰,強者、聰明人越能在短時間內做判斷、給出精準的建議,他們會對你產生「好印象」,認定你是「積極」的人,有機會、好人脈會不自覺地想引薦給你
Thumbnail
本文介紹瞭如何使用 Photoshop 和 Cinema 4D 創建手繪風格動畫場景。從照片處理到模型建模、材質貼圖、額外元素建模、光線和打光、渲染與後期處理,逐步解說了創建過程。通過這些建議,你將能夠創建一個既細緻又富有動畫效果的手繪風格場景,為你的動畫作品增添獨特的魅力和視覺吸引力。
我自己是希望可以製作iOS app來更好存放我的文章, 更進階一點,可以變成直接錄音後, 照我設定的方式轉換成文檔,讓iPhone變成我更強的助手。 感覺有很多可以探索,用時間慢慢累積經驗。
Thumbnail
Part.1 搞定基本的 UI 開始開發 iOS App。 首先準備一台 Mac,然後安裝 Xcode,新增專案,系統即刻生成基本的專案結構。coding 的起點在檔案 ContentView.swift: import SwiftUI struct ContentView: View {  
Thumbnail
本篇文章將分享手機App設計教學,並往後介紹使用Flutter開發App的相關知識和技巧。透過這系列的分享,讀者將能夠學習如何利用設計和程式開發技能來製作一個App。文章中也提供了一些靈感來源和教學資源,幫助讀者進行設計和開發的思考和學習。
Thumbnail
Spline是一款輕量化的3D建模工具,只需在網頁上登入就能輕鬆繪製3D物件並加上互動效果,創作出的成品還可以轉成程式碼應用在網站或app上,也能轉成其他3D格式或影片、圖片...等。而Spline其實在去年時就有推出AI生成3D設計了,最近官方又有發布AI更新訊息,新版的 Spline AI 專注
Thumbnail
1.設計系統不用從頭開始 在設計產品時,有一個觀念可能會顛覆我們對於產品設計的傳統想法。這是初期在 AlleyPin 擔任一人設計師,負責各種產品或視覺設計工作時才逐漸領悟到的一點。 當時,我在購買UI Kits這件事情上猶豫不決,擔心使用現成的設計資源會使我的設計變得無聊或是缺乏創造。後來面臨
Thumbnail
在設計有四年快五年的時間,大部分都是從實戰經驗中去不斷摸索產品開發的流程。從視覺傳達的背景出來,在用戶體驗的經驗都是在實際開發中去摸索出來的。不是理論派,只是根據我本人的經驗摸索出來的設計方法,也不會用太多高深的詞彙說明。 以前搜尋怎麼做產品設計?究竟是要從什麼步驟開始的這件事情,大部分看到的
Thumbnail
UI設計是一個令人著迷的過程,它將設計概念轉化為最終的產品界面。本文將帶您深入瞭解UI設計的六個階段,包括Sketching、Wireframing、Component Design、使用者流程、模型設計和原型製作,以幫助您更好地理解每個階段的作用和重要性。
Thumbnail
本文介紹如何使用Mockup模板圖庫快速合成高質感的圖檔,包含選擇模板、PSD下載、PS套圖等步驟,讓您輕鬆展現作品並模擬示意圖。
Thumbnail
由於iphone的「捷徑」功能實在太方便,連續幾篇都在探索還有什麼應用,這篇加上「動作按鈕」使用,讓捷徑功能更強大! 首先,預設的動作按鈕開啟相機功能需要進入UI畫面,然後再進行拍照,但有時畫面一閃而過,根本來不及捕捉。因此,今天分享一個簡化拍照動作的方法,只需一鍵完成拍照。 步驟如下: 先建