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

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

我介紹過不少實物模型(Mockup)工具,可以讓使用者上傳畫面,快速合成到相片中出現的裝置畫面,像是 iPhone、iPad 或是 MacBook,有些還帶有裝飾或景深,看起來非常專業!有時候如果需要展示網頁或應用程式,單獨放上擷圖好像又太單調,就可以選擇像是 Mockup PhotosMockDrop 或 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 後會看到這個模型工具的操作界面,功能非常簡單。

Mock Magic

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

Mock Magic

STEP 2

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

Mock Magic

STEP 3

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

Mock Magic

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

Mock Magic

值得一試的三個理由:

  1. 免費的實物模型工具,可以將相片整合到裝置畫面中
  2. 支援 iPhone、iPad、Apple Watch、MacBook 等裝置,可選擇顏色
  3. Mock Magic 會顯示最適合的圖片尺寸,合成後下載 PNG 格式
分享本文
Pseric
Pseric

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

文章: 6251