現在網路上雖然有很多很好用的製圖軟體,但有時候製作圖片並不一定要這麼麻煩,你可以使用所謂的「Mockup」網站工具來合成出你想要的圖片,而這次要介紹的「mockDrop」就屬於這類型的工具,它專門提供3C類型的產品情境模板,讓你可以做出好看的情境圖。
追蹤數位小幫手社群平台:Instagram、Twitter…等等。
前言
剛開始在網路上寫文章的時候,圖片素材一直是我很煩惱的地方,雖然網路上有超級多免費的圖片資源網站,但有時還是難以找到理想的圖片。所以我經常會使用「Canva」來設計圖片,畢竟它是一個功能超多又超好上手的圖片設計軟體,如果是一般的圖片很快就能做出來,但有些圖片不管怎麼設計感覺都不對,因此可能會不小心花太多時間在上面。
直到後來才發現不一定要自己設計圖片,可以改用所謂的 Mockup 網站來合成圖片,這類網站專門提供模板,你找一個喜歡的模板,然後把你的原圖素材放進去,它就會自動幫你合成一張新的圖片,也因此我才能製作出心中想要的圖片類型。
我有介紹過的一些 Mockup 網站,像是 Smartmockups
跟 Artboard Studio
都有提供豐富的圖片模板,但一個需要付費才能下載高畫質圖片,另一個則是全英文介面,使用上多少有些不順手。
而這次要介紹的「Mockdrop」也是其中一個 Mockup 網站工具,雖然它提供的產品情境模板不多,而且都是 3C 類,但是它可以下載較高畫質的圖片,合成操作也非常簡單順手!如果想要快速製作高畫質的產品情境圖,可以使用「MockDrop」。
mockDrop 主頁
mockDrop 官網點此:https://mockdrop.io/
點上面這個連結就可以直接到達 mockDrop 的官網主頁,它的主頁就如下面這張圖一樣是個「一頁式的網站」,一進去網站就能直接看到它網站上所有的圖片 Mockup,每張 mockup 都會顯示它需要的圖片尺寸。
mockDrop 篩選器
在 mockDrop 的圖片頂端上會有一排的「小標籤」,全部都是跟 3C 產品有關的類型,點擊它可以切換篩選下面的產品模型圖,mockDrop 這邊提供的模型圖幾乎都是有背景的或人物的,因此很適合用來合成各種場景的「情境圖」。目前它提供的標籤有:
- Smartphone (智慧型手機)
- TV (電視)
- Tablet (平板電腦)
- Laptop (筆記型電腦)
- Desktop (桌上型電腦)
- Watch (智慧型手表)
如何合成產品情境圖?
1.mockDrop 的使用方式非常簡單,只要把你的「原圖」或「素材」用滑鼠從電腦上拖曳進去它的模型 (mockup) 就可以了。
2.接著 mockDrop 就會自動把你的圖片跟它的模型合成,變成一張全新的合成圖片,然後會跳出一張比較大的預覽圖讓你參考。由於我放的圖片素材跟它 mockup 規定的尺寸差太多,所以會像下面這張圖一樣被拉伸變形,這個部分需要注意一下。
3.這次我改用另一個 mockup,並且找一張尺寸相近的圖片素材插入合成。
4.這次合成的情境圖就比較 OK 了,不會有明顯的拉伸變形的狀況發生。如果對這張合成的情境圖滿意的話,就可以直接按下面的 download mockup
來下載這張圖片。它可以下載的圖片像素還蠻高的,基本上都是 幾千×幾千
的圖片像素,畫質也很可以。
結語
「mockDrop」這個網站工具大概用一次就會了,因為它沒有其他太多的圖片設定可以調整,只需要插入圖片素材,就可以快速產出你需要的情境圖出來,是很方便使用的圖片合成工具之一。
如果要說哪裡比較不足的話,我認為就是它提供的 mockup 實在有點少,而且 mockup 的類型也只侷限於手機、電腦這類的電子產品。
如果需要更多 mockup 素材的話,比較建議去使用其他 mockup 網站,像是本文前面提到的 Smartmockups 跟 Artboard Studio 都有提供很豐富的資源,Placeit 的實物模型有些還可以變色,而 Canva 裡面也有這種 mockup 功能可以用,有興趣可以再研究看看!
延伸閱讀
- 12 款 Mockup 網站工具介紹,直接在線上合成圖片!
- 【Placeit】擁有超多種類的 Mockups,實物模型的顏色也能改!
- 【Pixeltrue】提供的 Mockup 產生器,可下載高質量去背版圖片!
原網站|數
位
小
幫
手
digitalyoming
.com
( 未經許可,禁止轉載 )
原網址|https://digitalyoming.com/website-tool-mockdrop-tutorial/