【Mockuper】圖片合成線上工具，可以添加反射效果

2024 年 3 月 7 日更新

現在網路上有很多好用的 Mockup 線上合成工具，雖然提供的都是圖片合成的服務，但每家網站的功能還是有點不太一樣，這次要介紹的「Mockuper」同樣也是 Mockup 的製作工具之一，但比較特別的是它可以為合成的區塊添加「反射效果」，也可以另外添加圖片或是簡單的文字在你的設計裡面！

追蹤數位小幫手社群平台：Instagram、Twitter…等等。

內容目錄

Mockuper 簡介

Mockuper 是一個圖片合成的線上工具，專門用來製作 Mockup (實物模型)，這類工具也被稱為 Mockup 產生器 (Mockup generator)。它提供各式各樣的 Mockup 模板以及簡易的編輯器，讓我們可以輕鬆快速地合成我們想要的圖片。

像 Mockuper 這樣的線上工具有很多，例如 Smartmockups、Mockup Photos 皆是這類型的工具，有些網站有付費功能、素材也比較多，而 Mockuper 是完全免費使用，並且不用註冊帳號就可以下載你製作好的 Mockup 圖片。

點擊上面的按鈕可以前往 Mockup 的首頁，左邊有一些裝置類型可以切換，也可以先看看它下面的 Mockup 預覽圖。

首頁左邊的 Mockup 預覽圖的數量比較有限，你可以把滑鼠移到首頁上方的 MOCKUPS 選單，它這邊會顯示比較詳細的 Mockup 分類，主要有六大類型：

其中有五種 Mockup 類型都是跟手機電腦等智慧型裝置比較有關係，其他類的則有提供印刷品、畫板、廣告牌等 Mockup 模板。目前有提供 978 個 Mockup 模板，有的模板有背景可以合成產品情境圖，有的則是透明背景的圖片模板。

你也可以直接點進去它的分類頁面，它上面也有 Mockup 的裝置類型可以快速切換，從這邊找會比較方便一些。

在分類頁面找一個你想用的 Mockup 模板之後，可以點它直接進入它的圖片編輯器介面，它的介面非常簡單，左邊可以進行一些圖片內容的操作跟設定，右邊則是 Mockup 的預覽圖。

左邊的圖層設定都至少會有一個「Screen」的設定區塊，如果像下圖這樣有兩個螢幕的話，左邊就有兩個「Screen」可以上傳圖片。

來到編輯器的頁面之後，最重要的就是要上傳圖片啦！在左邊的「Screen」裡面有一個上傳的按鈕 Upload screenshot，點它可以打開 Mockuper 的螢幕編輯器 (Screen editor)。

打開螢幕編輯器的介面之後 (如下圖)，就可以把電腦資料夾裡的圖片拖曳到這個虛線框框裡面。

你可以調整圖片在裝置螢幕中的位置或大小，你甚至還可以旋轉它！螢幕編輯器的右下角會顯示這個螢幕的比例 (Screen Ratio)，圖片裁剪好了之後，就可以按右下角的 DONE 完成圖片的合成。

圖片合成的效果就如下圖這樣，但除了基本的合成功能之外，其實還有幾個較進階的螢幕設定，在左邊的「Screen」區塊裡面有三個功能可以調整，分別是：

有時候我們上傳的圖片沒辦法好好地融入它的模板當中，如果有打開這個反射的效果，那圖片合成的部分看起來就會比較自然一些。雖然它的模式 (Mode) 不多，但基本上還是不錯用的。

Mockuper 的圖片編輯器還有其他小功能可以用，它在左邊功能區最上面的一個 +Add Layer 按鈕裡，能為模板添加額外的圖片或文字。

選擇 Image 可以從它的圖庫裡面插入圖片，也可以上傳你自己的圖片或 Logo。它的圖庫來源是 Pixabay 這個知名的免費圖庫網站，這個網站是採用 CCO 授權方式，因此可以用在商業用途，不用標示出處可以任意修改。

除了插入額外的圖片之外，選擇 Text 則可以在 Mockup 模板裡面添加文字，文字的大小、角度跟顏色都可以自由設定。

當你的圖片都合成製作好了之後，就可以點擊編輯器右下角的下載按鈕來把這張 Mockup 圖片下載下來。

以我這篇文章的作品為例，它的圖片尺寸有 3300×2475，圖片格式為 PNG 的檔案，畫質還是相當不錯的！

Mockuper 是眾多 Mockup 產生器的其中一員，它特別的功能在於可以為合成的圖片添加「反射效果」。

我覺得這個功能挺方便的，因為我用其他 Mockup 網站的服務時，如果它的模板沒有自帶「反射效果」的話，合成的圖片有時候看起來會不自然，就算調整圖片參數或濾鏡都不太管用，而 Mockuper 可以讓我們自己決定螢幕的反射效果，雖然可以設定的功能不多，但還是比沒有設定還要逼真一些。

不過每個線上工具都有好有壞，如果在這個網站上找不到合適的圖片的話，也可以到其他的網站找找看，像是 Dimmy.Club、MockUPhone 都是專門提供裝置類的 Mockup 合成服務，也有 Artboard Studio、Placeit 這種有付費功能的 Mockup 網站。

原網站｜數位小幫手 digitalyoming.com ( 未經許可，禁止轉載 ) 
原網址｜https://digitalyoming.com/mockuper-tutorial/