亚洲综合色婷婷,99久女女精品视频在线观看,91久久免费视频

他的龙根本太大了_动漫美女被吸乳视频漫画_欧美xxxx性疯狂bbbb_天天看天天爽天天摸天天添

如何從零開始完成一套3Ｄ圖標(biāo)設(shè)計？

2020-6-6 資深UI設(shè)計者

背景

QQ 游戲中心經(jīng)過設(shè)計改版之后，我們重新設(shè)定了整體的世界觀——多彩的游戲宇宙。并且對多個模塊及內(nèi)容進行了新的設(shè)計升級，其中也包括重要的圖標(biāo)圖形。

1. 延展思考

因此基于目前較為完整的圖標(biāo)圖形，希望可以拓展出更多不一樣的設(shè)計內(nèi)容，并且可以應(yīng)用在不同的位置，例如空白頁、運營內(nèi)容、背景等等。

2. 問題分析

基于目前的圖形可以很明顯的得到 2 個問題：

圖標(biāo)的圖形整體相對簡單，延展使用比較受限；
2D 圖標(biāo)的視覺沖擊力較弱，較難滿足設(shè)計氛圍的表現(xiàn)。

3. 設(shè)計啟發(fā)

3D作為 2020 的主流設(shè)計趨勢之一，可以很好地表達設(shè)計氛圍。因此想嘗試跨次元的設(shè)計方式，從 3D 圖形的角度去思考，嘗試更多可能性。

下面主要是分享我在制作 3D 圖標(biāo)中的一些方法和流程，以及 2D 與 3D 圖形設(shè)計中思考的差異性，希望可以跟大家互相學(xué)習(xí)，一起探討這方面的設(shè)計。

整體的流程及軟件

雖然是 3D 的圖標(biāo)，但實際上使用到的軟件包括有：Cinema 4D（C4D）、Sketch、Photoshop（PS）、illustrator（AI）。

整體的大概流程：

Sketch：繪制 2D 圖標(biāo)；
AI：轉(zhuǎn)換路徑（C4D 能夠識別 AI 8.0 版本的路徑）；
C4D：建模、渲染、動畫；
PS：后期輸出的調(diào)整，包括飽和度、亮度、裁切等；
AE：最后合成所有動畫，配置音效，最后輸出完整視頻。

2D向3D轉(zhuǎn)化的基本原則

3D 與 2D 最大的差別在于多一個維度來表達圖形，因此我們在 2D 向 3D 轉(zhuǎn)化的過程中，需要思考一些基本的原則，并且結(jié)合這些規(guī)則，降低 3D 圖標(biāo)與 2D 圖標(biāo)違和感。在這次的 3D 圖標(biāo)中我總結(jié)了以下幾條基本規(guī)則。

1. 圓變球

在 3D 軟件中表達圓有 2 種方式：球體、圓柱體。在實際的設(shè)計中，我們需要根據(jù)實際情況判斷是否變成球體或者圓柱體，這里建議單體呈現(xiàn)的圓形設(shè)計成球體，在這種情況下球體相比圓柱體更能表達圓形的視覺感受。

例如下面氣泡的例子，球體化的表現(xiàn)比圓柱體化的表現(xiàn)更加飽滿，光影效果更加豐富。

2. 方變塊

與上面的規(guī)則比較接近。當(dāng)我們在 2D 圖標(biāo)中使用矩形之類的圖形，建議使用立方體來表達。優(yōu)點：立方體可以增加圖標(biāo)上的細節(jié)表現(xiàn)；增加厚度更有利于光影的表達。

例如下面禮物的圖標(biāo)，我們在實際的 3D 場景下應(yīng)該更貼合現(xiàn)實生活中的認(rèn)知，設(shè)計成禮物盒子的效果。

3. 結(jié)合實際認(rèn)知

除以上的 2 種建議之外，我們在實際建模的時候還需要結(jié)合實際認(rèn)知而定。例如金幣、游戲卡的設(shè)計應(yīng)該是帶有厚度的片形；錢包設(shè)計成折疊的效果。

4. 適當(dāng)簡化圖形

2D 圖標(biāo)向 3D 圖標(biāo)的轉(zhuǎn)換過程中，需要適當(dāng)進行簡化，一些不必要的內(nèi)容可以適當(dāng)進行刪減。主要的目的是：

降低模型的復(fù)雜程度，「過度細致」的模型在實際渲染中可能出現(xiàn)反效果；
減少面和減少光的互相反射作用，提升視覺的簡潔性。

5. 增強空間思維

2D 的圖標(biāo)只有一個平面，因此大部分情況下是一種「紙片性」的思維，常規(guī)的 2D 向 3D 的轉(zhuǎn)換思維是增加厚度，但實際上出來的效果并不理想。因此在轉(zhuǎn)換的過程中，需要使用空間的思維去思考，在 3 維的空間中應(yīng)該是怎么樣的。例如下載和收件箱的圖標(biāo)，常規(guī)的思維可能是在 2D 的圖標(biāo)上增加厚度，但轉(zhuǎn)換成空間思維就是讓其具有立體感和空間感的形體。

6. 圖標(biāo)狀態(tài)補充

在實際建模的中會發(fā)現(xiàn)，很多模型在靜態(tài)下是可以進行簡單處理的，但結(jié)合動態(tài)或?qū)嶋H認(rèn)知，就需要相關(guān)細節(jié)狀態(tài)補充。例如禮物和寶箱圖標(biāo)的開蓋效果，因此把實際的蓋子和盒子/箱子的模型做出來，以便于動畫的實際表達。

基于圖標(biāo)的圖形分類

在進入 C4D 之前，需要清楚不同圖形可以使用什么方式建模，因此我們可以進行一個簡單的分類，分為：常規(guī)圖形和異形。兩種圖形在建模中的方式會有一些小差異，當(dāng)然一個圖標(biāo)也可能包含這兩種類型，因此實際操作中可以靈活處理。

1. 常規(guī)形：使用基礎(chǔ)物體建模

部分簡單的有規(guī)則的圖形，可以直接使用 C4D 的基礎(chǔ)物體（例如：立方體、球體、柱狀體、錐體等），通過對基礎(chǔ)物體的調(diào)整后得到模型，例如下面的圖形。

案例展示

2. 異形：AI路徑+擠出

在實際操作的過程中發(fā)現(xiàn)部分模型較難通過基礎(chǔ)形調(diào)整得到，或是直接建模會比較耗時。因此我們可以導(dǎo)入 AI 路徑再擠出的方式來得到我們的模型。例如下面的圖形

案例展示

建模實操

基于以上的以上 2 種類型的圖形，這里分享一下制作的過程和心得。可能不夠全面，但希望大家可以一起來補充互相學(xué)習(xí)。

1. 對齊中心點

基礎(chǔ)建模對齊中心軸點是一切開始的重中之重，這里會涉及到很多后續(xù)的調(diào)整和其他命令的應(yīng)用（例如擠出、對稱等命令）。例如一些中高階的人物建模也是非常依賴中心點對齊來實現(xiàn)對稱命令的。

2. 結(jié)合圖像

在 C4D 視圖本身具有多視圖，可以結(jié)合不同視圖導(dǎo)入不同視角的平面結(jié)構(gòu)進行制作，常見情況下的建模可以導(dǎo)入三視圖（例如角色、人物之類的）。而圖標(biāo)相對來說是很簡單的，所以這里只應(yīng)用正面視圖即可，其他的視角可以自行腦補后制作。

結(jié)合圖像的好處：

更加直觀地看到圖標(biāo)造型，提升建模效率；
對于模型尺寸的把握更加明確，我們可以依據(jù)實際設(shè)計的大小，在 C4D 進行同樣的設(shè)定；
方便后續(xù)路徑對齊的使用（若導(dǎo)入路徑未對齊到中心點，可以通過手動調(diào)整）

操作流程：正視圖下快捷鍵 shift+V 調(diào)出視圖背景——選擇背景——添加圖像。或在視圖選項中調(diào)出，然后配置即可。

3. 結(jié)合路徑

如上圖標(biāo)類型中的描述，部分異形的圖標(biāo)如果直接在 C4D 中繪制會相對耗時，因此我們可以結(jié)合路徑的方式，再使用擠出的命令來實現(xiàn)我們想要的模型，這樣可以大大提升異形物體建模的效率。

C4D 中對 AI 的圖層只會讀取顏色的邊緣，然后生成路徑。因此在 AI 中編輯的路徑，依據(jù)實際的情況選擇填充或者描邊，然后再拖拽進 C4D。如下產(chǎn)生的效果對比，左邊為填充圖形，右邊為描邊圖形。

操作流程：使用 AI 導(dǎo)出 8.0 版本的路徑——拖拽進 C4D——添加擠出命令——設(shè)置擠出高度及封頂樣式。

4. 使用變形器

一些簡單的形變可以通過變形器的應(yīng)用，得到我們想要的造型。例如下面的案例，外星人臉是在圓形的基礎(chǔ)上使用 FFD 進行調(diào)整，而寶箱則在方形的基礎(chǔ)上使用錐化來達到圓弧的效果。

材質(zhì)及布光

C4D 的渲染效果主要是依賴于材質(zhì)和燈光的配合，熟練者往往可以依靠經(jīng)驗有效率的制作，但我們也可以通過鍛煉總結(jié)出一些常用的材質(zhì)參數(shù)或者布光的位置來提率。因此我也從這次的 3D 圖標(biāo)制作中總結(jié)了一套關(guān)于材質(zhì)和布光的方法。

1. 全局光照與天空配合

C4D 場景的主光源我們可以通過全局光照+天空的方式來營造整體的氛圍，這組光的特點在于具有比較柔和的效果，并且模擬自然的環(huán)境光效。

全局光照開啟后，需要依賴燈光、天空光來對物體進行照射，如果設(shè)定后未增加燈光或者天空，在渲染時只能渲染出一片黑色。（全局光照——主要是模擬真實的光照效果，通過光源投射到物體上再經(jīng)過無數(shù)次的反射和折射出來的效果，因此也能解釋為什么只加全局光照渲染不出來內(nèi)容。）

操作流程：渲染設(shè)置——效果——全局光照

添加天空增加天空作為基礎(chǔ)光照補充

操作流程：地面快捷入口——選擇天空——添加材質(zhì)球——勾選發(fā)光——添加 HDR 貼圖。

下面通過一些案例對比來看看全局光照及天空的對比效果

全局光照-開和關(guān)的差異

從下面的案例我們可以明顯看到差別，全局光照關(guān)閉后的圖標(biāo)相對暗淡一些，整體圖標(biāo)的光反射也相對減弱了許多。

有無天空的差異

天空有助于增強圖標(biāo)的光感，添加天空后整體圖標(biāo)的細節(jié)和質(zhì)感也相對更加豐富。相對，無天空整體圖標(biāo)質(zhì)感則有所下降。

天空是否增加HDR貼圖的差異

添加 HDR 貼圖可以增強場景內(nèi)物體的環(huán)境反射，讓物體材質(zhì)更加豐富增強細節(jié)質(zhì)感。在一些強反射的場景下非常依賴 HDR 貼圖的使用。從以下案例對比，可以明顯看到差異性。

2. 燈光分布

整體添加三盞燈光來營造整體的場景氛圍。主要分為：主光（最強）、補光（增強陰影面的亮度）、背光（補充背面環(huán)境的光源，增強環(huán)境光氛圍，勾勒輪廓）。在實際的場景中可以根據(jù)實際的反射效果和氛圍，調(diào)整燈光的位置、與物體的間距、明暗度。

燈光對于物體的作用會隨著顏色的差異，產(chǎn)生的光亮度也會有所差異，因此在實際的使用過程中，對于燈光的位置、反射的細節(jié)都可以進行微調(diào)來達到最優(yōu)的效果。

色相的對比：不同色相在同樣的燈光作用下產(chǎn)生的效果具有稍微較小。

明暗的對比：深色和淺色在同樣的燈光作用下產(chǎn)生的效果差別較大。

實際案例對比：從下面的實際案例對比可以明顯看出同樣燈光下不同色相的明顯差別，綠色的兩部產(chǎn)生過度曝光。因此可以通過調(diào)整燈光的距離或者亮度來解決這一問題（如上面燈光分布建議）。

3. 物體材質(zhì)

3D 圖標(biāo)由于相對簡單，材質(zhì)上主要使用顏色和反射的配合就可以得到不錯的質(zhì)感。當(dāng)然如果希望在質(zhì)感表現(xiàn)上更加豐富，亦可考慮增加其他的內(nèi)容項來進行補充

顏色的設(shè)定

圖標(biāo)的顏色基本上與原圖標(biāo)的顏色保持一致，但部分顏色但實際渲染效果會存在些許差異，因此我們在材質(zhì)上也可以根據(jù)視覺效果進行微調(diào)，視覺上保持統(tǒng)一的顏色感受。例如禮物的圖標(biāo)，如果按原來的顏色，亮部會過渡曝光，因此適當(dāng)提高了亮部顏色的飽和度。

顏色偏差

在 3D 的場景內(nèi)是通過各種光與顏色的反射而成的，因此即便同樣的顏色，在實際渲染出來的 3D 圖標(biāo)和 2D 圖標(biāo)也會存在一定顏色偏差。

4. 反射的設(shè)定

反射是本次 3D 圖標(biāo)中材質(zhì)非常重要的一環(huán)，基本的效果都是來源于對反射的設(shè)定。整體主要設(shè)定了反射的類型、粗糙度、反射強度、高光強度、層遮罩的顏色。由于圖標(biāo)的顏色并不完全一致，因此在粗糙度、反射強度、高光強度是一組動態(tài)的參數(shù)。

參數(shù)變化的對比

如下面的案例，針對不同顏色的圖標(biāo)在粗糙度、反射強度、高光強度上都有差異性，因此不是說設(shè)定好一組參數(shù)之后就那個完全適用所有的顏色，因此這里會根據(jù)實際情況調(diào)整，但整體的視覺效果保持一致。

層遮罩的設(shè)定差異

除了基礎(chǔ)的反射類型及參數(shù)，還需要在層遮罩中添加菲涅耳來增強反射的豐富度。默認(rèn)的菲涅爾是一組黑白的顏色材質(zhì)，我們可以通過調(diào)整暗部的顏色來增強圖標(biāo)的顏色飽和度和豐富度，如下案例對比。

動效設(shè)計

靜態(tài)的 3D 圖標(biāo)顯得精致，增加動效之后的 3D 圖標(biāo)則除精致外，還更加富有趣味性和新鮮感。3D 的動效與 2D 有著明顯的差別，可以更多維度地思考物體的運動軌跡、變化方式。

1. 動效圖標(biāo)分類

首先我們需要根據(jù)不同造型對需要制作動效的圖標(biāo)進行簡單的分類，這個分類的主要作用在于明確不同圖標(biāo)的動效設(shè)計方式，為動效的設(shè)計方式進行鋪墊。根據(jù)已有的圖標(biāo)劃分為：單體形、組合型、拼裝形。

單體形

圖標(biāo)以單個或單組形體呈現(xiàn)，或者整體造型屬于某個已存在的事物或者形體，整體圖形內(nèi)容具有不可切割性。

組合型

圖標(biāo)通過兩組或兩組以上的圖形內(nèi)容組合而成，圖標(biāo)由主形（圖標(biāo)實際的外輪廓造型）和點綴圖形（用于圖標(biāo)表意或者提升圖形內(nèi)涵）組合而成的圖標(biāo)，圖標(biāo)可進行拆分或者重組后形成動效。

拼裝形

圖標(biāo)本身可能在現(xiàn)實中不存在的事物或物體，通過創(chuàng)意思考而得到的圖形，圖標(biāo)的動效更具有可發(fā)散性和可重塑性。

2. 動效的表現(xiàn)方式

結(jié)合上面的類型差，在設(shè)計動效的時候也會稍稍不同。重點在于表達不同的圖標(biāo)具有的特性，因此我們可以根據(jù)這些特性去設(shè)計圖標(biāo)的動畫方式。

自體運動

對應(yīng)單體圖形，圖標(biāo)動效通過自身的位移、旋轉(zhuǎn)、形變而產(chǎn)生，這類圖標(biāo)的動效比較靠近現(xiàn)實生活中接觸的感知或圖形動效本身具有普適性認(rèn)知。例如火箭升空、UFO 飛碟、放禮炮、開寶箱等。

組合運動

對應(yīng)組合圖形和拼裝圖形，多圖形運動組合而成，圖標(biāo)的多個部件可從不同軸向開始進行不同的軌跡運動，最終進行完整的圖標(biāo)融合。各個部件本身可能也存在位移、旋轉(zhuǎn)、形變等動效，可以更大程度豐富圖標(biāo)的動效表現(xiàn)。

部件運動

整體動效相比前面兩種類型較為簡單，通過某個圖標(biāo)上的部件運動來表達動效的內(nèi)容，因此這個部件需要是圖標(biāo)上較為明顯的圖標(biāo)特征，這樣更能讓人具有記憶點。

音效設(shè)計

音效是這次 3D 圖標(biāo)設(shè)計的點睛之筆，結(jié)合音效可以更加豐富地表達圖標(biāo)動效的趣味性。不同的圖標(biāo)動畫反饋出來的音效是不一樣的，因此賦予對應(yīng)的音效反饋才是更合理的表達。

1. 選擇音效

在實際的配置音效的過程中發(fā)現(xiàn)，部分圖標(biāo)比較難找到相關(guān)聯(lián)的音效。但我們可以通過較為類似或者可以表達出該圖標(biāo)動畫過程中的聲音反饋的音效。例如活動小禮炮用的是開葡萄酒塞的聲音，開寶箱用的是開門的聲音，飛碟（UFO）用的是一組電子音效等等，并且從相關(guān)聲音中竊取其中一段需要的。