2024 年 3 月 7 日 更新
現在網路上有各種不同的圖片製作工具，其中一種就是可以用來合成「Mockup」的圖片，而這次要介紹的「MockUPhone」也是其中一員，不過它專門提供的是手機、電腦、手錶等裝置類型的模板，不用登入直接就可以線上快速合成圖片！
追蹤數位小幫手社群平台：Instagram、Twitter…等等。
前往 MockUPhone
首先前往 MockUPhone 的首頁，首頁大概就是這個網站的簡介，說明這個網站是簡單且免費的 Mockup 產生器，主要提供螢幕截圖相關裝置的 Mockup 模板。不過目前沒有選單可以點，你可以隨意點擊中間那三個黑色的按鈕，直接進入它的 Mockup 瀏覽頁面。
MockUPhone 提供的設備類型
下圖就是 MockUPhone 所有 Mockup 模板的頁面，頁面上方有五種裝置類型可以切換，分別是 iOS、Android、Wearables、Computer、TV，而每種裝置分類底下還會有明確的裝置標籤，點擊這些標籤可以快速跳到那個標籤的裝置預覽畫面。
全都是單獨裝置的 Mockups
MockUPhone 提供的模板都是下圖這樣的「透明背景的單獨裝置模型」，而且是以手機裝置的模板最多，基本上都算是很新型的裝置。如果是同款式的手機，它的裝置預覽圖看起來會差不多，但其實邊框顏色還是有一點點差異喔！
你可以把滑鼠移動到這些預覽圖的上方，它有些預覽圖會顯示兩種不同的裝置動態畫面，代表後面下載圖片的時候，可以拿到這兩種不同的圖片。
線上合成 Mockup
上傳圖片
接下來點一個你想用的 Mockup 模板進入它「上傳圖片」的地方，左邊深灰色區域內的 Browse Files 就可以從手機或電腦上傳圖片，如果是在電腦操作的話，可以把圖片直接從資料夾拖曳到深灰色區域內。
產生 Mockups 圖片
上傳圖片之後，畫面的右邊會出現一個你成功上傳圖片的區塊，綠色打勾代表你已經成功上傳圖片，再按下面的 Generate product mockups 按鈕來進行圖片的合成。
接下來 MockUPhone 會花個幾秒鐘的時間來產出你需要的 Mockups 圖片檔案。
完成 Mockups 圖片合成並下載
然後顯示圖片合成成功的畫面，沒錯，它並沒有 Mockup 合成的預覽圖！而是把它製作成一個「壓縮檔」，要點擊下面的 Download my mockups 來把這個「壓縮檔」給下載下來。
這個網站的好處就是不需要任何帳號登入才能下載圖片，很多 Mockup 網站都需要登入才能使用或下載圖片。
解壓縮檔案
最後再把你剛剛下載的「壓縮檔」進行解壓縮，就可以拿到你合成後的 Mockup 圖片了，「手機」或「手錶」的裝置都是下圖這種垂直跟水平的圖片，而如果是「電腦」跟「電視」裝置的話，有些會有不同視角的 Mockup 圖片，可以自己去看看電腦電視那邊的預覽圖。
結語
我覺得 MockUPhone 檔案的畫質其實還算不錯，像我最後下載的圖片，它的圖片尺寸就有 2892 × 1350 個像素，而且 Mockup 外框也很精緻。
只可惜現在功能有點太過簡易，在使用上會有些不太方便，像是合成圖片沒有預覽圖，沒有內建裁切圖片的功能，一切都要等到下載檔案的時候才能看到，而且還多了一個「解壓縮」的步驟，所以想要追求效率的人，可能就不太適合使用這個線上工具了。
相較之下，我會比較推薦其它的 Mockup 線上合成工具，功能或素材比較豐富的網站有：Smartmockups、Placeit，這些網站都有自己的圖片編輯器，也看得到下載前的預覽圖，這樣設計圖片會比較方便。
延伸閱讀
- 12 款 Mockup 網站工具介紹，直接在線上合成圖片！
- 【Placeit】擁有超多種類的Mockups，實物模型的顏色也能改！
- 【Smartmockups】合成專屬的情境圖！讓你的圖片更專業！
- 【Canva】也有 Mockup 功能！自動合成獨特的情境圖片~
原網站｜數位小幫手digitalyoming.com( 未經許可，禁止轉載 )
原網址｜https://digitalyoming.com/mockuphone-tutorial/