Mock Magic 為擷圖畫面加上外框，支援 iPhone、MacBook 等裝置模型

我介紹過不少實物模型（Mockup）工具，可以讓使用者上傳畫面，快速合成到相片中出現的裝置畫面，像是 iPhone、iPad 或是 MacBook，有些還帶有裝飾或景深，看起來非常專業！有時候如果需要展示網頁或應用程式，單獨放上擷圖好像又太單調，就可以選擇像是 Mockup Photos、MockDrop 或 Mockuper 等服務稍微處理一下，類似工具都不需要額外下載安裝軟體，只要選擇想使用的模型，把手邊相片上傳後就會整合。

本文要介紹的「Mock Magic」也是一個免費的實物模型工具，依照介紹，會命名為「神奇」的原因在於這個工具操作非常簡單，它使用 VueJS 進行內部工作，並使用 Tailwind CSS 框架進行完善，使用者可以在這裡建立非常簡單但有質感的模型素材，讓畫面合成到特定裝置中，例如手機、平板電腦、筆記型電腦或桌上型螢幕。

Mock Magic 提供的裝置包括 iPhone、iPad、Apple Watch、Huawei P8、Samsung 電視、Motorola Moto 360、Samsung Galaxy、Google Pixel、MacBook Pro 和 iMac，如果裝置有不同的顏色也有選項可供選擇切換。

Mock Magic
https://www.mockmagic.com/

使用教學

STEP 1

開啟 Mock Magic 後會看到這個模型工具的操作界面，功能非常簡單。

先從「Device」選擇要使用的裝置，載入後出現可供選取的顏色選項，選擇後會需要依小段時間載入更新。

STEP 2

接著從「Select your design」選擇要加入模型的畫面，Mock Magic 就會將它放進裝置裡囉！可以從 Your Design 選項下方看看是不是顯示為綠色勾勾，代表是最符合這個模型的相片大小，如果過大或過小，Mock Magic 會顯示較為合適的尺寸建議。

STEP 3

確定預覽圖是你需要的效果，點選「Download」就能下載 PNG 格式相片原圖。

利用 Mock Magic 製作出來的模型看起來很有質感，相片也很清晰，對於要呈現應用程式或網頁擷圖畫面來說很自然，完全不用自己去找素材或是使用圖片編輯工具修圖，建議可依照網站推薦的相片大小預先調整好畫面，合成進去就會非常好看。