【mockDrop】情境圖合成工具,簡單好用免費下載高畫質

現在網路上雖然有很多很好用的製圖軟體,但有時候製作圖片並不一定要這麼麻煩,你可以使用所謂的「Mockup」網站工具來合成出你想要的圖片,而這次要介紹的「mockDrop」就屬於這類型的工具,它專門提供3C類型的產品情境模板,讓你可以做出好看的情境圖。

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

前言

剛開始在網路上寫文章的時候,圖片素材一直是我很煩惱的地方,雖然網路上有超級多免費的圖片資源網站,但有時還是難以找到理想的圖片。所以我經常會使用「Canva」來設計圖片,畢竟它是一個功能超多又超好上手的圖片設計軟體,如果是一般的圖片很快就能做出來,但有些圖片不管怎麼設計感覺都不對,因此可能會不小心花太多時間在上面。

直到後來才發現不一定要自己設計圖片,可以改用所謂的 Mockup 網站來合成圖片,這類網站專門提供模板,你找一個喜歡的模板,然後把你的原圖素材放進去,它就會自動幫你合成一張新的圖片,也因此我才能製作出心中想要的圖片類型。

我有介紹過的一些 Mockup 網站,像是 SmartmockupsArtboard Studio 都有提供豐富的圖片模板,但一個需要付費才能下載高畫質圖片,另一個則是全英文介面,使用上多少有些不順手。

而這次要介紹的「Mockdrop」也是其中一個 Mockup 網站工具,雖然它提供的產品情境模板不多,而且都是 3C 類,但是它可以下載較高畫質的圖片,合成操作也非常簡單順手!如果想要快速製作高畫質的產品情境圖,可以使用「MockDrop」。

mockDrop 主頁

mockDrop 官網點此:https://mockdrop.io/

點上面這個連結就可以直接到達 mockDrop 的官網主頁,它的主頁就如下面這張圖一樣是個「一頁式的網站」,一進去網站就能直接看到它網站上所有的圖片 Mockup,每張 mockup 都會顯示它需要的圖片尺寸。

mockDrop 篩選器

在 mockDrop 的圖片頂端上會有一排的「小標籤」,全部都是跟 3C 產品有關的類型,點擊它可以切換篩選下面的產品模型圖,mockDrop 這邊提供的模型圖幾乎都是有背景的或人物的,因此很適合用來合成各種場景的「情境圖」。目前它提供的標籤有:

  1. Smartphone (智慧型手機)
  2. TV (電視)
  3. Tablet (平板電腦)
  4. Laptop (筆記型電腦)
  5. Desktop (桌上型電腦)
  6. Watch (智慧型手表)

如何合成產品情境圖?

1.mockDrop 的使用方式非常簡單,只要把你的「原圖」或「素材」用滑鼠從電腦上拖曳進去它的模型 (mockup) 就可以了。

2.接著 mockDrop 就會自動把你的圖片跟它的模型合成,變成一張全新的合成圖片,然後會跳出一張比較大的預覽圖讓你參考。由於我放的圖片素材跟它 mockup 規定的尺寸差太多,所以會像下面這張圖一樣被拉伸變形,這個部分需要注意一下。

3.這次我改用另一個 mockup,並且找一張尺寸相近的圖片素材插入合成。

4.這次合成的情境圖就比較 OK 了,不會有明顯的拉伸變形的狀況發生。如果對這張合成的情境圖滿意的話,就可以直接按下面的 download mockup 來下載這張圖片。它可以下載的圖片像素還蠻高的,基本上都是 幾千×幾千 的圖片像素,畫質也很可以。

結語

「mockDrop」這個網站工具大概用一次就會了,因為它沒有其他太多的圖片設定可以調整,只需要插入圖片素材,就可以快速產出你需要的情境圖出來,是很方便使用的圖片合成工具之一。

如果要說哪裡比較不足的話,我認為就是它提供的 mockup 實在有點少,而且 mockup 的類型也只侷限於手機、電腦這類的電子產品。

如果需要更多 mockup 素材的話,比較建議去使用其他 mockup 網站,像是本文前面提到的 SmartmockupsArtboard Studio 都有提供很豐富的資源,Placeit 的實物模型有些還可以變色,而 Canva 裡面也有這種 mockup 功能可以用,有興趣可以再研究看看!

延伸閱讀

原網站| digitalyoming.com ( 未經許可,禁止轉載 ) 
原網址|https://digitalyoming.com/website-tool-mockdrop-tutorial/