带壳截图不求人：如何使用 Snapmod 的「自定义机型」功能

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

这些参数该如何填写呢？

第一次见我也看傻了

首先需要注意的是，这里的 (X,Y) 坐标是以模版左上角为坐标原点来测量的。测量这四个数据的方法也有很多，我们这里推荐用 Photoshop 等工具的「信息」选项卡进行信息的读取。

操作方法非常简单——用图像处理软件打开所需的模版（在线 PS 也是可以的），放大放大再放大，直到可以看到像素点为止。在「窗口」选项卡中打开「信息」，这时我们就可以将鼠标移到屏幕边缘读取 X 和 Y 的数值了；针对一些圆角屏幕，你也可以直接在 Photoshop 这类工具中制作一张「空白截图」，调整好这张截图和外壳的位置后，直接将鼠标移动到截图左上角即可在信息面板上看到坐标信息。

鼠标移动至左上角即可在信息面板看到坐标信息

同理，经过简单的计算我们就可以计算出宽度 W 和高度 H，有了这些参数后，我们就可以在自定义机型功能中填入相应的素材和参数了。

小结

对于那些屏幕边缘有一些弯曲的设备，设备的渲染图上往往有一些高光和渐变效果。如果你发现制作出的带壳截图的「屏幕」和「边框」部分贴合不够紧密的话，不妨适当将「屏幕」的高度和宽度增加 1 到 2 像素。如果你的设备边框比较大，还可以在边框上添加水印或者其他自定义内容，这里就不再赘述了。

如果你觉得自己动手制作比较麻烦，也可以前往 Snapmod 的 酷安 评论区，看看评论区是否有热心用户分享自己想要机型的带壳截图素材和设置参数，直接下载套用即可。

Snapmod 的自定义机型功能无需付费解锁高级版即可使用，善用该功能可以一劳永逸解决「带壳截图」应用没有机型素材的尴尬，告别苦等。

最后放一张根据本文流程制作的 Lumia 带壳截图效果演示，还记得那个有腾讯微博和 Windows Phone 的时代吗？

关联阅读：

> 下载少数派 、关注 ，发现实用 Android 实用技巧 ✨

> 特惠、好用的硬件产品，尽在少数派 sspai 官方店铺🛒

© 本文著作权归作者所有，并授权少数派独家使用，未经少数派许可，不得转载使用。 返回搜狐，查看更多