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

Mock Magic Tutorial 封面圖片

現在網路上有許多網站專門提供 Mockup 線上合成的服務,有些網站會提供付費的服務跟模板,有些則可以完全免費使用,這邊要介紹的「Mock Magic」就屬於免費使用的網站工具,專門提供手機、電腦等螢幕裝置的實物模型,它的操作介面簡單易懂,是個很好上手的 Mockup 網站工具。

Mock Magic 首頁

「Mock Magic」是一個 Mockup 網站工具,它提供了各式各樣電子設備螢幕的 Mockup 線上合成服務,像是常見的手機、筆電、桌電、電視等 Mockup,都可以在他這邊快速合成,點擊下面的按鈕可前往 Mock Magic 網站。

這個網站不用註冊帳號,點擊右上角的 Get started 或畫面中間的 Create a mockup 按鈕,就可以開始合成圖片了。

Mock Magic 首頁


Mock Magic 網站上目前提供了 6 種不同的 Mockup 裝置類型,分別是:智慧型手機、平版電腦、筆記型電腦、桌上型電腦、智慧型手錶跟電視,這 6 種類型提供的實物模型數量加上顏色變化的話有 50 多種,大部分都以手機為主。

Mock Magic 提供的 Mockup 設備類型




Mock Magic 編輯器使用教學

它的編輯器介面非常簡潔 (如下圖),分成左邊的預覽圖跟右邊的操作介面。

Mock Magic Mockup 編輯器


選擇 Mockup 設備類型

它右邊的功能區最上面的 Mockup,可以選擇你想要套用的裝置外框,手機的部分以 iPhone 系列為主,但也有其他品牌的手機裝置可以選,像是 Huawei、Samsung 跟 Google。

除了手機類型的裝置之外,往下拉還有手錶、筆電、電視、桌機等設備可以選擇,但裝置選擇性比較少。

Mock Magic Mockup 設備型號Mock Magic Mockup 設備型號


選擇 Mockup 的顏色與方向

確認好裝置類型之後,可以看看它下面的 Variant 有沒有其他款式可以選擇,有些裝置可以有 6 種款式,而有些可能只有 1 個選項。

而如果你選擇的是「手機」跟「平版」類型的裝置,它下面還會有一個 Orientation 的選項可以讓你改變裝置方向。

選擇 Mockup 顏色


上傳圖片

裝置類型跟款式都決定好了之後,點右邊功能區的 Select file 來上傳你想合成的圖片,也可以直接從電腦的資料夾拖曳圖片到這個網站上,它會把圖片自動合到你指定的裝置螢幕上。(接受的圖片格式為:png & jpg )

不過這邊有個缺點,就是它的圖片裁切畫面沒有辦法在網站上修改,所以要事先將圖片裁成它建議的尺寸,這樣合成的效果會比較好一點。

上傳圖片到 Mock Magic 的編輯器裡面


下載圖片

合成圖片之後,就可以按編輯器右上角的 Download mockup 來下載這張圖片,它下載的會是一張 PNG 格式的圖片,圖片畫質還滿不錯的。

Download Mockup


重新製作 Mockup

下載完圖片之後,你可以點擊左上角選單內的 Empty Canvas 來開啟一張新的空白畫板,在右邊功能區那邊也可以按 ×Replace 來重新上傳一張圖片,由於它重置選項很多,所以真的很適合用來快速產出 Mockup 圖片。

Empty Canvas
刪除上傳的圖片




Mock Magic 相關操作影片



結語

Mock Magic 簡易的操作介面讓我們可以快速產出大量的 Mockup 圖片,雖然裝置類型並不多,但提供的都算是比較新型的機種,下載的圖片畫質也相當不錯,對於一般人來說已經很夠用了。

不過缺點就如前面提到的,目前沒有辦法在它的編輯器裡面裁切圖片,需要事先利用其它工具裁好你的圖片,才能讓 Mockup 的合成效果更好。

如果這個網站用不太習慣的話,也可以試試看其它的 Mockup 網站,像是 SmartmockupsArtboard StudioPlaceit 的圖片編輯器都有裁切圖片的功能,也有其他類似 Mock Magic 這種專門提供裝置擷圖 Mockup 的服務,詳細內容可以參考「延伸閱讀」裡面的文章。


延伸閱讀


aifian APP推薦活動


最後
§ 很感謝你的閱讀 §
如果你喜歡這篇文章的話

→ 歡迎 留言分享

→ 歡迎點下面這張圖來【贊助】支持我!讓我繼續為你創作更多內容!

贊助我一杯咖啡


留言區