12 款 Mockup 網站工具介紹,直接在線上合成圖片!

mockup website tools 封面圖片

還在想你的網站或是文章報告要放什麼產品圖片嗎?是不是正在擔心圖片內容不夠專業或是設計感不夠?那你可能需要好好認識一下 Mockup 的線上合成工具,這類網站提供好看又好用的圖片模板,只要準備好你的圖片、Logo 或是截圖,就可以輕鬆地製作出又專業又有質感的產品情境圖片!

Mockup 是什麼?

在開始介紹 Mockup 的線上合成工具之前,先來了解一下什麼是 Mockup。Mockup 在維基百科上的解釋為:「Mockup 是一個設計或是設備的模型,用來教學、展示、設計評估、推廣或是其他用途,可以是比例模型或和實物一様大的模型。」

維基百科上的解釋看起來比較偏向立體的「實物模型」,但是我們也可以把 Mockup 放進平面的「圖片」裡,並且在 Mockup 的外觀放上 (合成) 我們指定的設計、圖片或螢幕截圖,這樣也會有展示或教學的作用。常見的 Mockup 有印刷品、手機或電腦等,如果這些 Mockup 的圖片有一個使用場景或背景的話,通常會被叫做「情境圖」或是「產品情境圖」。

而現在不論是電腦軟體或是手機 APP,都有很多好用的圖片製作工具,其中就有一些線上軟體 (網站工具) 專門提供 Mockup 的合成服務,而且有的網站還會提供好用或專業的圖片編輯器,我們只需要準備好我們的圖片,我們就可以輕鬆在線上合成我們需要的 Mockup 圖片。

使用有 Mockup 的圖片可以讓一篇文章、簡報或網站看起來更加專業一些,使用「產品情境圖」也能讓人更加了解產品的使用場景,由於我們的時間都很有限,很難在短時間內拍攝或設計出好看又好用的圖片,只要好好利用接下來要介紹的 Mockup 網站,應該就能快速製作出好看又專業的圖片!


Mockup 網站類型

這裡我會將接下來要介紹的 Mockup 線上合成工具粗分為三大類型,分別是:

  1. 有使用場景或背景的 Mockup 網站
  2. 純裝置的 Mockup 網站
  3. 瀏覽器的 Mockup 網站
使用場景或背景純裝置瀏覽器
SmartmockupsPixeltrueScreely
Artboard StudioDimmy.clubBrowserFrame
PlaceitMock Magic
MockuperMockUPhone
Mockup Photos
mockDrop


有使用場景或背景的 Mockup 網站

首先這邊要介紹的是素材比較豐富的 Mockup 網站,這類網站的特點,就是它們提供有背景或使用場景的 Mockup 模板,例如:「在辦公室辦公」、「手裡拿著手機」、「牆上掛著畫框」等這類型的情境圖片,有的網站是完全免費使用,有的則可以付費解鎖更多更好看的 Mockup 模板跟設計素材。

另外,這些網站有些也會提供「純裝置」的透明背景 Mockup 模板可以用,在它的模板區 (Templates) 仔細找一下應該都可以找得到。

Smartmockups

「Smartmockups」是一個相當經典的 Mockup 線上合成網站工具,也是一個少數有中文版本的網站,它提供相當多類型的 Mockup 模板可以用,像是手機電腦等科技產品、印刷品、包裝品、家庭用品…等等,都有相關的情境圖片可以合成下載。

Smartmockups 還有提供一部份的模板到「Canva」這套線上製圖軟體,因此你也可以在 Canva 裡面使用這種 Mockup 的合成功能。而 Smartmockups 除了有免費使用的 Mockup 模板之外,也有提供付費的機制,讓我們可以產出更高質量的圖片,並解鎖使用付費模板跟其他功能。

Smartmockups

延伸閱讀:【Smartmockups】合成專屬的情境圖!讓你的圖片更專業!


Artboard Studio

「Artboard Studio」是一個我覺得相當高質量的 Mockup 網站工具,它的模板就像是精心設計過的一樣,相當好看且專業,並且有多種類型的 Mockup 可以使用!它也有提供付費機制可以獲取更多更特別的 Mockup 素材。

Artboard Studio 的圖片編輯器功能性多,除了可以自由排版跟插入各種圖片元素之外,它也有整合像是 UnsplashShutterstock 等圖庫網站,是創作性很高的 Mockup 線上製作軟體。

Artboard studio

延伸閱讀:Mockup 網站【Artboard Studio】打造質感的產品情境圖


Placeit

「Placeit」本身是一個多功能的線上平面設計軟體,它可以用來設計各式各樣的圖片、Logo 或者是影片,而 Mockup 也在它提供的服務範圍之一,從首頁上面的選單裡就可以找到各式各樣的 Mockup 模板,而且 Mockup 的種類相當多,其中還包括影片類的 Mockups。

Placeit 也是一個有付費機制的 Mockup 網站,只要付費就能解鎖上萬個 Mockup 模板或是上千個設計或 Logo!

Placeit

延伸閱讀:【Placeit】擁有超多種類的 Mockups,實物模型的顏色也能改!


Mockuper

再來要介紹的「Mockuper」在模板跟素材的數量上可能不比前面那幾個網站,但是它也有不少好看或好用的模板可以讓我們使用,Mockuper 除了提供有背景的「情境圖」之外,也有下圖這樣「透明背景」的 Mockup 圖片可以使用。Mockuper 能夠輕鬆合成 Mockup 圖片,除了可以裁剪圖片之外,還可以添加一點反射效果,讓合成的 Mockup 看上去更加逼真一些!

Mockuper

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


Mockup Photos

「Mockup Photos」這個網站也有很多人推薦,因為它提供了 1500 多種的模板可以讓我們使用,除了有背景的「情境圖」之外,也有「透明背景」的純裝置 Mockup,而且可以下載尺寸相當大的圖片,重點是完全免費使用,因此 Mockup 網站名單裡面一定不能沒有它!

Mockup Photos

延伸閱讀:【Mockup Photos】製作高質量的產品情境圖!種類多又可以免費下載~


mockDrop

「mockDrop」這個網站跟前面的相比,功能就相對簡便許多,它主要提供裝置類型的 Mockup 模板,並且都是有使用場景或背景的情境圖片,雖然它裝置的合成區域不能進行裁切的動作,但它有不少好看的 Mockup 模板,而且可以下載的圖片尺寸也不小,如果前面介紹的網站沒有你想要的 Mockup 素材的話,或許可以考慮來這邊找找看!

mockDrop

延伸閱讀:情境圖合成工具【mockDrop】介紹,簡單好用免費下載高畫質




提供純裝置的 Mockup 網站

再來要介紹的 Mockup 網站,都是提供裝置類的 Mockup 合成服務,而且都是沒有背景或使用場景的 「純裝置 Mockup」圖片,所以可以把這類圖片下載並上傳到其他的圖片製作軟體,再進行其它圖片設計。

Pixeltrue

「Pixeltrue」這個網站有提供很多的插畫,但它也有自己的 Mockup 產生器可以讓我們免費使用,這個功能在它首頁選單裡面,只要找一下,就可到達它的 Mockup 編輯器的頁面。

Pixeltrue 的 Mockup 模板我覺得比較特別,因為它除了一般我們所看到的那種實際的模型之外,也有另一種類似黏土狀 (Clay) 的 Mockup 可以使用,這種 Mockup 用起來就相當地有質感!有機會一定要試試看這種 Mockup。

Pixeltrue

延伸閱讀:【Pixeltrue】提供的 Mockup 產生器,可下載高質量去背版圖片!


Dimmy.club

「Dimmy.club」是一個提供純裝置的 Mockup 線上合成工具,它比較方便好用的地方,是你可以從首頁直接上傳你的圖片或是螢幕截圖,不用一個個裝置點進去上傳圖片,它就會自動將那張圖片套用到所有的 Mockup 的螢幕當中,方便我們快速瀏覽。

此外,Dimmy.club 也有簡單的圖片編輯功能,可以切換 Mockup 的款式或樣式,或是設定圖片的背景顏色。

Dimmy.club

延伸閱讀:【Dimmy.club】手機電腦裝置的 Mockup 線上合成工具


Mock Magic

「Mock Magic」也是一個純裝置的 Mockup 合成線上工具,操作介面相當簡潔,它最主要提供的是手機類的 Mockup 模板,而且同個 Mockup 可能會有不同的款式或顏色可以切換,下載的 Mockup 圖片尺寸也算滿大的。但缺點是它沒有圖片裁切的功能,有時候合成圖片會比較麻煩一些。

Mock Magic

延伸閱讀:【Mock Magic】快速為擷圖加上外框的 Mockup 線上合成工具


MockUPhone

再來要介紹的這個「MockUPhone」也是另一個純裝置類的 Mockup 網站工具,它的 Mockup 種類款式也不少,從手機、手錶、電腦到電視的 Mockup 模板它都有提供,合成 Mockup 圖片也相當快速。但缺點是它沒有提供圖片預覽的功能,需要等到下載之後才能看到圖片合成的效果。

MockUPhone

延伸閱讀:【MockUPhone】裝置類型的 Mockups 線上合成工具~




提供瀏覽器的 Mockup 網站

接下來要介紹的是兩個比較特別的 Mockup 網站工具,它們都是用來合成「瀏覽器 Mockup」的軟體,可以輕鬆地將我們電腦上的螢幕截圖合成到它瀏覽器的視窗裡面。

Screely

這個「Screely」是一款我滿喜歡用的網站工具之一,原因在於它有提供「瀏覽器外掛」可以擴充使用,只要在瀏覽器安裝它的外掛之後,可以一鍵將當下的螢幕截圖上傳到它的圖片編輯器上,並自動添加瀏覽器外框,是款相當方便的合成工具!

而且 Screely 除了基本的圖片設定之外,也有進階一點的圖片編輯功能,讓我們能進行一些簡單的圖片設計或繪製。但缺點可能是它的瀏覽器選擇性不多,如果想使用其他瀏覽器的話,就得用到另一個工具「BrowserFrame」

Screely

延伸閱讀:【Screely】快速替圖片/截圖加上瀏覽器外框的線上工具!


BrowserFrame

「BrowserFrame」是另一個可以添加瀏覽器外框的 Mockup 合成工具,它提供的瀏覽器外框類型比 Screely 還要多一些,也可以切換成深色的瀏覽器款式。不過 BrowserFrame 不會根據圖片尺寸自動調整瀏覽器外框大小,也就是需要自己手動設定,所以我覺得比較麻煩一些,但如果想套用其他瀏覽器的話,應該也只有這個線上工具可以快速套用。

BrowserFrame

延伸閱讀:【BrowserFrame】可幫圖片加上瀏覽器外框的線上合成工具!


結語

本文介紹的 Mockup 線上合成工具每個都有它們的特色存在,有的是提供比較多使用情境或背景素材的 Mockup 模板,有的則專注於裝置類型的 Mockup 透明背景圖片,也有針對瀏覽器製作的 Mockup 合成工具,但不管是哪種類型的工具,只要好好善用它,就可以讓自己的文章、簡報或網站的圖片看起來更加專業一些!

我有時候都會利用這些 Mockup 網站工具來快速製作我所需要的「產品情境圖」或「產品模擬圖」,接著利用其他的圖片設計軟體 (例如:Canva ) 來設計圖片的其他區塊,雖然 Canva 裡面也有這種 Mockup 功能,但數量比較少很快就會用光,而且模板也不一定是我喜歡的或者是我需要的,所以還是要到上面那些網站來製作 Mockup 的合成圖。


延伸閱讀


aifian APP推薦活動


最後
§ 很感謝你的閱讀 §
如果你喜歡這篇文章的話
歡迎使用下面分享按鈕分享


留言區