相信廣大設(shè)計(jì)師朋友在工作中總會(huì)遇到一些 B 端類的視覺需求，通常是 UI 的裝飾氛圍模塊以及 UI 視覺卡片。

下圖為云游戲官網(wǎng)和游戲安全官網(wǎng)的部分視覺設(shè)計(jì)。

今天我們就來個(gè)小教程，幫助大家快速了解這類需求的設(shè)計(jì)方法和制作過程。本文將按照以下內(nèi)容展開敘述：

1. 主要軟件
2. 設(shè)計(jì)拆解
3. 新建渲染
4. 進(jìn)階材質(zhì)球制作
5. 渲染與后期

一、主要軟件

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

首先用到的是 CINEMA 4D。

使用 CINEMA 4D 軟件時(shí)，需要了解硬邊基礎(chǔ)建模、簡(jiǎn)單材質(zhì)使用和插件工具使用。

二、設(shè)計(jì)拆解

我們以下圖云游戲官網(wǎng)部分視覺為案例，來教大家如何進(jìn)行設(shè)計(jì)制作。

首先對(duì)這張視覺圖進(jìn)行模塊拆解，分為：

1. 地面部分：電路底板、傳輸數(shù)據(jù)線、分散發(fā)光體
2. 裝飾物底座
3. 主視覺裝飾

三、新建渲染

拆解之后，可以新建一個(gè)渲染頁(yè)面，從下到上（從大到?。┻M(jìn)行建模。尺寸等內(nèi)容都可以自己定，記得分辨率一定要選 72，選好 OctaneRender 渲染器以及保存路徑。

接著，我們?cè)谲浖镄陆ㄒ粋€(gè)平面對(duì)象，寬度可以設(shè)定為 2400*2400，分段 10。

在建完平面之后，我們需要固定一個(gè)攝像機(jī)位，以便更好地呈現(xiàn)出建模的視覺效果。通常大部分 B 端類型的會(huì)選用焦距為 135mm 的電視類型，以及 36 毫米的膠片規(guī)格，焦距值為 135mm。

接著可以打開 JSplacement 進(jìn)行貼圖生成，里面的各種參數(shù)都可以自己進(jìn)行調(diào)整，調(diào)整后生成的貼圖也都不相同。

嫌麻煩的話，也可用它的隨機(jī)生成功能，只需要按"Presets"就可以隨機(jī)生成貼圖了，然后再點(diǎn)擊"Save Height"就能生成圖片保存到本地。

完成貼圖生成后，在 CINEMA 4D 里新建一個(gè)材質(zhì)球，把貼圖放在材質(zhì)球上后，對(duì)置換的參數(shù)進(jìn)行調(diào)整，參數(shù)如圖所示。

做完上述步驟后，電路板地面的效果就出來了（如下圖預(yù)覽）。

但這樣渲染出的畫面會(huì)比較暗，因?yàn)闆]有光源，所以我們要使用 OctaneRender 的 HDR 環(huán)境功能新建一個(gè)光源，并貼上帶有科技感冷色系的光照貼圖。

這樣科技感就出來了～

接下來就是制作一些電路板上的科技氛圍裝飾，可以新建一個(gè)立方體，然后用克隆對(duì)象工具，對(duì)其進(jìn)行分布操作。

傳輸數(shù)據(jù)線樣式的制作，可以使用樣條畫筆工具進(jìn)行線條路徑繪制，然后用分布晶體進(jìn)行對(duì)象克隆和隨機(jī)分布實(shí)現(xiàn)。

四、進(jìn)階材質(zhì)球制作

對(duì)于裝飾物底座和主視覺裝飾的建模，可以使用基礎(chǔ)的建模工具進(jìn)行搭建，只需要有一點(diǎn)基礎(chǔ)就能完成，就不做過多贅述了。

這里我主要介紹下進(jìn)階材質(zhì)球的制作方法，包括：漸變玻璃材質(zhì)和發(fā)光材質(zhì)；這兩種我們都需要在軟件的節(jié)點(diǎn)編輯器里完成。

1. 玻璃材質(zhì)可以按圖中的參數(shù)進(jìn)行調(diào)節(jié)，然后將兩種漸變相近的顏色進(jìn)行添加，就可生成；
2. 發(fā)光材質(zhì)可以按圖中的參數(shù)進(jìn)行調(diào)節(jié)，然后添加黑體發(fā)光和 rgb 顏色&漸變色就可以了，發(fā)光的強(qiáng)度通過強(qiáng)度進(jìn)行控制。

材質(zhì)球可以直接復(fù)用已經(jīng)在上一步中配置好的。

這里的布光，可以看個(gè)人感覺來布，場(chǎng)景不是特別大的，一般 3 個(gè)就夠，使用 OctaneRender 區(qū)域光就好，記得一定勾選表面亮度噢。

五、渲染與后期

對(duì)于 OctaneRender 渲染設(shè)置，一般都會(huì)使用路徑追蹤模式，主要的參數(shù)我都將其已經(jīng)標(biāo)好了，當(dāng)然后期類的一些參數(shù)可以根據(jù)個(gè)人感覺和實(shí)際效果進(jìn)行調(diào)整。

等待渲染的過程與渲染速度取決你電腦主機(jī)的性能。

最后將已經(jīng)渲染好的圖放入 Photoshop 進(jìn)行最后的精修和調(diào)整，就可以運(yùn)用到實(shí)際的使用場(chǎng)景啦！

六、總結(jié)

最后，整個(gè)設(shè)計(jì)流程到此就告一段落了，當(dāng)然這只是 B 端視覺設(shè)計(jì)中比較基礎(chǔ)的部分，但也是比較重要的內(nèi)容。

很多大型 B 端視覺場(chǎng)景的搭建同樣是以這樣的流程制作和設(shè)計(jì)的，本次教程可以說是給 B 端視覺的初學(xué)者提供了引導(dǎo)的作用。

作者：ASAK