
之前介紹不少 Mockups 相關的免費資源,我對產品開發沒太多研究,但 Mockups 的意思就我理解大概就是模型圖,透過網路上的工具可以將產品畫面整合到實體裝置中,看起來就跟真的運作一樣,無論是用來做簡報或放在產品官網都很合適,也讓整體質感提升不少。
我個人最推薦的是 Smartmockups,本站很多文章圖片都透過它製作,其他像是 Magic Mockups、Mockup Photos、Mockuper 或 Fotomock 都屬於類似服務。
本文要推薦的「Mobile Mockup」是一款建立漂亮行動裝置模型圖的線上工具,主要是將螢幕擷圖快速整合到手機畫面,可設定不同的背景底色(透明色)和手機顏色,產生 .png
格式圖片,圖片也非常簡潔,適用於各種設計不會有違合感。
雖然要把截圖畫面放入手機模型裡不難,但必須有適當的素材和修圖能力,也不能缺少的是專業繪圖軟體,如果你本身不擅於使用繪圖工具,又不想花太多時間處理的話,Mobile Mockup 是一個相當合適的選項,只要幾分鐘輕鬆製作出專業的模型圖。
網站名稱:Mobile Mockup
網站鏈結:https://www.kapwing.com/mobile-mockup
使用教學
STEP 1
開啟 Mobile Mockup 網站,先點選「Choose screenshot」選擇要合成的截圖畫面,依照網站說明,最理想圖片尺寸大小是 360 x 668,不過大於這個尺寸也沒問題。

STEP 2
上傳圖片後截圖會顯示於右側的 Mockup,接著開始進行相關設定,可以看到 crop、fit 或 stretch 代表圖片呈現方式,分別是裁切、符合大小和延伸,如果不知道那一種呈現方式比較適合你,直接點選會自動更新於右邊預覽圖。

底下的調色盤分別是圖片的背景顏色和手機邊框顏色,除了預設顏色,也可自訂色碼,值得一提背景顏色也提供「透明色(Transparent)」選項,讓製作出來的圖片可以符合任何背景色。

STEP 3
製作完成後點選「Download mockup」就能下載、獲取 .png
格式的模型圖。

下圖就是我透過 Mobile Mockup 製作出來的模型圖,裡頭的圖案是我從 iPhone 的 Safari 瀏覽器擷取而來,搭配上 Mobile Mockup 就會有相當棒的效果,不僅很簡單而且省時間。

值得一試的三個理由:
- 將圖片上傳就能呈現於手機模版中
- 可自訂背景顏色、手機顏色和對齊方式
- 輸出為 .png 圖片格式,免註冊或登入帳戶