【MockUPhone】裝置類型的 Mockups 線上合成工具~

MockUPhone tutorial 封面圖片

現在網路上有各種不同的圖片製作工具,其中一種就是可以用來合成「Mockup」的圖片,而這次要介紹的「MockUPhone」也是其中一員,不過它專門提供的是手機、電腦、手錶等裝置類型的模板,不用登入直接就可以線上快速合成圖片!

前往 MockUPhone

首先點上面的按鈕前往 MockUPhone 的首頁,首頁大概就是這個網站的簡介,說明這個網站是簡單且免費的 Mockup 產生器,主要提供螢幕截圖相關裝置的 Mockup 模板,不過目前沒有選單可以點,你可以隨意點擊中間那三個黑色的按鈕,直接進入它的 Mockup 瀏覽頁面。

MockUPhone 首頁


MockUPhone 提供的設備類型

下圖就是 MockUPhone 所有 Mockup 模板的頁面,頁面上方有五種裝置類型可以切換,分別是 iOS、Android、Wearables、Computer、TV,而每種裝置分類底下還會有明確的裝置標籤,點擊這些標籤可以快速跳到那個標籤的裝置預覽畫面。

MockUPhone 裝置類型篩選頁面


全都是單獨裝置的 Mockups

MockUPhone 提供的模板都是下圖這樣的「透明背景的單獨裝置模型」,而且是以手機裝置的模板最多,基本上都算是很新型的裝置。如果是同款式的手機,它的裝置預覽圖看起來會差不多,但其實邊框顏色還是有一點點差異喔!

MockUPhone 裝置類型預覽圖


你可以把滑鼠移動到這些預覽圖的上方,它有些預覽圖會顯示兩種不同的裝置動態畫面,代表後面下載圖片的時候,可以拿到這兩種不同的圖片。

MockUPhone 裝置 GIF 預覽圖




線上合成 Mockup

上傳圖片

接下來點一個你想用的 Mockup 模板進入它「上傳圖片」的地方,左邊深灰色區域內的 Browse Files 就可以從手機或電腦上傳圖片,如果是在電腦操作的話,可以把圖片直接從資料夾拖曳到深灰色區域內。

上傳圖片到 MockUPhone


產生 Mockups 圖片

上傳圖片之後,畫面的右邊會出現一個你成功上傳圖片的區塊,綠色打勾代表你已經成功上傳圖片,再按下面的 Generate product mockups 按鈕來進行圖片的合成。

開始產生產品的 Mockups


接下來 MockUPhone 會花個幾秒鐘的時間來產出你需要的 Mockups 圖片檔案。

Generating...


完成 Mockups 圖片合成並下載

然後顯示圖片合成成功的畫面,沒錯,它並沒有 Mockup 合成的預覽圖!而是把它製作成一個「壓縮檔」,要點擊下面的 Download my mockups 來把這個「壓縮檔」給下載下來。

● 這個網站的好處就是不需要任何帳號登入才能下載圖片,很多 Mockup 網站都需要登入才能使用或下載圖片。

完成 Mockup 圖片合成,按下面的按鈕下載 Mockup 壓縮檔


解壓縮檔案

最後再把你剛剛下載的「壓縮檔」進行解壓縮,就可以拿到你合成後的 Mockup 圖片了,「手機」或「手錶」的裝置都是下圖這種垂直跟水平的圖片,而如果是「電腦」跟「電視」裝置的話,有些會有不同視角的 Mockup 圖片,可以自己去看看電腦電視那邊的預覽圖。

把下載的「壓縮檔」解壓縮之後,就可以拿到裡面的 Mockup 圖片




結語

我覺得 MockUPhone 檔案的畫質其實還算不錯,像我最後下載的圖片,它的圖片尺寸就有 2892 × 1350 個像素,而且 Mockup 外框也很精緻,只可惜現在功能有點太過簡易,在使用上會有些不太方便,像是合成圖片沒有預覽圖,沒有內建裁切圖片的功能,一切都要等到下載檔案的時候才能看到,而且還多了一個「解壓縮」的步驟,所以想要追求效率的人,可能就不太適合使用這個線上工具了。

相較之下,我會比較推薦其它的 Mockup 線上合成工具,功能或素材比較豐富的網站有:SmartmockupsPlaceitArtboard Studio,這些網站都有自己的圖片編輯器,也看得到下載前的預覽圖,這樣設計圖片會比較方便。另外也有像 MockUPhone 這種專門提供裝置類的 Mockup 網站,例如 Pixeltrue 所提供的 Mockup 產生器,而相關的內容可以參考「延伸閱讀」裡的文章。


延伸閱讀


aifian APP推薦活動


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

→ 歡迎 留言分享

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

贊助我一杯咖啡


留言區