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

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

本文要推薦的「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」需要一段時間處理素材,完成後就能取得合成後的相片囉!

值得一試的三個理由:

  1. 收錄 14 位獨立創作者、超過 1570 個素材模型可以免費使用
  2. 上傳要合成的相片素材或輸入網址直接線上擷圖
  3. 提供 .jpg、.png 和 .pdf 三種格式,亦可下載高畫質原始圖檔