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

Last Updated on 2022 年 5 月 14 日 by 小幫手

Mockuper.net tutorial 封面圖片

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

Mockuper 簡介

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

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

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

Mockuper 首頁


Mockups 種類

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

  1. Desktop Mockups
  2. Laptop Mockups
  3. Mobile Mockups
  4. Tablet Mockups
  5. Smartwatch Mockups
  6. Other Mockups

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

Mockuper Mockups 分類


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

Mockuper Mockup 裝置類型




Mockuper 圖片編輯器

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

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

Mockuper Mockup 圖片編輯器


上傳圖片

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

上傳圖片


螢幕編輯器 (Screen Editor)

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

螢幕編輯器


裁切圖片

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

裁切圖片


反射效果 (Reflection)

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

  1. Reflection:可以打開或關閉螢幕的反射效果。
  2. Opacity:可以調整反射效果的透明度。
  3. Mode:可以切換反射效果的模式。

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

添加反射效果 Reflection


添加額外的圖片圖層

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

添加文字或圖片層


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

可上傳圖片或插入 Pixabay 的圖片


添加額外的文字

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

添加文字


下載圖片

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

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

下載圖片


結語

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

不過每個線上工具都有好有壞,如果在這個網站上找不到合適的圖片的話,也可以到其他的網站找找看,像是 Dimmy.ClubMockUPhone 都是專門提供裝置類的 Mockup 合成服務,也有 Artboard StudioPlaceit 這種有付費功能的 Mockup 網站,相關的文章可以參考下面的延伸閱讀


延伸閱讀

Reference:
https://mockuper.net/tutorials/how-to-make-a-desktop-mockup-free


aifian APP推薦活動


如果你喜歡這篇文章的話
歡迎用下面的按鈕分享出去!

▼ 點此分享 ▼