帶殼截圖相比於普通的矩形截圖來說，好比是將照片裝入相框，顯得更為親切也更為生動，可以說是展示應用和設備的絕佳選擇。
如今各式各樣的應用都已經提供了絕大多數機型的模版；但如果你的機型較為古老或冷門；又或者說新機剛剛發佈，軟件裡還沒有收錄此機型的模版；再或者你單純地想為自己的手機定製一份專屬外殼的話，Snapmod 的「自定義模機型」功能便可以滿足你的需求。
「手機殼」去哪兒找？
想要製作一個帶殼截圖模版，其實也只有兩件事需要我們來完成而已：首先我們要找一張只有邊框的 png 格式手機「證件照」，再確定我們要把截圖放在什麼位置就好了。所以找模版照片同樣也有兩種思路 —— 一是尋找現成的 png 格式的正面圖片素材，二是自己動手，從包含手機屏幕的渲染圖中將屏幕部分移除。
其實各大軟件公司都有自己的設計專題頁面，這裡首先向大家介紹的 Facebook 設計專題 頁面 中就提供了數十款機型的正面渲染圖下載，從 Nokia 230 到小米 MIX Alpha，覆蓋跨度可以說是非常之大。
Facebook Design 的設備素材頁面
不僅如此，此頁面中的資源還涵蓋了同一款機型的不同顏色的素材，可謂是十分方便了。
Facebook 提供多格式、多樣式機型素材
除了下載現成的素材，我們還可以去設備的官網碰碰運氣。這時候，我們需要用到大多數瀏覽器（包含 Safari，Chrome 以及 Chromium 內核瀏覽器和 Firefox）都有提供的「開發人員工具」來找出網頁中可能埋藏的設備正面素材。
打開設備的官網，在任意地方右擊並選擇「檢查元素」，或者按下 F12，就可以呼出開發人員工具。You are a developer now!
此時我們需要刷新頁面，並將滾動條拖動至最下方以加載所有頁面元素。然後我們切換到「網絡」選項卡，在上方的過濾器中選擇「圖片」，接下來我們就可以在左側的圖片列表中進行搜索了。
藉助瀏覽器的元素審查工具從官網「扒圖」！
Safari 和 Chrome 瀏覽器還在右側提供了所選圖片的預覽，進一步簡化了搜尋過程。在這之中有沒有看到一張長得很像手機，但大部分都是網格圖案的圖片？這就是我們需要的了。
如果說這一招也沒有辦法的話，我們仍然可以找一張設備的正面渲染圖，再使用 Photoshop 等工具將屏幕上的內容移除來製作 png 模版。注意在選擇屏幕內容的時候可以適當調節羽化程度來讓邊框不那麼生硬。
除去上面提到的幾種方法以外，我們還可以在網絡中搜索「（手機名稱）mockup」來搜索各位優秀設計師所設計的手機殼素材，比如說，Dribbble 和 Behance 上就有許多設計師向大家分享了他們製作的手機外殼模版，不僅提供免費下載，有的還提供 Adobe Photoshop 格式的原文件，方便用戶進行微調。
MockUPhone 提供的 Lumia 920 機型素材
最後，我們還可以嘗試去一些在線的「帶殼圖片生成器」去碰碰運氣，比如說 MockUPhone 就提供質量不錯的 Nokia Lumia 920 的正面素材。
截圖該往哪裡放？
作者在自定義模版的製作窗口給了我們明確的指示，需要我們提供四項數據，分別是：
- 屏幕截圖左上角到模版最左側的寬度 X（單位為像素，後面同理）
- 屏幕左上角到模版最上方的距離 Y
- 模板中屏幕左側到右側的寬度 W
- 上方到下方的寬度 H
這些參數該如何填寫呢？
第一次見我也看傻了
首先需要注意的是，這裡的 (X,Y) 座標是以模版左上角為座標原點來測量的。測量這四個數據的方法也有很多，我們這裡推薦用 Photoshop 等工具的「信息」選項卡進行信息的讀取。
操作方法非常簡單 —— 用圖像處理軟件打開所需的模版（在線 PS 也是可以的），放大放大再放大，直到可以看到像素點為止。在「窗口」選項卡中打開「信息」，這時我們就可以將鼠標移到屏幕邊緣讀取 X 和 Y 的數值了；針對一些圓角屏幕，你也可以直接在 Photoshop 這類工具中製作一張「空白截圖」，調整好這張截圖和外殼的位置後，直接將鼠標移動到截圖左上角即可在信息面板上看到座標信息。
鼠標移動至左上角即可在信息面板看到座標信息
同理，經過簡單的計算我們就可以計算出寬度 W 和高度 H，有了這些參數後，我們就可以在自定義機型功能中填入相應的素材和參數了。
小結
對於那些屏幕邊緣有一些彎曲的設備，設備的渲染圖上往往有一些高光和漸變效果。如果你發現製作出的帶殼截圖的「屏幕」和「邊框」部分貼合不夠緊密的話，不妨適當將「屏幕」的高度和寬度增加 1 到 2 像素。如果你的設備邊框比較大，還可以在邊框上添加水印或者其他自定義內容，這裡就不再贅述了。
如果你覺得自己動手製作比較麻煩，也可以前往 Snapmod 的 酷安 評論區，看看評論區是否有熱心用戶分享自己想要機型的帶殼截圖素材和設置參數，直接下載套用即可。
Snapmod 的自定義機型功能無需付費解鎖高級版即可使用，善用該功能可以一勞永逸解決「帶殼截圖」應用沒有機型素材的尷尬，告別苦等。
最後放一張根據本文流程製作的 Lumia 帶殼截圖效果演示，還記得那個有騰訊微博和 Windows Phone 的時代嗎？
