經(jīng)常瀏覽Dribbble和Behance的朋友可能會(huì)注意到，最近“低面建?！痹O(shè)計(jì)風(fēng)格異?；鸨３司W(wǎng)上的圖形設(shè)計(jì)和動(dòng)效設(shè)計(jì)，現(xiàn)實(shí)中的雜志、電視中這種風(fēng)格也多有體現(xiàn)。這種設(shè)計(jì)風(fēng)格的特點(diǎn)是低細(xì)節(jié)，面又多又小，高度渲染，經(jīng)常配以柔光效果。

寂寞星球 by 雷老虎

其實(shí)，這種設(shè)計(jì)風(fēng)格在早期計(jì)算機(jī)建模和動(dòng)效中就被廣泛采用，在快要被遺忘之時(shí)，突然又流行了一把。

本文將著重探索這種低面建模設(shè)計(jì)風(fēng)格的外觀，展示一些低面建模設(shè)計(jì)案例。

3D建模？低面建模？

所有的3D建模都需要借力多邊形。模型的多邊形越多，模型越具細(xì)節(jié)。通常會(huì)柔化多邊形的領(lǐng)教，讓物體的外觀看起來(lái)更和諧。

低面建模設(shè)計(jì)不同，建模階段使用的多邊形較少，這樣最后便會(huì)呈現(xiàn)一種簡(jiǎn)潔、抽象的效果。更注重渲染，而不是更注重柔化多邊形。打造一種封閉、冷硬的感覺(jué)。

然而，上述講的這些并不意味著低面建模建模的作品分辨率低。低面建模設(shè)計(jì)使用了精致的渲染技術(shù)、光照效果、隱形效果，能夠?qū)⒑?jiǎn)單的物體的實(shí)體性質(zhì)高度還原。（只不過(guò)外形上有所欠缺）結(jié)果便是，低面建模設(shè)計(jì)有點(diǎn)像現(xiàn)實(shí)生活中的手工藝品，感覺(jué)很復(fù)古。

低面建模設(shè)計(jì)代表人物是Timothy J.Reynolds。以及Jeremiah Shaw和Danny Jones的Tumblr站點(diǎn)Geo A Day,他們都極力推崇低面建模設(shè)計(jì)美學(xué)。

Timothy J.Reynolds作品賞析：

Geo A Day,作品賞析：

用Jeremy Kool的The Paper Fox來(lái)形容這種設(shè)計(jì)風(fēng)格，再貼切不過(guò)了（下圖）。這個(gè)作品成為iOS上的一款交互性極高的應(yīng)用。Jeremy Kool模擬了折紙風(fēng)格。加入了褶皺的紙質(zhì)感，而邊緣非常的纖細(xì)。

而在Kristina Macurova的作品中，你可以感受到景深，提高了模型的實(shí)體感?？梢栽阽R頭設(shè)置中調(diào)整景深，也可以后期用PS調(diào)整。

為什么低面建模設(shè)計(jì)火了？

喜歡低面建模設(shè)計(jì)的設(shè)計(jì)師似乎很不欣賞計(jì)算機(jī)建模，因?yàn)橛?jì)算機(jī)建模有點(diǎn)太完美了，太客觀了，毫無(wú)瑕疵。而現(xiàn)在的3D建模讓人感覺(jué)太圓潤(rùn)了，他們追求那種粗糙的質(zhì)感，因?yàn)樵O(shè)計(jì)師知道，再怎么模擬現(xiàn)實(shí)，設(shè)計(jì)出來(lái)的作品依然和現(xiàn)實(shí)差那么一“點(diǎn)”兒，他們覺(jué)得應(yīng)該用設(shè)計(jì)去捕捉物體的本質(zhì)，而不是努力的追求外觀的模仿。

當(dāng)20世紀(jì)攝影出現(xiàn)時(shí)，有人覺(jué)得攝影應(yīng)該去精確的抓取現(xiàn)實(shí)瞬間，這才是攝影追求的高度。但是藝術(shù)并不需要精確:藝術(shù)表達(dá)的是一種飄忽不定的感覺(jué)，而不是外觀的完美再現(xiàn)。

繁榮發(fā)展的數(shù)字藝術(shù)，經(jīng)歷了一代又一代對(duì)“逼真”風(fēng)格的無(wú)限追求，可他們永遠(yuǎn)無(wú)法做到逼真，因?yàn)樗麄冞M(jìn)行的是模擬，此時(shí)，有人厭倦了模擬，他們開(kāi)始追求抽象化的表達(dá)。

怎樣進(jìn)行低面建模設(shè)計(jì)？

這里提供了一份簡(jiǎn)單教程，能夠幫助快速實(shí)現(xiàn)低面建模風(fēng)格，使用的軟件是Cinema4D

1.使用簡(jiǎn)單的實(shí)體創(chuàng)建對(duì)象，比如說(shuō)球形、錐形。不必非常細(xì)膩，簡(jiǎn)單即可。

2.Segment屬性，勾選每段細(xì)分選項(xiàng)“Subdivision per Segment”，段數(shù)越多，物體的面越多。

3.設(shè)置Phong屬性——決定了物體的圓滑度，在Cinema4D中，可以刪掉Phone標(biāo)簽，或者將Phone角度設(shè)置為0

4.為了打造多邊形效果，可以給模型加入變形，可以手動(dòng)設(shè)置（通過(guò)拖移節(jié)點(diǎn)），也可以使用Displacer這種變形器。使用Noise shader給每個(gè)頂點(diǎn)進(jìn)行隨機(jī)添加。可以增加或者減少變形量。

5.給物體加入材質(zhì)，定義材質(zhì)時(shí)，可以加入隆起的映射，提供更棒的表面細(xì)節(jié)。也可以通過(guò)特殊的高光來(lái)打造。

6.添加背景，添加天空

7.添加光，微妙的光會(huì)讓作品更帶感。

8.渲染對(duì)象，使用Global Illumination渲染設(shè)置，打造柔和光，添加Ambient Occlusion添加深度感和陰影。

這就是完成后的結(jié)果。你自己鉆研一下，創(chuàng)建自己的風(fēng)格吧。

實(shí)際案例

1.平面設(shè)計(jì)中的低面建模風(fēng)格

即使你不會(huì)使用3D建模軟件來(lái)設(shè)計(jì)低面建模，依然可以通過(guò)平面軟件如AI、PS等來(lái)創(chuàng)造二維的低面建模風(fēng)格。設(shè)計(jì)原則和三維大致相同。形狀務(wù)求簡(jiǎn)單，確定好光源位置，添加遮蔽效果，添加深度感，從而打造一種多面的外觀。也可以適當(dāng)添加一些材質(zhì)效果和光照效果。

看看Matthew Lyons的作品，他使用了簡(jiǎn)單的幾何圖形，粗糙的材質(zhì)，很有氛圍的光。他的作品有一種中世紀(jì)的設(shè)計(jì)感，刻畫(huà)出一種復(fù)古未來(lái)派風(fēng)格?！磥?lái)看起來(lái)跟過(guò)去一樣的有泛黃的質(zhì)感。

2.3D網(wǎng)頁(yè)設(shè)計(jì)

這是Mr.Doob上最近的一個(gè)項(xiàng)目

低面建模設(shè)計(jì)也可以用來(lái)傳遞3D內(nèi)容。低面建模設(shè)計(jì)，正如其名，使用了較少的多邊形，因此建模、渲染、動(dòng)效制作起來(lái)稍微能輕松一點(diǎn)，有助于實(shí)現(xiàn)在線實(shí)時(shí)3D效果。有很多在線3D渲染技術(shù)，比如WebGl，WebGL通過(guò)OpenGL和JS的綁定，實(shí)現(xiàn)3D內(nèi)容的渲染。還有很多JS框架也能實(shí)現(xiàn)，比如three.js。

還有一種辦法是使用插件，例如Unity 和Flash，F(xiàn)lash可用的引擎很多，比如Away 3D以及Flare 3D。盡管目前Flash和Unity的渲染效果更好，但是WebGL會(huì)很快追趕上。

有興趣的可以看看three.js開(kāi)發(fā)者M(jìn)r.Doob的作品，觀賞一下WebGL的效果。

3 dreams of black，這個(gè)采用WebGL的網(wǎng)站，打造了一種交互性極強(qiáng)的影音體驗(yàn)，再加上低面建模風(fēng)格的動(dòng)效，感染力極強(qiáng)。這是個(gè)開(kāi)源項(xiàng)目，你可以下載下來(lái)，然后重做代碼。當(dāng)3D 和網(wǎng)頁(yè)設(shè)計(jì)遭遇，結(jié)果會(huì)怎樣？我們都想知道結(jié)果，我們知道低多變?cè)O(shè)計(jì)將是網(wǎng)頁(yè)設(shè)計(jì)3D化的有力推手。

3.圖標(biāo)設(shè)計(jì)

復(fù)古未來(lái)派美學(xué)（retro-futuristic ）

這是一幅復(fù)古未來(lái)派作品

個(gè)人認(rèn)為低面建模設(shè)計(jì)師一種復(fù)古未來(lái)派風(fēng)格設(shè)計(jì)（它本身也可以稱(chēng)之為新唯美設(shè)計(jì)The New Aesthetic)，又回到過(guò)去，又回到未來(lái)，在搖擺不定中尋找美學(xué)的平衡。

目前來(lái)說(shuō)，低面建模設(shè)計(jì)非常符合現(xiàn)在的設(shè)計(jì)趨勢(shì)，至于未來(lái)如何，我們將一一見(jiàn)證。

你認(rèn)為低面建模設(shè)計(jì)是一種視覺(jué)泛濫，抑或是過(guò)時(shí)的趨勢(shì)？你認(rèn)為它符合現(xiàn)在的設(shè)計(jì)趨勢(shì)嗎？求討論。

原文地址：http://www.webdesignerdepot.com/2013/09/how-to-get-the-low-poly-look/
原文作者：Webdesignerdepot
譯文來(lái)源：UI中國(guó)
譯文作者：MartinRGB
譯文地址：http://www.ui.cn/project.php?id=20845
原標(biāo)題：Low-Poly設(shè)計(jì)風(fēng)格

有沒(méi)有看到看到效果高大上的圖片，覺(jué)得離自己很遠(yuǎn)，望而生畏？今天給大家介紹一種名為L(zhǎng)OW-POLY的風(fēng)格圖片，讓所有人都一起來(lái)LOW-POLY一把，高大上一把！

感謝新浪微博朋友@創(chuàng)意農(nóng)民 授權(quán)分享。本文提到的下載地址（長(zhǎng)按文字可以復(fù)制）

神器下載:http://vdisk.weibo.com/s/CcdgCyAPRyDGW
lowpoly風(fēng)格的背景圖片下載：http://matthew.wagerfield.com/flat-surface-shader/

首先讓我們一起來(lái)感受下LOW-POLY風(fēng)格帶給我們的沖擊吧！

制作LOW-POLY風(fēng)格圖片的步驟，我們分為七步，如下：

第一步：下載神器

下載神器請(qǐng)直接拉到文章末尾！

第二步：解壓神器并打開(kāi)

解壓，打開(kāi)index.html文件（注意，由于默認(rèn)瀏覽器不一樣，圖標(biāo)不一樣，用自己的瀏覽器打開(kāi)即可）

第三步：打開(kāi)后是這個(gè)樣子的

第四步：拖進(jìn)來(lái)是這樣子的

第五步：帶你的差不多就可以了

第六步：點(diǎn)擊轉(zhuǎn)化后， 多了一個(gè)按鈕

第七步：下載，結(jié)束

第八步：小結(jié)

1.頭像

先從封面的頭像說(shuō)起吧，這個(gè)，這個(gè)頭像不是我做的，是抄襲的，因?yàn)檫@個(gè)用“神奇”做不出來(lái)，只能用ai一個(gè)一個(gè)的畫(huà)，比較耗時(shí)間，繁瑣，且需要一定的繪畫(huà)和抽象的功底。

2.用途

關(guān)于這個(gè)效果我個(gè)人第一眼看到就覺(jué)得很是高大上，很是適合做背景，后來(lái)一想，做圖表也可以啊，用這個(gè)圖形的圖片填充就OK。

3.分形

Low poly效果可以追溯為“分形”這一概念。Low poly來(lái)講就是把一個(gè)圖片分成四個(gè)三角形填充，把每個(gè)三角形分成四個(gè)小三角形，不停迭代就出來(lái)了。神器就是基于某種算法來(lái)實(shí)現(xiàn)的，不過(guò)由于用網(wǎng)頁(yè)代碼編寫(xiě)的處理能力不夠細(xì)致。 最后一句Low poly分格的圖片大都是用C4D做的，一款優(yōu)秀的3D建模軟件，所以我等PS,PPT黨借鑒一下就好了。不要強(qiáng)求太多。（從PPT中看出，大都是3D作品）

4.技巧

• low poly分格對(duì)色彩要求比較高，不要試用到飽和度、高亮度的配色
• 關(guān)于Low poly風(fēng)格的背景圖片，你可以去這個(gè)網(wǎng)站下載：http://matthew.wagerfield.com/flat-surface-shader/

5.字體

還有大神出品一種PS做Low poly分格字體的教程，效果圖如PPT（其實(shí)我覺(jué)得直接用Low poly分格的圖片填充文字就OK）

6.案例

還是沒(méi)有忍住，發(fā)一張自己的頭像吧，先用“神奇”做了大致， 后來(lái)導(dǎo)入ai中修改的，做的不好歡迎大家吐槽。最后，謝謝關(guān)注啦，如果你喜歡，就@創(chuàng)意農(nóng)民 啦！

Low-poly神器——I?△ 演示教程