MockupsJar 线上将图片合成到手机、电脑、相框或包装产生形象照

MockupsJar 是一个协助使用者建立真实模型素材的在线工具，如果想为你的网站、手机应用程序製作更好看的形象照片，只要简单三个步骤就能将画面整合到 MockupsJar 提供的照片库，整体操作方式简单，无需使用 Photoshop 或任何影像编辑软件。网站目前收录超过 919 个模型图片，包含各种装置、情境或是实际生活照片，使用者只要将自己想呈现的照片或是撷图画面上传即可整合到模型中。

之前我也推荐过不少 Mockups 相关工具和产生器，例如：

• Mockup Photos 数千张高画质素材图库，可自行上传图片或在线撷图整合
• Smartmockups 将网页或应用程序画面整合图库素材，在线产生更独特免费行销照片
• MockDrop 免费 Mockups 产生器，在图库照片整合想呈现的画面
• Dimmy.club 将萤幕撷图或程序画面放入图库装置显示，打造专业模型图片

MockupsJar 有收录包括 iPhone、Android 和 MacBook 模型，还有透明背景图、画框相框、浏览器视窗、包装、服饰、平板电脑和书籍，使用者除了可自行上传照片或截图，也有输入网址来撷取网页、快速套用到模型功能，本身有简易的照片编辑器允许上传后进行调整，像是翻转、旋转、放大缩小、套用滤镜效果、加入标记、文字、箭头或图形等等，让图片在模型中呈现出更好的效果。

要注意的是 MockupsJar 仅提供免费用户最大 640×480 解析度大小，不过所有图片都没有浮水印，也能无限制次数下载和製作模型，支持 PNG、JPG 和 PDF 三种格式，如果需要更大尺寸、解析度更高的照片可考虑付费升级。

MockupsJar
https://mockupsjar.com/

使用教程

STEP 1

开启 MockupsJar 网站后往下捲动就会看到各种模型照片，左侧可依照分类进行浏览。

STEP 2

除了 MacBook 笔电、iPhone、Android 手机和平板电脑，很多都会加入一些实景来提升画面质感。

比较有趣的是 MockupsJar 还有实体包装的模型素材，像是相框、画框、包装品、衣饰或书籍。

STEP 3

在点击任一张模型素材后就能开始进行合成，不过在开始前我建议先点右上角「LOG IN」登入帐号（可直接使用 Google 帐户登入），因为完成后要下载照片前还是需要注册登入，避免合成后的照片遗失建议先登入。

接着从左上角点选「Upload Image」选择要加入这张素材的照片图片，或点选「Capture URL / FIGMA」输入网址来远程撷图，将网页画面呈现在照片中。

STEP 4

在上传图片时 MockupsJar 会跳出图片编辑功能，中间就是图片会完整显示于照片的范围，可利用拖曳方式调整显示范围、裁切、套用滤镜效果、调整颜色或是加入标记、文字、箭头或图形，编辑后点选右上角「Done」。

STEP 5

接着从右侧选择 PNG、JPG 或 PDF 格式，按下上方「Generate Download」按钮就能产生图片，前面有提到免费帐户只能产生最大 640×480 解析度大小，因此在中间的尺寸选择就不能选取超过此限制的尺寸，否则会跳出付费升级的提示。

此外，在右侧产生的照片如果没有看到「Download」按钮代表使用者没有登入帐号，请先点选右上角登入或是免费注册才能下载合成后的照片。

值得一试的三个理由：

1. MockupsJar 协助使用者建立真实模型素材，收录超过 900 个图片範本
2. 提供 iPhone、Android、MacBook，还有透明背景图、画框相框、浏览器、包装等等
3. 免费帐户只能产生最大 640×480 解析度，不过图片不会有浮水印