MockupsJar 線上將圖片合成到手機、電腦、相框或包裝產生形象照

MockupsJar 是一個協助使用者建立真實模型素材的線上工具，如果想為你的網站、手機應用程式製作更好看的形象照片，只要簡單三個步驟就能將畫面整合到 MockupsJar 提供的相片庫，整體操作方式簡單，無需使用 Photoshop 或任何影像編輯軟體。網站目前收錄超過 919 個模型圖片，包含各種裝置、情境或是實際生活照片，使用者只要將自己想呈現的相片或是擷圖畫面上傳即可整合到模型中。

之前我也推薦過不少 Mockups 相關工具和產生器，例如：

• Mockup Photos 數千張高畫質素材圖庫，可自行上傳圖片或線上擷圖整合
• Smartmockups 將網頁或應用程式畫面整合圖庫素材，線上產生更獨特免費行銷相片
• MockDrop 免費 Mockups 產生器，在圖庫相片整合想呈現的畫面
• Dimmy.club 將螢幕擷圖或程式畫面放入圖庫裝置顯示，打造專業模型圖片

MockupsJar 有收錄包括 iPhone、Android 和 MacBook 模型，還有透明背景圖、畫框相框、瀏覽器視窗、包裝、服飾、平板電腦和書籍，使用者除了可自行上傳相片或截圖，也有輸入網址來擷取網頁、快速套用到模型功能，本身有簡易的相片編輯器允許上傳後進行調整，像是翻轉、旋轉、放大縮小、套用濾鏡效果、加入標記、文字、箭頭或圖形等等，讓圖片在模型中呈現出更好的效果。

要注意的是 MockupsJar 僅提供免費用戶最大 640×480 解析度大小，不過所有圖片都沒有浮水印，也能無限制次數下載和製作模型，支援 PNG、JPG 和 PDF 三種格式，如果需要更大尺寸、解析度更高的相片可考慮付費升級。

MockupsJar
https://mockupsjar.com/

使用教學

STEP 1

開啟 MockupsJar 網站後往下捲動就會看到各種模型相片，左側可依照分類進行瀏覽。

STEP 2

除了 MacBook 筆電、iPhone、Android 手機和平板電腦，很多都會加入一些實景來提升畫面質感。

比較有趣的是 MockupsJar 還有實體包裝的模型素材，像是相框、畫框、包裝品、衣飾或書籍。

STEP 3

在點擊任一張模型素材後就能開始進行合成，不過在開始前我建議先點右上角「LOG IN」登入帳號（可直接使用 Google 帳戶登入），因為完成後要下載相片前還是需要註冊登入，避免合成後的相片遺失建議先登入。

接著從左上角點選「Upload Image」選擇要加入這張素材的相片圖片，或點選「Capture URL / FIGMA」輸入網址來遠端擷圖，將網頁畫面呈現在相片中。

STEP 4

在上傳圖片時 MockupsJar 會跳出圖片編輯功能，中間就是圖片會完整顯示於相片的範圍，可利用拖曳方式調整顯示範圍、裁切、套用濾鏡效果、調整顏色或是加入標記、文字、箭頭或圖形，編輯後點選右上角「Done」。

STEP 5

接著從右側選擇 PNG、JPG 或 PDF 格式，按下上方「Generate Download」按鈕就能產生圖片，前面有提到免費帳戶只能產生最大 640×480 解析度大小，因此在中間的尺寸選擇就不能選取超過此限制的尺寸，否則會跳出付費升級的提示。

此外，在右側產生的相片如果沒有看到「Download」按鈕代表使用者沒有登入帳號，請先點選右上角登入或是免費註冊才能下載合成後的相片。