别再用 PS 贴图了，Illustrator 的“模型”功能香爆了

最新推荐文章于 2025-12-02 17:06:34 发布

原创最新推荐文章于 2025-12-02 17:06:34 发布 · 1k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#贴图 #illustrator #ui #设计师 #ux #AIGC #工作流

我刚在工位坐下，咖啡还没泡好，老板就带着他那个“价值一个亿”的创意幽灵一样飘过来了。我们手头在做一个初创公司项目，一个关于生活的 App。

老板要求很“简单”：“我们需要 20 张高保真模拟图（Mockup），要展示 App 在各种真实生活场景里的样子，比如咖啡馆的桌上、用户走路时握在手里、在平板上浏览…… 明天早上开会前，我要看到。”

我当时真的……表面上沉稳点头，心里已经开始计算今晚得睡在公司了。20 张？一晚上？

做 UI 的都懂，把设计稿“贴”到场景图上，这活儿听起来容易，做起来全是细节。以前在 Photoshop 里，靠“智能对象”和“透视变形”慢慢“P”，遇到弧形屏幕或者反光，一张图没半小时根本搞不定。20 张，这是要我通宵的节奏。

但在海外混了这么多年，什么deadline没见过。活儿总得干。

我告诉老板没问题，大脑开始飞速运转，寻找最高效的解决方案。传统 PS 炼丹术肯定不行了。我突然想到了 Adobe MAX 大会上那个不起眼的功能更新，一个还在 Beta 里的神技。

我敢打赌，很多大神都偷偷收藏了这个技巧，就怕你学会了能准时下班。这篇文章你必须点赞收藏，不然划走可就找不到了。

技巧分享：Illustrator 的“Mockup (模型)”保姆级教程

在开始之前，我要先打破一个误区。我们总觉得 Illustrator (AI) 是画矢量的，Photoshop (PS) 才是搞合成的。但在 AI 功能的加持下，尤其是在 Beta 功能的帮助下，AI 现在处理 Mockup 这种“贴图”工作，比 PS 快得多，而且智能得多。

我今天分享的核心，就是 Adobe Illustrator 里的“Mockup (模型)”功能。

步骤一：准备你的“画布”和“贴图”

首先，你必须准备好两样东西：

场景图（画布）：一张高质量的、你希望把设计稿贴上去的场景照片。例如：一张有人拿着手机的照片，或者一个放在桌面上的平板电脑。格式 JPG 或 PNG 均可。
UI 设计稿（贴图）：你已经完成的 App 界面截图。可以是 PNG、JPG，甚至直接就是你在 AI 里画的矢量设计稿。

步骤二：启动“模型”功能（保姆级步骤）

这是入门的第一步，跟着我的菜单操作：

打开 Illustrator，文件 > 新建 一个画板（大小随意，能放下你的照片就行）。
把你的“场景图”（比如那张拿着手机的照片）直接拖拽到画板上。
关键步骤：用鼠标选中这张照片（确保它有一个蓝色的“定界框”）。
导航到顶部菜单栏：对象 (Object) > Mockup (模型) > 制作 (Make)。
点击“制作”后，Illustrator 可能会处理几秒钟。你会看到右侧自动弹出一个 Mockup (模型) 面板，并且你的照片上可能出现了一个提示框。这说明你成功进入了“模型”编辑模式。

步骤三：核心步骤：标记贴图表面

现在，你需要告诉 AI：“嘿，我要把我的 UI 稿贴在这张图的 这个区域。”

AI 很智能，但你得先指路。

看右侧的 Mockup (模型) 面板。AI 会自动尝试识别表面（比如书本、杯子、屏幕）。如果它自动识别出了手机屏幕（该区域出现蓝色高亮），那恭喜你，你运气很好！
如果没识别，或者识别错了，不要慌。看面板上的工具：
- 矩形工具：对于手机屏幕这种平整的矩形，用它就对了。
- 钢笔工具：如果你的表面是弯曲的（比如贴在 T 恤或瓶子上），才需要用它。
保姆级操作（针对 UI 贴图）：
- 在 Mockup (模型) 面板里，点击那个“矩形”工具图标。
- 然后在你的照片上，沿着手机屏幕的四个角，拉出一个覆盖整个屏幕的矩形。
- 注意：你不需要自己去拉透视！你就拉一个普通的、方方正正的矩形。AI 会自动把它贴合到照片的透视上。
- 拉完松手，你会看到手机屏幕被蓝色的智能网格覆盖了。这块“地”你就算圈好了。

步骤四：应用你的 UI 设计稿

圈地完成，该贴图了。

回到你的画板，把你的 UI 设计稿（那个 App 首页 PNG）也拖进 Illustrator，放在场景图的旁边就行（不要拖到照片上）。
在右侧的 Mockup (模型) 面板里，你会看到一个“符号”或“资源”区域。
选中你刚拖进来的那个 UI 设计稿（那个 PNG）。
它会自动出现在 Mockup (模型) 面板的资源列表里（显示为一个小缩略图）。
最后一步：用鼠标从面板的资源列表里，把这个 UI 稿缩略图拖拽到你刚刚在照片上圈好的蓝色网格上（也就是那个手机屏幕）。

✨ 见证奇迹的时刻。你的 UI 稿会瞬间、完美地贴合到屏幕上，透视、光影、甚至轻微的曲面都自动匹配了。

步骤五：实时调整和闪电迭代

如果只是贴一张图，PS 也能做到。这个功能的真正威力在于“迭代”，这才是老板要 20 张图的命门。

实时换稿：老板说“换成个人中心页看看”。你不需要重做。你只需要把“个人中心页.png”拖进 AI 画板，它就会自动出现在“模型”面板的资源里。你再把它拖到屏幕上，它就会自动替换掉首页，透视保持不变。
实时调整：贴上去之后，你可以在屏幕上双击进入编辑，对 UI 稿进行缩放、移动，AI 会保持透视关系实时演算。

我能这么快搞定，也多亏了 Illustrator 这个“模型 (Beta)”功能。Beta 功能代表了最新的 AI 技术，能用上这些，得益于我一直用的正版订阅。

我用的是Kingsman 机构(当前有6200多名设计师选择了这个企业订阅) 的 Adobe 全家桶企业订阅。

我之前也仔细研究过个人版的全家桶，但对比后发现“坑”挺多的。最大的问题是，个人版的全家桶订阅并不包含游戏和 3D 设计必备的 Substance 3D 套件。现在做 UI/UX，懂点 3D 是大趋势，很多高级动效和 C4D 联动都绕不开。个人版等于直接砍掉了你一个重要的技能树，工具的“完整性”大打折扣。你买的“全家桶”，其实是个“阉割版”。

更别提那些图便宜从第三方商家买的所谓“个人版”。我之前有同事就踩过这种坑，那种很多都是用盗刷的信用卡开的。他用了才两个月，项目做到一半，账号突然被封禁，订阅直接丢失。虽然本地文件还在，但所有设置和工具都废了，急得跳脚。

所以，我宁愿选择 Kingsman 这种企业订阅，它同时包含了 Substance 3D 套件，工具完整，专业确定性高，用着踏实。