之前介紹不少 Mockups 相關的免費資源，我對產品開發沒太多研究，但 Mockups 的意思就我理解大概就是模型圖，通過網絡上的工具可以將產品畫面整合到實體裝置中，看起來就跟真的運作一樣，無論是用來做報告或放在產品官網都很合適，也讓整體質感提升不少。
本文要推薦的「Mobile Mockup」是一款建立漂亮移動端模型圖的線上工具，主要是將屏幕截圖快速整合到手機畫面，可設定不同的背景底色（透明色）和手機顏色，產生.png 格式圖片，圖片也非常簡潔，適用于各種設計不會有違合感。
雖然要把截圖畫面放入手機模型里不難，但必須有適當的素材和修圖能力，也不能缺少的是專業繪圖軟體，如果你本身不擅于使用繪圖工具，又不想花太多時間處理的話，Mobile Mockup 是一個相當合適的選擇，只要幾分鐘輕松制作出專業的模型圖。
Mobile Mockup
網站鏈接：https://www.kapwing.com/mobile-mockup
開啟 Mobile Mockup 網站，先點選「Choose screenshot」選擇要合成的截圖畫面，依照網站說明，最理想圖片尺寸大小是360 x 668，不過大于這個尺寸也沒問題。
上傳圖片后截圖會顯示于右側的 Mockup，接著開始進行相關設定，可以看到 crop、fit 或 stretch 代表圖片呈現方式，分別是裁切、符合大小和延伸，如果不知道哪一種呈現方式比較適合你，直接點選會自動更新右邊的預覽圖。
底下的調色盤分別是圖片的背景顏色和手機邊框顏色，除了預設顏色，也可自定義，值得一提的是背景顏色也提供「透明色（Transparent）」選項，讓制作出來的圖片可以符合任何背景色。
制作完成后點選「Download mockup」就能下載、獲取.png 格式的模型圖。
下圖就是我通過 Mobile Mockup 制作出來的模型圖，里面的圖案是我從 iPhone 的 Safari 瀏覽器截取而來，搭配上 Mobile Mockup 就會有相當棒的效果，不僅很簡單而且省時間。
值得一試的三個理由：
- 將圖片上傳就能呈現于手機模版中；
- 可自定義背景顏色、手機顏色和對齊方式；
- 輸出為.png 圖片格式，免注冊或登錄帳戶。
圖片素材作者：Charlie Deets
「你要的展示模型統統都有」
復制本文鏈接 文章為作者獨立觀點不代表優設網立場，未經允許不得轉載。
發評論！每天贏獎品
點擊 登錄 后，在評論區留言，系統會隨機派送獎品
2012年成立至今，是國內備受歡迎的設計師平臺，提供獎品贊助 聯系我們
標志設計標準教程
已累計誕生 729 位幸運星
發表評論 為下方 2 條評論點贊，解鎖好運彩蛋
↓ 下方為您推薦了一些精彩有趣的文章熱評 ↓