2024 年 3 月 7 日 更新
之前有介紹過不少的 Mockup 線上合成工具，有的提供高質感的圖片模板，有的則可以讓我們快速合成圖片，每個網站的功能都有其特色，而這次要介紹的「Device Shots 2.0」則是專門提供裝置類型的 Mockup 圖片合成服務，並且能在圖片裡面同時添加多個裝置。
追蹤數位小幫手社群平台：Instagram、Twitter…等等。
Device Shots 2.0
Device Shots 有兩種版本可以使用，分別是 1.0 跟 2.0 的版本，1.0 的版本功能比較簡便一些，每張圖片都可以設定一個裝置的 Mokcup；而 2.0 的版本則擁有比較豐富功能，除了可以在同一張圖片放進多個 Mockup 之外，還可以在圖片裡面添加文字，並且調整每個元素的上下圖層順序。
這篇文章要介紹的，就是 Device Shots 的 2.0 版本，點擊上面的按鈕可以前往它的首頁 (如下圖)。在首頁中可以看到六種 Mockup 類型，分別為 Phones、Tablets、Computers、Displays、Watches 跟 Home 這六種，找一個你想用的 Mockup 點進去就能開始製作圖片。
Device Shots 2.0 圖片編輯器
從首頁選一個模板點進去之後，就會來到 Device Shots 2.0 的圖片編輯器畫面 (如下圖)，左邊是圖片的畫板，畫板裡面的 Mockup 或文字都可以隨意移動、旋轉或是調整大小，而右邊則是圖片編輯器的功能區跟選單。
Templates 圖片模板
最上面的 Templates 是圖片的模板，Device Shots 2.0 有提供 一些常見的網站或社交媒體的圖片尺寸，像是 Instagram、YouTube、Google Play、Twitter 等，不過數量不是很多。
Background 背景顏色
Background 可以設定圖片的背景顏色，它有預設幾個簡單的顏色可以快速套用，當然你也可以在上面填入 HEX 或 RGB 的色碼，換成自己喜歡的背景顏色，而下面的「Background Opacity」則可以調整背景顏色的透明度，Opacity = 0 的話則會變成一張透明背景的圖片。
Devices 裝置
Devices 選單這邊就是 Mockup 圖片的設定區，Device Shots 2.0 的模板一開始都只有一個裝置模型，如果想要在圖片裡面放進多個裝置模型的話，可以點擊上面的 Add Device Element 來添加多個或是不同的裝置模型，它一張圖片最多可以同時放 5 個 Mockup 在裡面。
有些裝置會有不同的樣式可以切換，從下面的「Device Elements」可以點進去切換它的 Mockup 樣式。
Text 文字
文字是圖片製作很重要的元素之一，你可以在 Device Shots 2.0 的圖片添加最多 10 個文字框，如果想要對文字進行更進階的編輯，點擊「Text Elements」裡的文字選項就能打開它的文字編輯功能，進一步設定文字的大小、字體或是顏色。
Layers 圖層
Layers 功能區這邊可以快速了解圖片中每個元素的圖層位置，並且可以透過旁邊的「上下鍵」來快速調整元素的上下層關係。
Canvas 圖片尺寸
Canvas 這邊可以修改這張圖片的尺寸大小 (Custom Size)，也可以利用下面的「Social Media Preset」來快速切換到常見的社交媒體圖片尺寸，除了前面有提到的 IG 或 FB 等的圖片之外，這邊還有 LinkedIn、Snapchat、Dribbble 等圖片尺寸可以用。
Settings 設定
最後 Settings 這邊比較重要的功能就是可以切換圖片的下載格式，可以在「Download Format」這邊切換 PNG、JPG 或 SVG 這三種圖片格式。
如何上傳並合成 Mockup 圖片
最後來說明一下怎麼使用它的 Mockup 圖片合成功能。
選取裝置
你可以把右邊選單切換到 Devices 功能區那邊，並且選擇一個你想要插入圖片的裝置。(直接點擊圖片中的 Mockup 也是可以的)
上傳圖片
接著會進入那個 Mockup 的設定介面，在上面的 Screenshot 可以上傳你想要合成的圖片，也可以直接從電腦資料夾拖曳到那個綠色區塊裡面，它能接受的圖片檔案格式為 JPG、PNG、SVG 跟 GIF。上傳之後，它就會自動把圖片合成到 Mockup 的螢幕上。(如下圖所示)
下載圖片
當圖片的所有元素跟設定都弄好了之後，點擊圖片編輯器右上角的 Download 按鈕，就能下載這張 Mockup 圖片。(下圖是從 Device Shots 2.0 下載下來的圖片)
結語
有些 Mockup 線上製作工具都有提供圖片設計的功能，不過大多都非常地簡略，Device Shots 2.0 圖片編輯器的功能相對來說算是比較多的了，不過有個缺點是它的 Mockup 沒有圖片裁切 (Crop) 的功能，而且編輯器也缺少復原的功能，所以使用上還是有些麻煩。
因此我覺得 Device Shots 2.0 比較適合快速無腦地合成圖片，並且設定為透明背景圖再下載下來，如果有其他圖片背景設計的需求，可以再把它拿去其他軟體或線上工具製作 (例如 Canva 或 DesignCap)。
另外，如果想要嘗試看看其他的 Mockup 線上合成工具，這邊我也有撰寫相關的文章，可以多多參考下面的延伸閱讀。
延伸閱讀
- 12 款 Mockup 網站工具介紹，直接在線上合成圖片！
- 【Smartmockups】合成專屬的情境圖！讓你的圖片更專業！
- 【Placeit】擁有超多種類的Mockups，實物模型的顏色也能改！
- 【Pixeltrue】提供的 Mockup 產生器，可下載高質量去背版圖片！
- 【Artboard Studio】幫你打造超質感的產品情境圖！
原網站｜數位小幫手digitalyoming.com( 未經許可，禁止轉載 )
原網址｜https://digitalyoming.com/device-shots-2-tutorial/