之前介绍不少 Mockups 相关的免费资源，我对产品开发没太多研究，但 Mockups 的意思就我理解大概就是模型图，通过网络上的工具可以将产品画面整合到实体装置中，看起来就跟真的运作一样，无论是用来做报告或放在产品官网都很合适，也让整体质感提升不少。
本文要推荐的「Mobile Mockup」是一款建立漂亮移动端模型图的线上工具，主要是将屏幕截图快速整合到手机画面，可设定不同的背景底色（透明色）和手机颜色，产生.png 格式图片，图片也非常简洁，适用于各种设计不会有违合感。
虽然要把截图画面放入手机模型里不难，但必须有适当的素材和修图能力，也不能缺少的是专业绘图软体，如果你本身不擅于使用绘图工具，又不想花太多时间处理的话，Mobile Mockup 是一个相当合适的选择，只要几分钟轻松制作出专业的模型图。
Mobile Mockup
网站链接：https://www.kapwing.com/mobile-mockup
开启 Mobile Mockup 网站，先点选「Choose screenshot」选择要合成的截图画面，依照网站说明，最理想图片尺寸大小是360 x 668，不过大于这个尺寸也没问题。
上传图片后截图会显示于右侧的 Mockup，接着开始进行相关设定，可以看到 crop、fit 或 stretch 代表图片呈现方式，分别是裁切、符合大小和延伸，如果不知道哪一种呈现方式比较适合你，直接点选会自动更新右边的预览图。
底下的调色盘分别是图片的背景颜色和手机边框颜色，除了预设颜色，也可自定义，值得一提的是背景颜色也提供「透明色（Transparent）」选项，让制作出来的图片可以符合任何背景色。
制作完成后点选「Download mockup」就能下载、获取.png 格式的模型图。
下图就是我通过 Mobile Mockup 制作出来的模型图，里面的图案是我从 iPhone 的 Safari 浏览器截取而来，搭配上 Mobile Mockup 就会有相当棒的效果，不仅很简单而且省时间。
值得一试的三个理由：
- 将图片上传就能呈现于手机模版中；
- 可自定义背景颜色、手机颜色和对齐方式；
- 输出为.png 图片格式，免注册或登录帐户。
图片素材作者：Charlie Deets
「你要的展示模型统统都有」
复制本文链接 文章为作者独立观点不代表优设网立场，未经允许不得转载。
程远
30314.4w人气 6856文章
发评论！每天赢奖品
点击 登录 后，在评论区留言，系统会随机派送奖品
2012年成立至今，是国内备受欢迎的设计师平台，提供奖品赞助 联系我们
优设私房课无门槛优惠券
已累计诞生 516 位幸运星
发表评论 已发布2条
↓ 下方为您推荐了一些精彩有趣的文章热评 ↓