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

下圖為云游戲官網和游戲安全官網的部分視覺設計。

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

1. 主要軟件
2. 設計拆解
3. 新建渲染
4. 進階材質球制作
5. 渲染與后期

一、主要軟件

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

首先用到的是 CINEMA 4D。

使用 CINEMA 4D 軟件時，需要了解硬邊基礎建模、簡單材質使用和插件工具使用。

二、設計拆解

我們以下圖云游戲官網部分視覺為案例，來教大家如何進行設計制作。

首先對這張視覺圖進行模塊拆解，分為：

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

三、新建渲染

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

接著，我們在軟件里新建一個平面對象，寬度可以設定為 2400*2400，分段 10。

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

接著可以打開 JSplacement 進行貼圖生成，里面的各種參數都可以自己進行調整，調整后生成的貼圖也都不相同。

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

完成貼圖生成后，在 CINEMA 4D 里新建一個材質球，把貼圖放在材質球上后，對置換的參數進行調整，參數如圖所示。

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

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

這樣科技感就出來了～

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

傳輸數據線樣式的制作，可以使用樣條畫筆工具進行線條路徑繪制，然后用分布晶體進行對象克隆和隨機分布實現。

四、進階材質球制作

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

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

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

材質球可以直接復用已經在上一步中配置好的。

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

五、渲染與后期

對于 OctaneRender 渲染設置，一般都會使用路徑追蹤模式，主要的參數我都將其已經標好了，當然后期類的一些參數可以根據個人感覺和實際效果進行調整。

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

最后將已經渲染好的圖放入 Photoshop 進行最后的精修和調整，就可以運用到實際的使用場景啦！

六、總結

最后，整個設計流程到此就告一段落了，當然這只是 B 端視覺設計中比較基礎的部分，但也是比較重要的內容。

很多大型 B 端視覺場景的搭建同樣是以這樣的流程制作和設計的，本次教程可以說是給 B 端視覺的初學者提供了引導的作用。

作者：ASAK