@飛屋睿UIdesign ：隨著扁平化風(fēng)靡而來，越來越多的地方開始流行使用多邊形背景。就讓我們也來學(xué)習(xí)一下如何制作出這類抽象多邊形風(fēng)格的背景圖吧。

　　制作抽象圖形對(duì)于初學(xué)者來說會(huì)面臨一個(gè)困惑，那就是無法做出隨心所欲達(dá)到“自然而然”的效果。要消滅這種“人造”感，我認(rèn)為最有效的方法，就是從別處去取材，通過對(duì)大自然環(huán)境光和自然色的取材，

一、選取圖片

　　選取一張色彩豐富、符合設(shè)計(jì)環(huán)境需求的圖片是至關(guān)重要的。在本例中，我選擇了這樣一張圖片，在AI中打開。

[Page: ]

二、軟件設(shè)置

　　在我們開始動(dòng)手制作多邊形之前，我們打開AI后要做好下面的設(shè)置，視圖下拉菜單：

1、勾選“智能參考線”；
2、“參考線”中“鎖定參考線”；
3、勾選“對(duì)齊點(diǎn)”；
4、鎖定背景照片；

三、第一片三角形

　　在圖片中，讓我們選一塊我們認(rèn)為可以作為背景圖色彩的部分區(qū)域。例如我在這張圖中，就選取了夕陽(yáng)和海水融合的過度色作為背景圖片的主要部分。

　　在這個(gè)區(qū)域中，開始繪制第一片三角形。利用鋼筆工具，不填充任何顏色，描邊為藍(lán)綠色。

　　開始畫一個(gè)三角形，透過背景圖來看，這個(gè)三角形盡量為一片顏色差別不大三角形。這是為接下來填色的需要。 

[Page: ]

四、畫剩下的三角形

　　接著，在這個(gè)三角形的旁邊，選擇另一塊適合的區(qū)域又畫上另外一個(gè)三角形。第二個(gè)三角形的三邊至少要和第一個(gè)三角形的其中一邊聯(lián)結(jié)。如圖：

　　這時(shí)，鼠標(biāo)滑過三角形的錨點(diǎn)時(shí)都會(huì)有提示，這有助于你定位其他三角形的錨點(diǎn)。慢慢畫上其他剩余的三角形，確保每一個(gè)三角形都能無縫的聯(lián)結(jié)在一起。

　　這時(shí)，你一定會(huì)悔恨為什么沒有選擇自動(dòng)生成的工具了。但是請(qǐng)記得，無論工具多么厲害，始終比不過你的眼睛和心。因?yàn)?，只有你才能挑選你的角度來組合這些一片片的三角形。

　　記住我在這里強(qiáng)調(diào)的：透過背景圖畫出的三角形，每一個(gè)三角形內(nèi)部的色彩盡量保持單一的。

　　好了，這是我的三角形拼片完成了：

[Page: ]

五、填色

　　從這里開始，我們要用吸管工具，將背景圖的顏色吸取過來填到每一片三角形中，三角形之間盡量保持顏色過渡而又尊重背景圖原色。填色時(shí)也要去掉描邊。這時(shí)，好像是在完成一幅拼色畫。

　　通過一邊吸取底色一邊填充三角形，這時(shí)，藍(lán)色描邊的三角形就被我一個(gè)個(gè)給消滅掉了。然后我再關(guān)掉背景圖可見的按鈕。效果如下：

　　這時(shí)我們會(huì)看到還有一些縫隙，不要緊，這時(shí)使用直接選擇工具對(duì)這些錨點(diǎn)做最后一步的小調(diào)整。

　　調(diào)整好后，這時(shí)就會(huì)出現(xiàn)這塊像鉆石一樣的晶瑩剔透的石頭啦！

[Page: ]

六、背景圖應(yīng)用

　　既然是用多邊形作背景，那么就拿一個(gè)Web APP的界面作為例子。當(dāng)我的登陸界面想要它作為背景的時(shí)候，由于我們是用AI制作的矢量圖，我可以按照實(shí)際需要將它放大到合適的大小再導(dǎo)出PNG圖片。記得在放大之前將三角形都編組。

　　下面是這個(gè)背景實(shí)際運(yùn)用的例子，你也可以運(yùn)用到海報(bào)、LOGO設(shè)計(jì)等情境中。