Mockuper 將圖片快速合成到平板電腦、手機或看板上

有時候在網路上看到別人製作的插圖很有質感，通常會在圖庫素材中整合自家產品，不但沒有違合感，還能解決類似照片不好拍出來的問題，其實不用透過專業軟體就有一些線上工具可以做到，例如 Smartmockups 除了網頁版以外還能付費購買 Mac 應用程式，其他像是 Magic Mockups、MockUPhone 或 Dimmy.club 都能滿足類似需求，當然圖庫相片多不多也會是選擇的因素之一。

本文要推薦另一款類似的免費服務「Mockuper」，可以快速將手邊的擷圖或任何相片整合到圖庫裝置螢幕中，Mockuper 提供各種裝置類型，包括桌上電腦、筆記型電腦、平板電腦、手機、智慧手錶和一些實體物件，例如名片、畫框、廣告看板或筆記本，只要選擇裁切範圍，調整後就能輸出各種尺寸大小的相片。

特別的是 Mockuper 能為裝置螢幕內的圖片加入「反射」效果，可再調整不透明度及反射形狀，讓它看起來更有真實感，目前 Mockuper 收錄大約 190 張素材，有部分在其他網站曾經看過，但它在操作上還算好用，不過速度稍慢一些。

網站名稱：Mockuper
網站鏈結：https://mockuper.net/

使用教學

STEP 1

開啟 Mockuper 網站，從左側選取要使用的圖庫素材，點擊「Choose」大圖會顯示在網頁右側，同時在裝置螢幕中標示出建議置入的圖片長寬大小，如使用合適尺寸較能獲得最佳顯示效果。

網頁左上角可切換不同的裝置類型，包括桌上電腦、筆電、平板電腦、手機等等。

STEP 2

選好圖片後，要怎麼把我的畫面整合到裝置螢幕中呢？很簡單，點選右側螢幕，就能進入圖片上傳及編輯功能，如果之後要清除，可直接點選上方「Clear」按鈕。

STEP 3

將你要呈現的圖片拖曳到中間虛線框。

接著調整要顯示的範圍，如果你依照 Mockuper 建議，上傳合適的圖片大小，那麼應該不用移動或放大縮小，就會符合顯示範圍；另外，左側是用來調整「反射」效果、不透明度和形狀的功能，如果套用反射後看起來很不正確，也可回到編輯模式將它關閉停用。

STEP 4

將圖片整合到素材畫面中，看起來非常真實，角落也不會出現鋸齒或顏色錯誤問題。若想再次調整編輯，可以點擊上方綠色的「Screenshot & Settings」按鈕。

STEP 5

最後，點選右下角的「下載」按鈕，挑選要下載的相片尺寸，從最小 XS、S、M、L 到最大張的 XL ，不過網站沒有提示這些相片的實際尺寸。

點選後跳出相片，在上方點選滑鼠右鍵，找到「另存圖片」就能將相片保存下載。