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

之前介紹不少 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 就會有相當棒的效果，不僅很簡單而且省時間。