保姆級B端視覺設(shè)計教程

點擊 ▲ 三分設(shè) 關(guān)注，和 10 萬設(shè)計師一起成長

三分設(shè) x ASAK

正文共：1866 字 28 圖 預(yù)計閱讀時間：6 分鐘

相信廣大設(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新建渲染

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

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

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

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

嫌麻煩的話，也可用它的隨機(jī)生成功能，只需要按“ Presets ”就可以隨機(jī)生成貼圖了，然后再點擊“ 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)行對象克隆和隨機(jī)分布實現(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ā)光的強(qiáng)度通過強(qiáng)度進(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ī)的性能。

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

總結(jié)

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

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

—— END ——

我們相信設(shè)計師和創(chuàng)造者一樣是思想家

三分設(shè)

一個開放的設(shè)計師共創(chuàng)學(xué)習(xí)型社區(qū)

助力全球 1 億設(shè)計師成長

好書推薦

深度鏈接

歡迎添加 ??  星標(biāo) · 獲取每天推薦知識分享

每天閱讀充電 · 養(yǎng)成終身學(xué)習(xí)

「資訊」「文章」「活動」「招聘」「課程」

共創(chuàng)計劃·成員招募

「合伙人計劃」

「翻閱計劃」

「分享行動」

「項目共創(chuàng)」

「新媒體聯(lián)盟」

??????

期待與更多優(yōu)秀產(chǎn)品設(shè)計師一起成長

掃碼進(jìn)群

星球共創(chuàng)資料庫

全年住主力設(shè)友建立設(shè)計知識體系

「體系化知識研討」

「設(shè)計·管理書籍共讀」「線上職場討論」

「實戰(zhàn)項目共創(chuàng)」「大會活動交流」

分享設(shè)計/管理/職場/心得，定期直播，答疑解惑

↓↓↓點開『閱讀原文』，關(guān)注星球資料庫