轻量级3d模型查看器_Adobe XD+AI+DN完成智能手表逼真3D效果-CSDN博客

本文链接：https://blog.csdn.net/weixin_39816024/article/details/111288490

在为新产品创建界面时，二维只是设计过程的第一步。通过生成产品本身准确的可视化 3D 效果，考虑 UI 设计在现实世界中的效果也很重要。Adobe Dimension 是易于使用的 3D 场景设计工具，用于合成、分段和渲染引人入胜的合成照片，即使对于没有 3D 经验的设计人员也是如此。Dimension 使导入在如 Adobe XD 和 Adobe Illustrator 之类的工具中创建的 UI 原型并将其应用于3D模型(作为纹理)变得简单。无论从事一个项目的 UI 设计人员和 3D 设计人员有多少，都可以协作并快速创建真实感的资源和场景。这些设计应用程序都可以协同工作，从而可以在 Illustrator 中进行设计迭代，并在执行过程中检查 Dimension 中的结果。在下面的练习中，将研究这一整个过程，将探索如何通过 Adobe XD 和 Illustrator 完成 UI 设计，然后将它们在 Dimension 中与 Substance Painter 中编写的自定义 3D 材料相结合，来创建智能手表的合成照片的可视化效果。最终结果是真实感逼真的渲染图像，可用于设计验证、客户评论、行销甚至演示在 XD 中制作的交互原型。 在 Adobe XD 中为表盘制作 UI/UX 原型XD 是 Adobe 基于矢量的用户体验设计工具，它简化了手表界面的创建和迭代设计的过程。它结合了我们熟悉的功能，例如矢量绘图工具、色板、网格和参考线以及智能的内容感知布局系统等，有助于在为不同屏幕尺寸创建设计时维持 UI 元素的相对位置和比例。

Adobe XD中完成的原型界面，原型由Erin Kim提供界面元素也可以另存为组件，以在多个设计中重复使用。对于智能手表、消息和日历图标已创建为“组件”，可以从“资产”面板中拖放并放置在画板上。

在XD中向UI设计添加新组件 在 Adobe Illustrator 中优化 UI 设计一旦在 XD 中创建了智能手表界面的不同状态的布局，就可以在 Illustrator 中对其进行优化。Adobe 的行业标准矢量图形软件包含创建精美实现的设计所需的所有设计、版式和阴影功能。

在 Illustrator 中完善界面的外观这些工具轻松为接听和结束电话的按钮创建自定义填充。这是通过从界面的每日计划屏幕上的图标中采样颜色，然后调整渐变的方向来完成的。可以将完成的UI设计保存为标准 Illustrator 文件。

在 Illustrator 中为界面元素着色 将 Illustrator 画板用作 Dimension 中的纹理Illustrator 文件可以映射到 Dimension 中的 3D 模型的表面上。这样就可以准确地可视化使用智能设备时界面设计的外观。在下面的 GIF 中，Illustrator 文件已分配给 Dimension 中手表的四个单独的 3D 模型，该界面实际上显示在表盘玻璃后面。

在 Illustrator 文件的画板之间切换以在 Adobe Dimension 中显示不同的UI屏幕

显示智能手表的完整尺寸通过在“场景”面板中选择代表其中一个表盘的 3D 对象，然后通过“属性”面板中的色板检查对其应用的纹理，然后从原始面板中选择一个新的画板，可以在每个手表上显示 Illustrator 文件的不同界面。 在 Illustrator 中实时编辑画板修改原始 Illustrator 文件后，用作 Dimension 中纹理的矢量插图会自动更新，从而可以轻松地进行设计迭代。单击“Dimension”内的“编辑”图标可在 Illustrator 中打开文件。当矢量设计被更新并保存在 Illustrator 中时(例如，更改了手表指针的颜色)，所做的更改将自动显示在Dimension中。每次在 Illustrator 中对设计进行编辑时，纹理都会在 Dimension 的 3D 视口中即时更新，从而使其在 3D 中的迭代与在 2D 中一样容易。

在 Illustrator 中对 UI 所做的编辑会自动传输到 Dimension 在 Substance Painter 中创建自定义 3D 材质Adobe的材质创作软件 Substance Painter 允许绘制基于物理的表面细节。其中包括金属、塑料、纺织品以及几乎所有其他东西的无穷变体，无论是真实的还是想象的。该过程是基于图层的、使用画笔和蒙版，使用与 Photoshop 类似的范例。为了帮助用户入门，在线物质来源库有成千上万种现成的材料，从木材、金属到织物和皮革。每种 Substance 材料都是完全程序化的，因此可以在 Substance Painter 中自定义表带的表面颜色和粗糙度之类的属性。与在 Dimension 中一样，该材质显示为应用于 3D 视口内的 3D 模型，从而可以轻松地通过旋转模型或更改照明方向来检查其表面对光的响应。每种材料都由一组参数组成，例如表面颜色、粗糙度或金属。这些由强度滑块或2D纹理贴图控制。可以通过切换 Substance Painter 的“图层”堆栈中相应图层的可见性来快速测试变体，就像在 Photoshop 中一样。材质完成后，从“导出纹理”窗口中选择“ Adobe 尺寸”预设会自动设置纹理贴图的格式，以供在尺寸中使用。

在纹理层之间切换是测试替代材料的快速方法 在 Dimension 中渲染合成产品照片Dimension 简化了照明和渲染 3D 场景所涉及的许多技术工作，从而使以前很少有3D经验的艺术家可以生成逼真的图像。

在 Dimension 中渲染的图像可以通过调整简单的滑块控件来控制手表的方向和强度来改变手表上的照明。Dimension 还包括“阳光”(一种用于模仿自然光的特殊光类型)，并带有滑块以控制太阳的高度和天空的阴天。

更改 Dimension 中表盘上的照明添加摄影背景就像从“库”面板中将图像拖放到场景中一样简单。使用的 AI 和机器学习技术的 Adobe Sensei，可以将透视、照明和背景相匹配。

对于智能手表，结果是一系列不同界面设计的精确可视化效果，这些外观设计已在 XD中原型化，并在 Illustrator 中得以完善。可以将这些 2D 设计资产与 Substance Painter 中创作的3D材料整合到 Dimension 中，以生成一系列引人入胜的逼真的图像，用于设计评论或市场营销。通过使用在 Dimension 中渲染的丰富图像，将工作流程与 XD 全面融合到 XD 项目中，例如应用程序或网站原型。 使用 Adobe Aero 将 3D 场景发布到增强现实，并使用 3D 查看器发布到网络Dimension 中使用的 3D 资产也可以在 Adobe Aero(Adobe的增强现实创作软件)中使用。这样，便可以从各个角度轻松地查看覆盖在自己的物理环境中的设计，从而获得更具交互性和身临其境的体验。

使用 Adobe Aero 在 AR 中显示的智能手表设计Dimension 还允许将场景发布到 Web 上，从而可以 360 度共享场景。所有 3D 对象、材质和相机位置都将打包并在实时 3D 查看器中提供。不需要其他插件，这意味着不使用 Dimension 的人也可以查看场景。还有一个选项可以留下评论，使之成为一种直观而有效的协作工具。