Mobile Mockup 以最簡單的方法製作手機模型圖,整合截圖可自訂顏色

Mobile Mockup 以最簡單的方法製作手機模型圖,整合截圖可自訂顏色

之前介紹不少 Mockups 相關的免費資源,我對產品開發沒太多研究,但 Mockups 的意思就我理解大概就是模型圖,透過網路上的工具可以將產品畫面整合到實體裝置中,看起來就跟真的運作一樣,無論是用來做簡報或放在產品官網都很合適,也讓整體質感提升不少。

我個人最推薦的是 Smartmockups,本站很多文章圖片都透過它製作,其他像是 Magic MockupsMockup PhotosMockuper 或 Fotomock 都屬於類似服務。

本文要推薦的「Mobile Mockup」是一款建立漂亮行動裝置模型圖的線上工具,主要是將螢幕擷圖快速整合到手機畫面,可設定不同的背景底色(透明色)和手機顏色,產生 .png 格式圖片,圖片也非常簡潔,適用於各種設計不會有違合感。

雖然要把截圖畫面放入手機模型裡不難,但必須有適當的素材和修圖能力,也不能缺少的是專業繪圖軟體,如果你本身不擅於使用繪圖工具,又不想花太多時間處理的話,Mobile Mockup 是一個相當合適的選項,只要幾分鐘輕鬆製作出專業的模型圖。

網站名稱:Mobile Mockup
網站鏈結:https://www.kapwing.com/mobile-mockup

使用教學

STEP 1

開啟 Mobile Mockup 網站,先點選「Choose screenshot」選擇要合成的截圖畫面,依照網站說明,最理想圖片尺寸大小是 360 x 668,不過大於這個尺寸也沒問題。

Mobile Mockup

STEP 2

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

Mobile Mockup

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

Mobile Mockup

STEP 3

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

Mobile Mockup

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

Mobile Mockup

值得一試的三個理由:

  1. 將圖片上傳就能呈現於手機模版中
  2. 可自訂背景顏色、手機顏色和對齊方式
  3. 輸出為 .png 圖片格式,免註冊或登入帳戶
分享本文
Pseric
Pseric

學生時代成立網站以來堅持每日更新,在挖掘資料的過程中慢慢找出自己經營網站的方法,最開心的是有一群一起長大的讀者。

文章: 6250