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

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

有時候我們會需要將應用程式或是網站畫面呈現在裝置上,例如在設計網站、介紹教學或展示產品會用到,不過要直接拍攝裝置其實並不容易,除非本身有不錯的攝影器材和光線,還得加上後製修圖的時間,其實只要使用 Mockups 工具就能輕鬆做到,我之前介紹過 QurbMobile 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 後直接從首頁選擇你要使用的裝置類型,支援智慧型手機、平板電腦、桌上型電腦或筆電、顯示器、智慧手錶和智慧居家裝置,稍後進入編輯器可以快速調整選擇。

Device Shots

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

Device Shots

STEP 2

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

Device Shots

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

Device Shots

STEP 3

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

Device Shots

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

Device Shots

STEP 4

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

Device Shots

點選右側「Background」可以調整背景顏色,像是加入背景圖、單色顯示或自訂顏色,如果沒有進行背景調整的話預設情況下會是透明圖。

Device Shots

當編輯完成時點選右上角「Download」綠色按鈕就能將圖片輸出,下載保存為 PNG 格式,整體操作是不是非常簡單呢?如果需要在裝置上顯示特定的網頁或應用程式畫面,不用自己找裝置、搭建攝影棚拍照,只要透過類似工具即可將圖片套用到某個裝置。

值得一試的三個理由:

  1. 將圖片整合到智慧型手機、平板電腦、筆記型電腦等裝置螢幕上
  2. 可自訂背景顏色,在輸出前將圖片裁切為適合特定社群網站的大小
  3. 提供的裝置型號相當全面,也能選擇不同配色
分享到...