Magic Mockups 將產品放進相片圖庫螢幕中

之前介紹過 Smartmockups 將網頁或手機擷圖畫面整合到圖庫素材，讓產生的圖片看起來就像自己拍攝的實景，我個人非常喜歡。有時候寫文章臨時找不到適合圖片，我會利用它自製，不但使文章首圖更引人入勝，整體質感也提升不少！不過 Smartmockups 內建素材有限，如果你和我一樣想尋找更多類似服務，本文要介紹的 Magic Mockups 就是一例。

Magic Mockups 是一款免費樣板產生器，可以將螢幕擷圖畫面轉化成真實世界場景素材，對於一些新上線的網路服務來說，可能會需要類似相片，但大多數 Mockups Generator 價格並不便宜，因此促成了 Magic Mockups，讓使用者能夠免費製作自己需要的素材圖。

下圖是我使用 Magic Mockups 製作的相片範例。

Magic Mockups 內建一般筆電、智慧型手機、平板電腦、iMac 等不同主題，比較特別的是有些素材可能有兩個螢幕，Magic Mockups 允許在相片裡不同螢幕上分別設定不同的網頁或擷圖，使相片看起來更加真實生動。如果你想同時在一張相片中展示桌面端和手機版畫面，那麼 Magic Mockups 有一些相片素材可以做到。

這項服務製作出來的素材 100% 免費！採用 CC0 授權沒有版權限制，也不用標註姓名出處或連回原網站，且能下載的尺寸非常多樣，從最小的 960×640 到長度 5000+ 像素，無論要使用在投影片、設計展示或網站都很適合。

網站名稱：MagicMockups
網站鏈結：http://magicmockups.com/

使用教學

STEP 1

開啟 Magic Mockups 網站後，從左側尋找要使用的相片素材，上方有各種相片分類，點選後相片會顯示於網站右側就能開始進行編輯。

將滑鼠游標移動到相片螢幕上方，會顯示出該範圍支援的相片大小。舉例來說，下圖顯示的螢幕尺寸是 1440×900 ，如果你想獲得最好的顯示效果，記得準備適當的擷圖尺寸大小，超過的話雖會自動縮小相片，其實也是能正確顯示，但可能會有一點模糊。

STEP 2

上方有兩種加入擷圖的方式，一種是上傳相片（Upload Image），另一種是輸入網址來自動抓取縮圖（Capture URL），我建議自己先用擷圖軟體抓好網頁或應用程式畫面，再把它載入服務裡，因為自動抓圖方式可能會無法正確顯示中文內容。

STEP 3

下圖是我先使用截圖軟體 Jing 來擷取網頁畫面，再載入到 Magic Mockups，因為這項服務可能無法正常顯示中文，且我先擷取網頁較能控制我需要的範圍大小。

點選 Magic Mockups 相片裡要套用圖片的螢幕或上方的「Upload Image」，選擇擷圖後就能上傳、整合到相片的特定範圍，如果不喜歡此效果，點選相片右邊的「X」將它刪除重設。

STEP 4

最後，點選上方「Download」來選擇你需要的相片尺寸大小，Magic Mockups 提供尺寸包括：960×640、1280×853、1600×1067、1920×1280、3000×2000 和最多 5000+ 像素！

雖然底下較大圖片尺寸後方會顯示黃色驚嘆號圖示，但依然可以免費下載，不過因為製作大圖會耗費更多伺服器資源，Magic Mockups 希望使用者能贊助網站以維持這項服務營運。