Mockup Photos 數千張高畫質素材圖庫，可自行上傳圖片或線上擷圖整合

上面這張圖看起來是不是很有質感呢？如果仔細看，會發現電腦螢幕出現的正是免費資源網路社群首頁，不過這可不是我自己擺設的佈景，而是運用合成方式將適當的畫面合成到圖庫素材，也被稱為「Mockups」，對於要展示一些畫面來說非常有用。若我在編寫文章時找不到適合的圖片，也會利用像是 Smartmockups 來產生更好看的擷圖畫面，你可能會發現有些圖片看起來相似度極高，別懷疑，你也可以自己動手做。

之前推薦過一些 Mockups 工具，我稍作整理如下：

• Magic Mockups 將產品放進相片圖庫螢幕中
• Dimmy.club 將螢幕擷圖或程式畫面放入圖庫裝置顯示，打造專業模型圖片
• MockUPhone 在各種裝置螢幕上顯示產品畫面，支援最新 iPhone X
• Mockuper 將圖片快速合成到平板電腦、手機或看板上

本文要推薦的「Mockup Photos」也是一款 Mockups 工具，不過算是老面孔了，我在兩年前曾介紹過，當時 Mockup Photos 還是付費服務（只有提供少部分免費素材），而現在他們向所有用戶宣布：將 100% 免費對所有使用者開放！

依照 Mockup Photos 網站提供的資訊，一共有來自 14 位獨立創作者、超過 1570 個素材模型可以免費使用，無需使用複雜且昂貴的 Photoshop 或其他圖片編輯工具，只要從瀏覽器就能將你想要處理、合成到圖庫素材的圖片上傳，甚至是直接輸入網址、線上建立擷取畫面，這些過程比想像中還要簡單。

Mockup Photos 收錄的素材圖片主要分為數位和印刷兩方面，更準確來說，前者就是一些桌上型電腦、筆記型電腦、智慧型手機、平板電腦或智慧手錶上出現的畫面，後者則是實體物品，像是名片、海報、印刷品、畫框或相框等等，可以整合的素材相當豐富。

值得一提的是 Mockup Photos 提供圖庫素材原圖，尺寸相當大，亦可線上調整為其他尺寸大小或圖片格式（支援 .jpg、.png 和 .pdf），使用者能獲得非常好的畫質效果。

Mockup Photos
https://mockup.photos/

使用教學

STEP 1

開啟 MockupPhotos 先點選右上角「Sign Up」註冊一個免費帳號，如果你之前已經使用過這項服務可直接登入，註冊時可直接使用 Facebook 或是填寫姓名、Email 等相關資訊建立帳戶。

STEP 2

登入後返回 Mockup Photos，從上方選單「Browse all」尋找特定的素材分類，前面有提到網站主要將圖片分為數位和印刷兩種，下方就會顯示出子分類，例如 iPhone、iPad、Android 手機、MacBook、PC 或 iMac 等等裝置。

Mockup Photos 收錄的素材圖片都蠻有質感，而且很可以整合各種畫面，在圖片上綠色範圍就是可以合成使用者上傳相片或網址的區塊，有些還會標示出最適合的長度寬度。

STEP 3

在點選要替換的 Mockups 範圍後，會顯示可以上傳圖片或輸入網址直接建立擷圖的兩個選項，如果你想把某張相片或畫面放入素材上，只要將圖片上傳即可。如果你和我一樣比較需要使用網頁擷圖，那麼在 Mockup Photos 輸入網址也是一個產生素材的方法。

填入你要建立擷圖的網址，點選進階選項後可以調整要擷取的位置、使用桌上型電腦瀏覽器或是行動裝置瀏覽器，對於要製作手機版畫面來說會很有用，也就不需要使用者透過手機自行擷圖。另一點很值得推薦的是 Mockup Photos 可以正常顯示中文內容，不會有無法正確顯示或產生亂碼等問題。

STEP 4

合成後直接在網站上預覽效果，因為之前 Mockup Photos 是付費服務，圖片上會打浮水印避免使用者複製圖片，不過稍候下載圖片時這些標示就會消失。

STEP 5

從圖片下方找到下載功能，預設為 .jpg 格式，可以選擇 .png 或 .pdf，一般情況下會選擇原始圖片大小，由於尺寸太大、可能不一定用得到，下方還會有中型或小型尺寸，當然也可以視情況需要自行設定長寬。

點選「Download now」需要一段時間處理素材，完成後就能取得合成後的相片囉！