看完之后大家有什么感覺？有沒有給你一種輕盈透亮的舒適感，以及很時(shí)尚前衛(wèi)的感覺。

最近一年這種液態(tài)設(shè)計(jì)風(fēng)格隨著很多商業(yè)設(shè)計(jì)的應(yīng)用慢慢流行了起來。它最大的特點(diǎn)就是超越平面和圖像，帶來一種全新設(shè)計(jì)的觀感，今天我們就來學(xué)習(xí)這樣的形式該如何設(shè)計(jì)。

既然品牌方都不約而同的選擇了這種風(fēng)格，那么其中一定有它過人的地方。

首先它不同于單?形式的呈現(xiàn)?式，吸引?的不單是?字、圖案，更是?字與圖形的完美融合。

其次它可以帶來全新的設(shè)計(jì)感，很多場景案例都在采?三維設(shè)計(jì)來傳達(dá)產(chǎn)品或品牌的功能點(diǎn)，讓設(shè)計(jì)更接近現(xiàn)實(shí)，更接近?活。

液態(tài)設(shè)計(jì)風(fēng)格看似很復(fù)雜，但如果我加以簡化一下，其實(shí)不難發(fā)現(xiàn)，海報(bào)的結(jié)構(gòu)主要分為 3 個(gè)部分組成，背景層、文字層和材質(zhì)層。

背景層簡單來說就是海報(bào)的背景色，液體設(shè)計(jì)風(fēng)格多數(shù)選用黑色或白色居多，漸變色和有彩色較少。但對配色沒有硬性要求。

文字層就是我們對文字信息進(jìn)行整理的圖層，這里值得注意的是，液體風(fēng)格一般選用的是字重較粗的無襯線體和黑體，這樣做是為了文字被材質(zhì)層疊壓的時(shí)候，也能保持良好的識(shí)別度。

最后就是材質(zhì)層了，因?yàn)橐后w風(fēng)格的質(zhì)感是呈現(xiàn)微透明狀態(tài)，給?輕盈透亮的感覺，所以材質(zhì)方面會(huì)選擇折射材質(zhì)。

在日常生活中，我們能接觸的材質(zhì)通常分為三種，漫射材質(zhì)、反射材質(zhì)和折射材質(zhì)。

而折射材質(zhì)又可以分為透明材質(zhì)和半透明材質(zhì)。

常見的透明材質(zhì)有水、亞克力、玻璃、水晶等等，不同的透明物體有著不同的折射率。水的折射率為 1.333，而水晶的折射率可以達(dá)到 2。

折射只發(fā)生在透明和半透明材質(zhì)上，當(dāng)光線照射到水面、玻璃以及其他透明物體時(shí)，光線不但會(huì)發(fā)生反射，還會(huì)發(fā)生折射。折射指的是光從一種介質(zhì)，斜進(jìn)入到另一種介質(zhì)，比如說從空氣進(jìn)入到玻璃，這時(shí)候的傳播方向就會(huì)發(fā)生改變，從而使得光線在玻璃的交界處發(fā)生偏折。

光的折射角度不同，透明物體的折射率也有所不同，從左往右看上面這張圖，水的折射率是 1.333，亞克力的折射率是 1.491，玻璃的折射率是 1.52，水晶的折射率是 2。

這些都是現(xiàn)實(shí)中透明物體的折射率，但是對于液體風(fēng)格設(shè)計(jì)而言，準(zhǔn)確的控制折射率并不是為了更真實(shí)地做出符合該物體的物理屬性，而是控制疊在材質(zhì)下方文字的識(shí)別度。

例如這是水的折射率，為 1.333，折射率并不算高，能看到疊在下方文字的扭曲程度也并不夸張。

如果換成玻璃的折射率，1.52，被疊壓的文字扭曲程度就開始增加，文字的識(shí)別性也有所降低。

再換成折射率為 2 的水晶，文字的識(shí)別性幾乎已經(jīng)沒有了。

這三個(gè)材質(zhì)放在一起其實(shí)用肉眼很難區(qū)分它們的材質(zhì)，所以大家控制折射率的時(shí)候，要把重點(diǎn)放在疊壓文字的識(shí)別性上，而不是這些物體折射率的數(shù)值。

對于透明材質(zhì)，還有一個(gè)不得不提的知識(shí)點(diǎn)就是色散，色散是指復(fù)色光分解為單色光的現(xiàn)象。當(dāng)你發(fā)出所有可見光波長組成的白光時(shí)，顏色會(huì)分散并彼此分離。這就是所謂的“光的色散分離”

例如浮油，肥皂泡等這些表面出現(xiàn)的彩虹色，能讓透明材質(zhì)看起來更加絢麗多彩。

這個(gè)效果可以通過渲染器的色散來控制效果的強(qiáng)弱，數(shù)值越大，效果越強(qiáng)。

這是色散值 0.06 的時(shí)候。

這是色散值 0.1（最大值）的時(shí)候。

看到這，你可能會(huì)覺得只要是帶有透明感的物體都可以拿來使用，別忘了，還有一種是半透明材質(zhì)，因?yàn)槭前胪该鲗傩裕宰R(shí)別性比較低，很少會(huì)運(yùn)用到實(shí)際的案例當(dāng)中，但是如果用來做氛圍或者創(chuàng)意輸出，其實(shí)也是一個(gè)不錯(cuò)的選擇。

半透明材質(zhì)又叫 3s 材質(zhì)，有皮膚、樹葉、蠟、牛奶等等。它們之所以是半透明材質(zhì)，是因?yàn)樗麄兪芄庹丈浜螅瑫?huì)呈現(xiàn)一種半透不透的感覺。

這里利用一個(gè)簡單的文字組來演示一下 3s 材質(zhì)的表現(xiàn)。

3s 材質(zhì)的表現(xiàn)大致就如圖所示，辨識(shí)度很低，除了關(guān)鍵信息外，其他的信息基本都很難傳達(dá)出來，用在宣傳性特別強(qiáng)的海報(bào)的時(shí)候要謹(jǐn)慎選擇。

接下來我們設(shè)計(jì)一個(gè)案例，來看一下透明材質(zhì)在設(shè)計(jì)中的運(yùn)用，這個(gè)展覽的藝術(shù)家們創(chuàng)作的是多感官體驗(yàn)的作品，作品大多數(shù)是關(guān)于感知和生命的觸發(fā)。

大家其實(shí)也能發(fā)現(xiàn)，這一類液體風(fēng)格設(shè)計(jì)的文字排版的層級都相對較少，這是為了避免液體材質(zhì)疊壓在文字上，造成版面雜亂無序的局面。在這里打算只用兩個(gè)文字層級來設(shè)計(jì)這張展覽海報(bào)。

挪動(dòng)一下文字的位置關(guān)系，使文字間產(chǎn)生位置的韻律感和錯(cuò)落感，最后用輔助元素填補(bǔ)一下負(fù)空間，海報(bào)就完成了。

海報(bào)反白，黑色的背景也是適合做透明液體的疊壓。

利用 c4d 和今天所學(xué)的知識(shí)，來做兩個(gè)動(dòng)態(tài)的液體風(fēng)格海報(bào)。第一張海報(bào)運(yùn)用水波紋的動(dòng)態(tài)效果，出發(fā)點(diǎn)也是源于這次展覽對于五感的觸發(fā)，呼應(yīng)主題，來達(dá)到身、心、靈合一。

第二個(gè)海報(bào)則用了一棵樹的生長來展開創(chuàng)作，海報(bào)的主題為 more more more，讓生命在變化之中，重新定義自身與世界的關(guān)系。我選擇樹來做主形象，是因?yàn)闃涞纳鼰o限流動(dòng)，能演繹出一種持續(xù)發(fā)展的動(dòng)態(tài)，隨著時(shí)間，它有它自己生長軌跡。

注：由于教程動(dòng)圖大小限制，建議觀看視頻版：https://v.qq.com/x/page/p3224obc2u7.html

首先打開 c4d，新建一個(gè)平面，具體參數(shù)為寬度 24.8 厘米和高度 35.08 厘米。

然后把平面旋轉(zhuǎn) 90 度，放大到合適的大小。

接著把渲染設(shè)置的尺寸改成 a4 大小，2480 像素 x3508 像素。

新建一個(gè)攝像機(jī)，進(jìn)入攝像機(jī)狀態(tài)。

把焦距改成 135 毫米，這里的操作是讓攝像機(jī)的畸變小一點(diǎn)。

然后把攝像機(jī)旋轉(zhuǎn)的角度都改為 0。

調(diào)整一下視窗位置，讓視窗剛好是海報(bào)尺寸的比例大小。

選擇渲染器的材質(zhì)菜單欄，新建一個(gè)反射材質(zhì)。

在 diffuse 通道上面的 texture，添加一個(gè) image texture 圖層，然后把海報(bào)加載到材質(zhì)球上，接著把材質(zhì)球拖到平面上即可。

把渲染器關(guān)掉，退出攝像機(jī)視角。把 c4d 視窗拖到合適的大小，新建一個(gè)立方體。

立方體的大小比例跟平面一樣，24.8x35.08x2 厘米，然后把立方體放大到跟海報(bào)一樣大小，調(diào)整一下位置。

把立方體的分段改成 100x100x100。

接著在立方體下方新建一個(gè)置換效果器，高度改成-5 厘米，著色器改成顏色。

新建一個(gè)球體，改成合適的大小，放到立方體的前方。

接著把球體拖到置換效果器的衰減上，半徑改成 6 厘米。

放大視窗可以看到，球體在立方體上形成了一個(gè)凹陷。

在衰減上，繼續(xù)新建一個(gè)凍結(jié)域，模式改成拓展，這里新建凍結(jié)域的作用是把剛剛凹陷的部分蔓延出來，半徑跟效果強(qiáng)度是控制蔓延的速度，大家可以自己練習(xí)的時(shí)候改動(dòng)一下，試試效果。

然后再新建一個(gè)延遲域，效果強(qiáng)度改成 40%。播放看一下效果。

最后把凍結(jié)域的混合模式改成添加，延遲域的混合模式改成減去。

剛剛那一步的原理是這樣的，首先黑色的圈代表的是凍結(jié)域產(chǎn)生的凹陷，而紅色代表的是延遲域產(chǎn)生的凹陷。減去模式是用凍結(jié)的區(qū)域減去了延遲的區(qū)域，就會(huì)得到一個(gè)圓環(huán)的形狀，并且慢慢變大。

知道原理后，點(diǎn)下播放按鈕，拖動(dòng)小球看看最終的效果，還不錯(cuò)，有水波紋的感覺了。

接著把原來的置換再復(fù)制一層，高度改成 3。球型域的半徑改成 13。

點(diǎn)擊播放看一下效果，這一步主要是讓球體接觸立方體的時(shí)候有一個(gè)凸面，更接近水波紋的效果。

做完上面的步驟后，把剛剛那兩個(gè)置換的效果器重新命名一下，方便之后的操作。

接著就是給球體做動(dòng)畫了，在 20 幀的地方給球體 z 軸 k 一幀，拖到 60 幀，把球體沿著 z 軸拖到立方體的下方，再 k 一幀。

點(diǎn)擊播放看一下動(dòng)畫，效果已經(jīng)差不多了，在立方體上產(chǎn)生了一個(gè)淺淺的水紋。

以下為重復(fù)“球體1”步驟，可省略不看

然后我們需要重復(fù)之前的操作，做第二個(gè)球體的動(dòng)畫，新建一個(gè)球體，把球體拖到合適的地方，給球體和置換重新命名一下。

把之前的兩個(gè)置換效果器復(fù)制上去，也要重命名一下。把 “球體 1” 的球型域從 “2 置換” 中刪掉，同時(shí)把 “球體 2” 拖到域里面。

接著在 20 幀和 60 幀的地方給“球體 2”k 一個(gè)動(dòng)畫。

看一下動(dòng)畫效果，產(chǎn)生了第二個(gè)水波紋了。

重復(fù)剛剛的步驟，新建一個(gè)球體 3，把球體拖到合適的地方。

復(fù)制之前的兩個(gè)置換效果器，給置換效果器重新命名一下。

接著在 20 幀和 60 幀的地方給“球體 3”k 一個(gè)動(dòng)畫。

做完之后，播放看看效果，這時(shí)候我的電腦開始有點(diǎn)吃不消了，如果大家太卡的話可以先把立方體的分段數(shù)改小一點(diǎn)，等 k 完所有動(dòng)畫再把分段數(shù)加回去。

這時(shí)候可以再新建一個(gè)球體 4，讓畫面的水紋細(xì)節(jié)更多一些。

復(fù)制之前的兩個(gè)置換效果器，給置換效果器重新命名一下。

最后在 20 幀和 60 幀的地方給“球體 4”k 一個(gè)動(dòng)畫，步驟跟“球體 2”是一模一樣。

動(dòng)畫到這里大致就完成了，預(yù)覽看一下效果。

然后回到攝像機(jī)視角，新建一個(gè)透明材質(zhì)，把透明材質(zhì)拖拉到立方體上。

接著把渲染設(shè)置改成光線追蹤。

新建一個(gè) hdri，把 hdri 貼圖加載進(jìn)去。

把 power 改成 12，hdri 的 x 軸跟 y 軸改成 0.04 和 0.3，打光就完成了。

點(diǎn)播放按鈕，實(shí)時(shí)渲染一下動(dòng)畫，看看效果，這是已經(jīng)看到有一個(gè)水波紋產(chǎn)生了

雙擊材質(zhì)球，改一下色散系數(shù)的參數(shù)，讓它表面出現(xiàn)一層彩虹色。

快捷鍵 ctrl+d，把動(dòng)畫幀率改成 25，打開渲染設(shè)置，輸出的幀率同樣改成 25，點(diǎn)擊保存，選擇文件輸出的路徑，點(diǎn)擊 oc 渲染器，同樣選擇文件輸出的路徑 ，最后返回到輸出，把幀范圍改成全部幀，就可以開始渲染了。

今天的內(nèi)容就到這了，給大家總結(jié)一下，最近流行的液體設(shè)計(jì)風(fēng)格，它好玩的地方在于把?字和圖形的完美融合在一起，給畫面帶來形式感的同時(shí)，讓觀者也會(huì)感覺到新鮮感，產(chǎn)生陌生化的效應(yīng)，當(dāng)然，如果變成不分青紅皂白，無論什么項(xiàng)目都用，也是不可取的，所有的技法和創(chuàng)意都是為設(shè)計(jì)本身服務(wù)的。最后，有 c4d 基礎(chǔ)的小伙伴不妨可以跟著教程自己做一遍，工程還有貼圖我會(huì)放到附件分享給大家，我們下期再見。

歡迎關(guān)注研習(xí)設(shè)的微信公眾號：「Yanxishe2017」