• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

免費資源網路社群

免費資源指南,每日網路資訊與科技新知

  • 免費軟體
    • APP
      • iOS
      • Android
    • Mac
    • 瀏覽器外掛
      • Chrome
      • Firefox
    • 防毒軟體
    • 系統工具
    • 圖片處理
    • 文字編輯
  • 線上工具
    • 雲端掃毒
    • 線上翻譯
    • 線上轉檔
    • 配色工具
    • 縮網址
    • 產生器
  • 免費空間
    • 網路硬碟
    • 圖片空間
    • 影片空間
    • 網站空間
  • 熱門主題
    • Facebook
    • VPN
    • YouTube
    • 編輯精選
    • 字型下載
    • 免費圖庫
  • 網路科技
    • 個人服務
    • 電子信箱
    • 實用教學
    • 資料查詢
    • 音樂音效
  • 架站教學
    • DNS
    • WordPress
    • 搜尋引擎最佳化
    • 素材模版
    • 免費圖示
    • 網站監測

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

Last updated 6 months ago by Pseric

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 後直接從首頁選擇你要使用的裝置類型,支援智慧型手機、平板電腦、桌上型電腦或筆電、顯示器、智慧手錶和智慧居家裝置,稍後進入編輯器可以快速調整選擇。

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. 提供的裝置型號相當全面,也能選擇不同配色

相關

分類: 產生器類, 線上工具標籤: Apple, Google Pixel, iMac, iOS, Macbook, Microsoft Surface, Mockups, Samsung, 介面開發, 免費圖庫, 免費圖庫素材, 圖庫, 圖片合成, 圖片工具, 圖片處理, 圖片裁切, 宣傳工具, 截圖, 手機, 擷圖製作, 數位工作, 產生器, 畫面擷取, 相片合成, 相片工具, 相片編輯, 相片處理, 社群媒體最佳化, 社群網站, 線上工具

關於 Pseric

學生時代成立網站以來堅持每日更新,在挖掘資料的過程中慢慢找出自己經營網站的方法,最開心的是有一群一起長大的讀者。

Primary Sidebar

使用電子郵件訂閱網站

輸入你的電子郵件地址訂閱網站新文章,使用電子郵件接收通知。

站內搜尋

追蹤更新

最新文章

  • Ray.so 將你的程式碼轉為漂亮圖片,加入視窗外框和陰影效果
  • Image It 線上將文字轉圖片,內建五種配色支援 HTML、CSS 語法
  • Hide Desktop 一鍵快速隱藏或顯示 Mac 桌面檔案
  • Bobby 在手機追蹤管理訂閱服務,統計每月支出和帳單提醒功能
  • 從 LastPass 匯出密碼、移轉到 Bitwarden 密碼管理工具教學
  • tree.fm 來個數位森林浴,隨機聽全世界大自然錄音
  • Wunderstock 千萬張 CC 授權相片免費下載,內建人工智慧搜尋圖片編輯器
  • Bitwarden 開放原始碼免費密碼管理器,可匯入其他密碼檔支援常見瀏覽器

精選主題

  • 思源黑體:Adobe 與 Google 合作開發開放原始碼中文字型
  • 思源宋體 Noto Serif CJK 字型免費下載!Google、Adobe 再次攜手推出開放原始碼字體
  • Apple Music 登陸台灣!免費三個月試用音樂串流服務,不聽音樂要幹嘛?
  • [下載] WinRAR 解壓縮軟體正式推出中文免費版,別再用盜版破解版了!
  • Mipony 白馬下載器:網路下載必裝!支援數百免空可突破下載限制
  • Outline 來自 Google 全自動自架 VPN 安裝工具,突破中國網路封鎖限制
  • Spotify 免費聆聽 4000 萬首歌,音樂串流應用 iOS、Android 版下載
  • Peggo 終止服務!5 個 YouTube 轉檔下載替代方案推薦
  • 日本亞馬遜 AmazonGlobal 線上購物直送台灣,免消費稅免找代購
  • 中華郵政 i郵箱初體驗,24 小時自助郵局寄件取件超方便
  • YouTube Music 免費音樂串流服務正式登場,升級 Premium 零廣告體驗
  • Microsoft Edge 正式版免費下載!以 Chromium 重新打造微軟瀏覽器
  • 使用 eMask 線上預購口罩,健保卡或自然人憑證驗證可信用卡繳費
  • 口罩實名制 2.0 健保卡身分認證教學,以健保快易通 APP 線上預約口罩
  • Photopea 免費圖片編輯器,堪稱 Photoshop 線上版支援 PSD 等常見格式
  • 財政部統一發票兌獎 APP 掃描發票存手機,自動記帳主動對獎超方便
  • 使用健保卡+戶號線上查詢勞保勞退年資、應繳欠繳保費和退休金核發試算
  • 跨平台 Brave 瀏覽器免費下載!兼具速度與隱私相容 Chrome 擴充功能
  • YouTube Kids 兒童專用影音頻道,手機平板應用程式免費下載

贊助商連結

實用教學

  • 46個免費圖庫網站總彙整
  • 15個免費下載高解析度圖片最佳圖庫
  • 下載高畫質相片素材的13個免費圖庫資源精選
  • 12個你應該知道的中英文假字、文章產生器
  • 20個免費下載創用 CC 授權音樂的網站彙整
  • 40個設計師必備免費資源超推懶人包
  • Google 商家被留負評該檢舉刪除?或許業主更該做的是回應疑慮
  • Facebook 全新下載資料副本功能,一次備份所有臉書記錄匯出
  • Instagram 資料下載讓使用者完整備份相片影片、留言、訊息等個人記錄
  • 7 個線上接收手機簡訊驗證碼的免費網路服務整理
  • 如何重灌 Mac 電腦?重新安裝 macOS 自動更新為最新版本教學
  • PayPal 兩步驟驗證設定教學,以手機簡訊或應用程式降低被盜用風險
  • 以 YubiKey 實體安全金鑰設定 Google 兩步驟驗證教學
  • 如何在瀏覽器不支援 Adobe Flash Player 後繼續播放 SWF 檔案?
  • Ruffle 免費 Flash Player 替代軟體下載,Adobe 停止更新後讓瀏覽器繼續支援

WordPress 架站資源

  • 搬家自架 WordPress 推薦的五個虛擬主機服務
  • 架站更上一層樓,我推薦的五個虛擬專屬主機(VPS)服務
  • WordPress Hosting 架站空間精選,最多人推薦的五個國外虛擬主機方案
  • 如何挑選一個適合你的虛擬主機服務?我參考的七個比較項目
  • 自架 WordPress 虛擬主機租用教學,將網誌備份匯出、匯入到新家
  • 在 WordPress 設定 HTTPS,強制使用 SSL 安全加密協定教學
  • 殺手級 WordPress 體檢項目:101 個建立新網站的超簡易捷徑!
  • Cloudflare 架站者必備免費 CDN、DNS 託管服務設定教學
  • 台灣用戶也能在 Google Domains 註冊購買網域名稱,詳細申請設定教學
  • 16 個免費網站速度測試工具推薦!網頁效能評比,搜尋引擎最佳化必備
  • 亞馬遜 VPS 服務 Amazon Lightsail 搭配 ServerPilot 快速架設 WordPress 教學
  • 165 個 WordPress 官方開發佈景主題設計 Jetpack 使用者免費下載
  • 使用 Google Cloud Platform 雲端主機免費版架設 WordPress 教學
  • 使用 Cloudways 架設 WordPress 網站教學,快速部屬最佳化環境
  • RunCloud 佈署最佳化主機環境,整合 DigitalOcean 架設 WordPress 教學
  • 使用 SiteGround 虛擬主機一鍵快速安裝 WordPress 教學
  • Cloudflare 變身域名註冊商,以最低價續費含免費 SSL、WHOIS 隱藏功能
  • FastComet 評價極高的虛擬主機推薦,一鍵安裝 WordPress 教學
  • VaultPress 完整備份你的 WordPress 網站,無痛搬家或回復特定時間點

贊助商連結

Managed WordPress Hosting
We Love Jetpack!
Stock Photos, Vectors and Royalty Free Images from 123RF

使用 WordPress 建置,最高級的語意化個人出版平台・關於本站・文章彙整・隱私權政策