怎么用模板制作网页-任意机型都能制作美观的「带壳截图」,Snapmod 自定义模式

与普通的矩形屏幕截图相比,脱壳屏幕截图就像将照片放入相框中。 他们显得更加友好和生动。 它们可以说是展示应用程序和设备的绝佳选择。

如今,各种应用程序都为大多数模型提供了模板; 但如果您的型号较旧或不太受欢迎; 或者新模型刚刚发布,软件中尚未包含该模型的模板; 或者,如果您只是想为您的手机定制一款专属保护壳,Snapmod 的“定制模型”功能也能满足您的需求。

哪里可以找到“手机壳”?

如果我们想要制作带壳的截图模板,其实只需要做两件事:首先,我们需要找到一张只有边框的png格式的手机“证件照”,然后确定我们想要的位置放置屏幕截图。 。 因此,寻找模板照片的思路也有两种——一是找现成的png格式的正面图片素材,二是自己动手,从包含手机屏幕的渲染图中去掉屏幕部分。

事实上,每个主要的软件公司都有自己的设计页面。 首先给大家介绍的Facebook设计页面提供了从诺基亚230到小米MIX Alpha等数十款机型的前置渲染图下载。 覆盖跨度可以说是非常大的。

Facebook Design 的设备材质页面

不仅如此,该页面的资源还涵盖了同型号不同颜色的素材,非常方便。

Facebook提供多格式、多风格的设备素材

除了下载现成的材料外,我们还可以去设备的官网碰碰运气。 这时,我们就需要利用大多数浏览器(包括Safari、Chrome、Chromium核心浏览器和Firefox)提供的“开发者工具”来找出网页中可能埋藏的设备前端素材。

打开设备官网,任意位置右键选择“Inspect Element”,或者按F12调出开发者工具。 您现在是一名开发人员了!

此时我们需要刷新页面并拖动滚动条到底部来加载所有页面元素。 然后我们切换到“网络”选项卡,在上面的过滤器中选择“图片”,然后我们就可以在左侧的图片列表中进行搜索。

使用浏览器的元素检查工具从官网“拾取图片”!

Safari 和 Chrome 浏览器还在右侧提供所选图像的预览,进一步简化了搜索过程。 你有没有看到过一张看起来像手机怎么用模板制作网页,但大部分都是网格图案的图片? 这就是我们所需要的。

如果这种方法失败怎么用模板制作网页,我们仍然可以找到设备的正面渲染图,然后使用Photoshop等工具去除屏幕上的内容来创建png模板。 注意,选择屏幕内容时,可以适当调整羽化程度,让边框不那么僵硬。

除了上面提到的方法之外,我们还可以在网上搜索“(手机名称)mockup”来搜索优秀设计师设计的手机壳材质。 例如,Dribbble 和 Behance 上有很多设计师。 大家分享了自己制作的手机壳模板。 它们不仅可以免费下载,有的还提供Adobe Photoshop格式的原始文件,方便用户进行微调。

MockUPhone提供的Lumia 920模型素材

最后,我们还可以尝试一些在线的“脱壳图像生成器”来碰碰运气。 例如,MockUPhone就提供了诺基亚Lumia 920的优质正面材料。

我应该把截图放在哪里?

作者在自定义模板制作窗口给了我们明确的指示,要求我们提供四项数据,分别是:

这些参数该如何填写呢?

第一次见到你的时候我也傻眼了

首先要注意的是,这里的(X,Y)坐标是以模板左上角为坐标原点测量的。 衡量这四个数据的方法有很多种。 我们建议使用 Photoshop 等工具的“信息”选项卡来阅读信息。

操作方法很简单——用图像处理软件(在线PS也可以)打开需要的模板,放大再放大,直到能看到像素为止。 打开“窗口”选项卡中的“信息”,然后我们可以将鼠标移动到屏幕边缘来读取“空白截图”的值。 调整好截图和外壳的位置后,直接将鼠标移动到截图左上角即可在信息面板上看到坐标信息。

鼠标移动到左上角可以看到信息面板中的坐标信息

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

概括

对于那些屏幕边缘有一些曲线的设备,设备的渲染上通常会出现一些高光和渐变效果。 如果你发现脱壳截图的“屏幕”和“边框”部分不够接近,不妨将“屏幕”的高度和宽度增加1到2个像素。 如果你的设备边框比较大,还可以在边框上添加水印或者其他自定义内容,这里不再赘述。

如果觉得自己制作麻烦,也可以去Snapmod的酷兰评论区看看评论区有没有热心用户分享自己想要的机型的截图素材和设置参数,然后下载应用直接地。

Snapmod的自定义模型功能无需付费即可使用,解锁高级版。 利用好这个功能,可以一劳永逸地解决“脱壳截图”应用没有模型素材的尴尬,告别等待。

最后,这里演示一下按照本文流程制作的带壳Lumia的截图效果。 你还记得腾讯微博和Windows Phone的时代吗?