在各种设备屏幕上显示产品画面,支持最新 iPhone X

经常会在各种软件公司、应用程式或产品官网看到画面效果,为了吸引使用者目光,也会以设备内显示方式呈现,同时还能增进网页质感,但其实这些图片多半不是实际拍摄,而是透过一些模板(Mockups)组合而成,不仅在制作上更为简便,现在也有线上工具可直接将图片整合到图库素材,例如我个人最常使用的Smartmockups 协助我制作出更引人入胜的文章首图,或是Magic mockups、Dimmy.club 能将屏幕截图或应用程式画面放入设备屏幕中。

本文要推荐一款类似的免费服务「MockUPhone」,这个工具提供iOS、Android、Windows Phone、平板、笔记型电脑、桌机和电视在内等众多装置的模型(Mockup),包括最新的iPhone X、 iPhone 8 及Google Pixel 也在其中。

MockUPhone 的用途是什么呢?简单来说,选择你要使用的装置,然后将图片上传(例如网页或应用程式画面撷图),即可将画面「嵌入」设备屏幕。

显然这些图片都会被加工、应用到网页开发或其他专案中,因此MockUPhone 产生的图片是完全去背的透明背景图,让图片得以被使用在更多不同颜色的背景,使用者不用自己去除背景,非常实用,制作出的图片画质很高,而这项服务完全免费,无须注册就能使用!

网站名称:MockUPhone

网站地址:https://mockuphone.com/

使用教学

STEP 1

开启 MockUPhone 网站,可以从首页上方的图片看到 MockUPhone 产生的范例效果,底下有 iPhone X、iPhone 8 和 Google Pixel 按钮可快速跳到特定装置。

网站利用不同平台来分类装置,除了智慧型手机、平板电脑,也有一般电脑和电视,看了一下Apple 产品线确实很完整,目前最早的是iPhone 5,其他像iPhone SE、iPhone 6 Plus、iPhone 7 Plus 等等也都能从网站中找到。

在各种设备屏幕上显示产品画面,支持最新 iPhone X

Android 部分则有目前最新的 Google Pixel、Galaxy、HTC One、Moto 和 Nexus。将游标移动到装置图片上方,会出现直立和横式两种不同的效果。

在各种设备屏幕上显示产品画面,支持最新 iPhone X

STEP 2

点击选取你要使用的装置后,将图片拖曳到网站虚线框,要特别注意为了符合最佳效果,尽量使用提示的图片长宽,而根据装置萤幕大小不同,也会出现不一样的数值,例如iPhone X 就会指定使用1125 x 2436px 大小的图片,否则若图片尺寸不符,可能会让产生的图看起来不太正确。

在各种设备屏幕上显示产品画面,支持最新 iPhone X

如果上传的图片尺寸和MockUPhone 提示尺寸不符,网页会出现一个红色惊叹号,虽然它也会尽量让图片可以放入装置萤幕中,不过效果可能会不尽理想,因此还是尽量将图片缩放到网页提示的图片大小。

在各种设备屏幕上显示产品画面,支持最新 iPhone X

STEP 3

下图就是我将网页撷图画面放入 MockUPhone 提供的装置中产生的图片,可以看到我透过 iPhone 6 抓图(4.7 吋),但 iPhone X 是 5.8 吋,放进去后上下会有间距。

在各种设备屏幕上显示产品画面,支持最新 iPhone X

STEP 4

那么我就换成以MacBook 来测试一下显示效果,一样在电脑上先把图片撷取、裁切完整,选择网站推荐的尺寸1920 x 1200px,果然放入MacBook 模型后产生的图片成果非常棒,看起来就像在电脑上直接开启网页。

在各种设备屏幕上显示产品画面,支持最新 iPhone X

点击下方的「Download My Mockups」蓝色按钮可以打包、下载产生的图片(有些装置可以一次产生数张图),不过必须输入你的 Email 才能收到下载链结。如果不想那么麻烦,更快的方法是直接保存网页上方产生的预览图,一样也是透明背景。

在各种设备屏幕上显示产品画面,支持最新 iPhone X