大厂出品!超详细的保姆级B端视觉设计教程

相信广大设计师朋友在工作中总会遇到一些 B 端类的视觉需求,通常是 UI 的装饰氛围模块以及 UI 视觉卡片。

下图为云游戏官网和游戏安全官网的部分视觉设计

大厂出品!超详细的保姆级B端视觉设计教程

大厂出品!超详细的保姆级B端视觉设计教程

今天我们就来个小教程,帮助大家快速了解这类需求的设计方法和制作过程。本文将按照以下内容展开叙述:

  1. 主要软件
  2. 设计拆解
  3. 新建渲染
  4. 进阶材质球制作
  5. 渲染与后期

更多3D软件技巧:

一、主要软件

本次教程需要用到的软件有:CINEMA 4D、渲染器 OctaneRender、JSplacement 和 Photoshop。

大厂出品!超详细的保姆级B端视觉设计教程

首先用到的是 CINEMA 4D。

使用 CINEMA 4D 软件时,需要了解硬边基础建模、简单材质使用和插件工具使用。

大厂出品!超详细的保姆级B端视觉设计教程

二、设计拆解

我们以下图云游戏官网部分视觉为案例,来教大家如何进行设计制作。

大厂出品!超详细的保姆级B端视觉设计教程

首先对这张视觉图进行模块拆解,分为:

  1. 地面部分:电路底板、传输数据线、分散发光体
  2. 装饰物底座
  3. 主视觉装饰

三、新建渲染

拆解之后,可以新建一个渲染页面,从下到上(从大到小)进行建模。尺寸等内容都可以自己定,记得分辨率一定要选 72,选好 OctaneRender 渲染器以及保存路径。

大厂出品!超详细的保姆级B端视觉设计教程

接着,我们在软件里新建一个平面对象,宽度可以设定为 2400*2400,分段 10。

大厂出品!超详细的保姆级B端视觉设计教程

在建完平面之后,我们需要固定一个摄像机位,以便更好地呈现出建模的视觉效果。通常大部分 B 端类型的会选用焦距为 135mm 的电视类型,以及 36 毫米的胶片规格,焦距值为 135mm。

大厂出品!超详细的保姆级B端视觉设计教程

接着可以打开 JSplacement 进行贴图生成,里面的各种参数都可以自己进行调整,调整后生成的贴图也都不相同。

嫌麻烦的话,也可用它的随机生成功能,只需要按“Presets”就可以随机生成贴图了,然后再点击“Save Height”就能生成图片保存到本地。

大厂出品!超详细的保姆级B端视觉设计教程

完成贴图生成后,在 CINEMA 4D 里新建一个材质球,把贴图放在材质球上后,对置换的参数进行调整,参数如图所示。

大厂出品!超详细的保姆级B端视觉设计教程

做完上述步骤后,电路板地面的效果就出来了(如下图预览)。

大厂出品!超详细的保姆级B端视觉设计教程

但这样渲染出的画面会比较暗,因为没有光源,所以我们要使用 OctaneRender 的 HDR 环境功能新建一个光源,并贴上带有科技感冷色系的光照贴图。

大厂出品!超详细的保姆级B端视觉设计教程

这样科技感就出来了~

大厂出品!超详细的保姆级B端视觉设计教程

接下来就是制作一些电路板上的科技氛围装饰,可以新建一个立方体,然后用克隆对象工具,对其进行分布操作。

大厂出品!超详细的保姆级B端视觉设计教程

传输数据线样式的制作,可以使用样条画笔工具进行线条路径绘制,然后用分布晶体进行对象克隆和随机分布实现。

大厂出品!超详细的保姆级B端视觉设计教程

四、进阶材质球制作

对于装饰物底座和主视觉装饰的建模,可以使用基础的建模工具进行搭建,只需要有一点基础就能完成,就不做过多赘述了。

大厂出品!超详细的保姆级B端视觉设计教程

这里我主要介绍下进阶材质球的制作方法,包括:渐变玻璃材质和发光材质;这两种我们都需要在软件的节点编辑器里完成。

  1. 玻璃材质可以按图中的参数进行调节,然后将两种渐变相近的颜色进行添加,就可生成;
  2. 发光材质可以按图中的参数进行调节,然后添加黑体发光和 rgb 颜色&渐变色就可以了,发光的强度通过强度进行控制。

大厂出品!超详细的保姆级B端视觉设计教程

材质球可以直接复用已经在上一步中配置好的。

大厂出品!超详细的保姆级B端视觉设计教程

这里的布光,可以看个人感觉来布,场景不是特别大的,一般 3 个就够,使用 OctaneRender 区域光就好,记得一定勾选表面亮度噢。

大厂出品!超详细的保姆级B端视觉设计教程

五、渲染与后期

对于 OctaneRender 渲染设置,一般都会使用路径追踪模式,主要的参数我都将其已经标好了,当然后期类的一些参数可以根据个人感觉和实际效果进行调整。

大厂出品!超详细的保姆级B端视觉设计教程

等待渲染的过程与渲染速度取决你电脑主机的性能。

大厂出品!超详细的保姆级B端视觉设计教程

最后将已经渲染好的图放入 Photoshop 进行最后的精修和调整,就可以运用到实际的使用场景啦!

大厂出品!超详细的保姆级B端视觉设计教程

六、总结

最后,整个设计流程到此就告一段落了,当然这只是 B 端视觉设计中比较基础的部分,但也是比较重要的内容。

很多大型 B 端视觉场景的搭建同样是以这样的流程制作和设计的,本次教程可以说是给 B 端视觉的初学者提供了引导的作用。

大厂出品!超详细的保姆级B端视觉设计教程

大厂出品!超详细的保姆级B端视觉设计教程

欢迎关注作者微信公众号:「ASAK」

大厂出品!超详细的保姆级B端视觉设计教程

收藏 158
点赞 58

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。