惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

博客园 - 叶小钗
D
Docker
Google DeepMind News
Google DeepMind News
Y
Y Combinator Blog
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
Blog — PlanetScale
Blog — PlanetScale
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
U
Unit 42
博客园 - 【当耐特】
N
Netflix TechBlog - Medium
V
Visual Studio Blog
Microsoft Azure Blog
Microsoft Azure Blog
博客园_首页
Recent Announcements
Recent Announcements
GbyAI
GbyAI
T
Tailwind CSS Blog
S
SegmentFault 最新的问题
WordPress大学
WordPress大学
T
The Blog of Author Tim Ferriss
Engineering at Meta
Engineering at Meta
L
LangChain Blog
A
About on SuperTechFans
M
MIT News - Artificial intelligence
B
Blog

少数派

派早报:Google 发布 Fitbit Air 等 - 少数派 「新人报到」確認需求,再開始 - 少数派 从 SOLO 独立开发者社区,我看到了越来越多开发者开始做自己的产品 - 少数派 我怎么管理那些"不常做,但总会忘"的生活事项 - 少数派 人形机器人量产元年,数据才是具身智能的“生死线” - 少数派 BuhoLaunchpad 高度还原 Mac 启动台:开发历程与思考 - 少数派 五年陪伴依然不舍,DIY 换壳后让罗技 MX Master 3 继续服役 - 少数派 新玩意 240|少数派的编辑们最近买了啥? - 少数派 一日一技|为什么你应该关闭 iOS 的键盘声音 - 少数派 我做了个插件和 Skills,一键提取任何网站的设计规范 Design.md - 少数派 住在三四线城市的你,该开始录播客了 - 少数派 甘南秘境,大白高国 - 少数派 AI的审美:谁让把我变成川内倫子 - 少数派 返工怎能不烦恼,打工人片单总有一部是你的「嘴替」 - 少数派 为了让「上厕所」更健康,我做了一个小工具 - 少数派 AI + Skill,能够让生成的文章去除 AI 味吗? - 少数派 新玩意|韶音OpenDots ONE 耳夹式耳机 - 少数派 《美满》| 在每一个春天的晚上相爱(362) - 少数派 新玩意|优篮子 PS01 MagSnap 磁吸支架 - 少数派 自我整合手记 | 我开始早睡了:用稳定规则,为自由托底 - 少数派 用龙虾(OpenClaw)两个多月,我最深的12个体会 - 少数派 听歌时间到,12 张你可能错过的 2025 华语乐坛好专辑 - 少数派 承诺能追吗 - 少数派 macOS 26启动台没了? 我做了个不一样的App启动器 - Keboard - 少数派 《四海为家的人》| INTJ对话INTJ(361) - 少数派 你发过的那些黑历史,是时候一次清干净了 - 少数派 新玩意:安安静静玩,越玩越专注:计客密码机 - 少数派 iPad 用户首次体验 Android 平板:vivo Pad6 Pro - 少数派 数据逻辑强 - 少数派 极北行+ | 一路向北,探访日本至北之地 | 001 - 少数派
带壳截图不求人:如何使用 Snapmod 的「自定义机型」功能 - ...
2020-04-19 · via 少数派

带壳截图相比于普通的矩形截图来说,好比是将照片装入相框,显得更为亲切也更为生动,可以说是展示应用和设备的绝佳选择。

如今各式各样的应用都已经提供了绝大多数机型的模版;但如果你的机型较为古老或冷门;又或者说新机刚刚发布,软件里还没有收录此机型的模版;再或者你单纯地想为自己的手机定制一份专属外壳的话,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 的时代吗?

关联阅读:

> 下载少数派 客户端 、关注 少数派公众号 ,发现实用 Android 实用技巧 ✨

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