經常會在各種軟體公司、應用程式或產品官網看到畫面效果，為了吸引使用者目光，也會以裝置內顯示方式呈現，同時還能增進網頁質感，但其實這些圖片多半不是實際拍攝，而是透過一些模板（Mockups）組合而成，不僅在製作上更為簡便，現在也有線上工具可直接將圖片整合到圖庫素材，例如我個人最常使用的 Smartmockups 協助我製作出更引人入勝的文章首圖，或是 Magic mockups、Dimmy.club 能將螢幕擷圖或應用程式畫面放入裝置螢幕中。
本文要推薦一款類似的免費服務「MockUPhone」，這個工具提供 iOS、Android、Windows Phone、平板、筆記型電腦、桌機和電視在內等眾多裝置的模型（Mockup），包括最新的 iPhone X、iPhone 8 及 Google Pixel 也在其中。
MockUPhone 的用途是什麼呢？簡單來說，選擇你要使用的裝置，然後將圖片上傳（例如網頁或應用程式畫面擷圖），即可將畫面「嵌入」裝置螢幕。
顯然這些圖片都會被加工、應用到網頁開發或其他專案中，因此 MockUPhone 產生的圖片是完全去背的透明背景圖，讓圖片得以被使用在更多不同顏色的背景，使用者不用自己去除背景，非常實用，製作出的圖片畫質很高，而這項服務完全免費，無須註冊就能使用！
網站名稱：MockUPhone
網站鏈結：https://mockuphone.com/
使用教學
STEP 1
開啟 MockUPhone 網站，可以從首頁上方的圖片看到 MockUPhone 產生的範例效果，底下有 iPhone X、iPhone 8 和 Google Pixel 按鈕可快速跳到特定裝置。
網站利用不同平台來分類裝置，除了智慧型手機、平板電腦，也有一般電腦和電視，看了一下 Apple 產品線確實很完整，目前最早的是 iPhone 5，其他像 iPhone SE、iPhone 6 Plus、iPhone 7 Plus 等等也都能從網站中找到。
Android 部分則有目前最新的 Google Pixel、Galaxy、HTC One、Moto 和 Nexus。將游標移動到裝置圖片上方，會出現直立和橫式兩種不同的效果。
STEP 2
點擊選取你要使用的裝置後，將圖片拖曳到網站虛線框，要特別注意為了符合最佳效果，盡量使用提示的圖片長寬，而根據裝置螢幕大小不同，也會出現不一樣的數值，例如 iPhone X 就會指定使用 1125 x 2436px 大小的圖片，否則若圖片尺寸不符，可能會讓產生的圖看起來不太正確。
如果上傳的圖片尺寸和 MockUPhone 提示尺寸不符，網頁會出現一個紅色驚嘆號，雖然它也會盡量讓圖片可以放入裝置螢幕中，不過效果可能會不盡理想，因此還是盡量將圖片縮放到網頁提示的圖片大小。
STEP 3
下圖就是我將網頁擷圖畫面放入 MockUPhone 提供的裝置中產生的圖片，可以看到我透過 iPhone 6 抓圖（4.7 吋），但 iPhone X 是 5.8 吋，放進去後上下會有間距。
STEP 4
那麼我就換成以 MacBook 來測試一下顯示效果，一樣在電腦上先把圖片擷取、裁切完整，選擇網站推薦的尺寸 1920 x 1200px，果然放入 MacBook 模型後產生的圖片成果非常棒，看起來就像在電腦上直接開啟網頁。
點擊下方的「Download My Mockups」藍色按鈕可以打包、下載產生的圖片（有些裝置可以一次產生數張圖），不過必須輸入你的 Email 才能收到下載鏈結。如果不想那麼麻煩，更快的方法是直接保存網頁上方產生的預覽圖，一樣也是透明背景。
值得一試的三個理由：
- 即使手邊沒有裝置或專業攝影器材，也能製作逼真的產品圖
- 支援各種 Apple、Android 手機、平板電腦，也提供筆電、桌機和電視
- 可將圖片自動調整成最適合顯示的尺寸大小
相關文章
- Mockuper 將圖片快速合成到平板電腦、手機或看板上
- Mockup Photos 數千張高畫質素材圖庫，可自行上傳圖片或線上擷圖整合
- Dimmy.club 將螢幕擷圖或程式畫面放入圖庫裝置顯示，打造專業模型圖片
- Magic Mockups 將產品放進相片圖庫螢幕中
Ten articles before and after
Never10 關閉自動升級 Windows 10，刪除下載又用不到的更新檔案 – telegram 下載
免費獲得 Daniusoft DVD to iPad Converter 轉檔軟體（含序號） – telegram 下載
Jare.io 免費 CDN 圖片分流加速服務，使用 AWS CloudFront 方便即時免設定 – telegram 下載
VoiceTube 推出 iOS App，在手機上也能輕鬆學英文 – telegram 下載
rsPlurk 在桌面追蹤噗浪未讀訊息、快速發噗的小軟體 – telegram 下載
經典守塔遊戲 Kingdom Rush Frontiers for iOS 本週限時免費下載！（含 iPad HD 版） – telegram 下載
美國大都會博物館開放超過 20 萬張圖片免費下載，公眾領域授權可商用 – telegram 下載