Device Shots 將圖片快速整合到手機、平板電腦或筆電顯示器螢幕

有時候我們會需要將應用程式或是網站畫面呈現在裝置上，例如在設計網站、介紹教學或展示產品會用到，不過要直接拍攝裝置其實並不容易，除非本身有不錯的攝影器材和光線，還得加上後製修圖的時間，其實只要使用 Mockups 工具就能輕鬆做到，我之前介紹過 Qurb、Mobile Mockup 和 MockUPhone 都能達到類似效果，像是將畫面整合到手機、平板電腦或是筆記型電腦，還能選擇不同的裝置外框、顏色或背景顏色等等，即使手邊沒有軟體也能輕鬆製作素材。

本文要推薦「Device Shots」是一個免費建立裝置模型圖的線上工具，提供六大類型素材：智慧型手機、平板電腦、筆記型電腦或桌機、顯示器、智慧手錶和居家智慧裝置，透過這個網站可以將圖片快速上傳並整合到特定的裝置中，讓它看起來很像是實際開啟的效果，只要選擇裝置、將圖片上傳，自動裁切成適當大小，即時在網頁上預覽效果。

Device Shots 提供的裝置類型相當全面，包括各種 iPhone、Google Pixel、HTC、Huawei、LG、Samsung 型號，平板電腦有 iPad、Google Nexus 和 Microsoft Surface Pro，電腦有 MacBook、Dell XPS、Microsoft Surface Book 等等，顯示器提供很新的 Apple Pro XDR 螢幕，其中部分裝置可以調整外框顏色。

值得一提的是 Device Shots 還能預先針對不同的社群平台需求進行圖片裁切，使它在平台上能獲得最佳顯示效果，例如 Facebook、Twitter、Instagram、Pinterest、Dribbble、Google Play，最後將圖片輸出保存為高解析度的 PNG 格式。

Device Shots
https://deviceshots.com/

使用教學

STEP 1

開啟 Device Shots 後直接從首頁選擇你要使用的裝置類型，支援智慧型手機、平板電腦、桌上型電腦或筆電、顯示器、智慧手錶和智慧居家裝置，稍後進入編輯器可以快速調整選擇。

首頁下方還會顯示完整的支援裝置列表，如果想尋找特定類型裝置可從下方選擇。

STEP 2

選好後 Device Shots 會顯示裝置外框，可以將圖片拖曳進去套用在裝置中預覽。

或是從右上角選擇要插入的圖片，支援 JPG、PNG、GIF 或 SVG 格式，也能切換不同裝置，網站會顯示最適合該裝置螢幕使用的圖片大小，有些裝置還能切換外框顏色。

STEP 3

將圖片整合到裝置上看起來就像下圖，可以看到效果非常棒，除了有高畫質的外框，還搭配透明背景可以輸出後進行編輯做更多運用。

如果想將圖片或畫面呈現在電腦上，Device Shots 也支援筆記型電腦或桌上型電腦，像是 MacBook 或 iMac 等等都能找到，還有不同產品線、外框顏色可供選擇。

STEP 4

如果想預先裁切成社群網站適用的圖片大小，從最右側選單選擇「Canvas」就能找到，網站已經提供一些尺寸範本，像是 Facebook、Twitter、LinkedIn、Instagram、Pinterest、Dribbble、Snapchat、Tumblr、Google Play，也能自定長度寬度或是放大縮小。