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

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

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

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

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

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

使用教學

STEP 1

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

Mockuper

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

Mockuper

STEP 2

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

Mockuper

STEP 3

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

Mockuper

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

Mockuper

STEP 4

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

Mockuper

STEP 5

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

Mockuper

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

Mockuper

值得一試的三個理由:

  1. 快速將螢幕擷圖或畫面合成到圖庫裝置螢幕中
  2. 收錄桌上電腦、筆記型電腦、平板電腦、手機、智慧手錶等 190 張素材
  3. 可設定反射、不透明等效果,看起來更貼近真實
分享到...