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

Magic Mockups 將產品放進免費相片素材,吸睛首圖自己動手做

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

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

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

Magic Mockups

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

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

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

使用教學

STEP 1

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

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

Magic Mockups

STEP 2

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

Magic Mockups

STEP 3

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

Magic Mockups

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

Magic Mockups

STEP 4

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

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

Magic Mockups

分享到...