保姆級B端視覺設(shè)計教程
點擊 ▲ 三分設(shè) 關(guān)注，和 10 萬設(shè)計師一起成長
三分設(shè) x ASAK
相信廣大設(shè)計師朋友在工作中總會遇到一些B端類的視覺需求，通常是UI的裝飾氛圍模塊以及UI視覺卡片。
下圖為云游戲官網(wǎng)和游戲安全官網(wǎng)的部分視覺設(shè)計。
今天我們就來個小教程，幫助大家快速了解這類需求的設(shè)計方法和制作過程。本文將按照以下內(nèi)容展開敘述：
1.主要軟件
2.設(shè)計拆解
3.新建渲染
4.進(jìn)階材質(zhì)球制作
5.渲染與后期
01 主要軟件
本次教程需要用到的軟件有：CINEMA 4D 、渲染器 OctaneRender 、JSplacement 和 Photoshop。
首先用到的是 CINEMA 4D 。
使用 CINEMA 4D 軟件時，需要了解硬邊基礎(chǔ)建模、簡單材質(zhì)使用和插件工具使用。
02 設(shè)計拆解
我們以下圖云游戲官網(wǎng)部分視覺為案例，來教大家如何進(jìn)行設(shè)計制作。
首先對這張視覺圖進(jìn)行模塊拆解，分為：
1.地面部分：電路底板、傳輸數(shù)據(jù)線、分散發(fā)光體
2.裝飾物底座
3.主視覺裝飾
03新建渲染
拆解之后，可以新建一個渲染頁面，從下到上（從大到?。┻M(jìn)行建模。尺寸等內(nèi)容都可以自己定，記得分辨率一定要選 72 ，選好 OctaneRender 渲染器以及保存路徑。
接著，我們在軟件里新建一個平面對象，寬度可以設(shè)定為 2400*2400 ，分段 10 。
在建完平面之后，我們需要固定一個攝像機位，以便更好地呈現(xiàn)出建模的視覺效果。通常大部分B端類型的會選用焦距為 135mm 的電視類型，以及 36 毫米的膠片規(guī)格，焦距值為 135mm 。
接著可以打開 JSplacement 進(jìn)行貼圖生成，里面的各種參數(shù)都可以自己進(jìn)行調(diào)整，調(diào)整后生成的貼圖也都不相同。
嫌麻煩的話，也可用它的隨機生成功能，只需要按“ Presets ”就可以隨機生成貼圖了，然后再點擊“ Save Height ”就能生成圖片保存到本地。
完成貼圖生成后，在 CINEMA 4D 里新建一個材質(zhì)球，把貼圖放在材質(zhì)球上后，對置換的參數(shù)進(jìn)行調(diào)整，參數(shù)如圖所示。
做完上述步驟后，電路板地面的效果就出來了（如下圖預(yù)覽）。
但這樣渲染出的畫面會比較暗，因為沒有光源，所以我們要使用 OctaneRender 的 HDR 環(huán)境功能新建一個光源，并貼上帶有科技感冷色系的光照貼圖。
這樣科技感就出來了～
接下來就是制作一些電路板上的科技氛圍裝飾，可以新建一個立方體，然后用克隆對象工具，對其進(jìn)行分布操作。
傳輸數(shù)據(jù)線樣式的制作，可以使用樣條畫筆工具進(jìn)行線條路徑繪制，然后用分布晶體進(jìn)行對象克隆和隨機分布實現(xiàn)。
04 進(jìn)階材質(zhì)球制作
對于裝飾物底座和主視覺裝飾的建模，可以使用基礎(chǔ)的建模工具進(jìn)行搭建，只需要有一點基礎(chǔ)就能完成，就不做過多贅述了。
這里我主要介紹下進(jìn)階材質(zhì)球的制作方法，包括：漸變玻璃材質(zhì)和發(fā)光材質(zhì)；這兩種我們都需要在軟件的節(jié)點編輯器里完成。
1.玻璃材質(zhì)可以按圖中的參數(shù)進(jìn)行調(diào)節(jié)，然后將兩種漸變相近的顏色進(jìn)行添加，就可生成；
2.發(fā)光材質(zhì)可以按圖中的參數(shù)進(jìn)行調(diào)節(jié)，然后添加黑體發(fā)光和 rgb 顏色&漸變色就可以了，發(fā)光的強度通過強度進(jìn)行控制。
材質(zhì)球可以直接復(fù)用已經(jīng)在上一步中配置好的。
這里的布光，可以看個人感覺來布，場景不是特別大的，一般 3 個就夠，使用 OctaneRender 區(qū)域光就好，記得一定勾選表面亮度噢。
05 渲染與后期
對于 OctaneRender 渲染設(shè)置，一般都會使用路徑追蹤模式，主要的參數(shù)我都將其已經(jīng)標(biāo)好了，當(dāng)然后期類的一些參數(shù)可以根據(jù)個人感覺和實際效果進(jìn)行調(diào)整。
等待渲染的過程與渲染速度取決你電腦主機的性能。
最后將已經(jīng)渲染好的圖放入 Photoshop 進(jìn)行最后的精修和調(diào)整，就可以運用到實際的使用場景啦！
總結(jié)
最后，整個設(shè)計流程到此就告一段落了，當(dāng)然這只是B端視覺設(shè)計中比較基礎(chǔ)的部分，但也是比較重要的內(nèi)容。
很多大型B端視覺場景的搭建同樣是以這樣的流程制作和設(shè)計的，本次教程可以說是給B端視覺的初學(xué)者提供了引導(dǎo)的作用。
