用这个神器可以轻松制作手机展示样机,还可以自定义颜色! - 优设网 - UISDC

用这个神器可以轻松制作手机展示样机,还可以自定义颜色!

2018/06/30 40744评论区

之前介绍不少 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

「你要的展示模型统统都有」

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/mobile-mockup

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

设计师 扁平化设计 版式设计 交互设计师 界面设计 排版布局 优设专访 职场 优设大课堂 配色 视觉设计 web前端开发 素材下载 设计流程 AI教程 设计理论 神器下载 字体下载 设计师专访 psd下载 平面设计 设计趋势 用户体验设计 设计规范 海报设计 动效设计 logo设计 图标设计 产品设计 ICON 神器推荐 App设计 职场规划 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里