本篇文章跟大家分享線面圖標(biāo)設(shè)計(jì)制作解析，希望對(duì)大家有所幫助！

一、線面圖標(biāo)組合基礎(chǔ)

在介紹線面圖標(biāo)的設(shè)計(jì)樣式前，我們要先來了解一下線面圖標(biāo)的組合基礎(chǔ)，根據(jù)這些基礎(chǔ)知識(shí)我們能更好地理解下面介紹的設(shè)計(jì)樣式，也許還能自己超創(chuàng)出新的設(shè)計(jì)樣式。

1.面的比例

線面圖標(biāo)在組合時(shí)，面所占比例大致有三種情況：小比例、大比例、全比例。

小比例的線面圖標(biāo)本身色塊與背景色能形成一定的對(duì)比，豐富層次；大比例的線面圖標(biāo)可以很好的將高光表現(xiàn)出來；全比例的線面圖標(biāo)通過色彩的變化可以做出更加復(fù)雜的插畫圖標(biāo)。

2.面的位置

線面圖標(biāo)造型時(shí)，色塊面的位置大致也有四種情況：色塊面包含在線條內(nèi)部、色塊面與線條交叉錯(cuò)開、色塊面與線條有交集拼接、色塊面與線條無交集拼接。

了解線面圖標(biāo)的基礎(chǔ)知識(shí)后，不知道你有沒有發(fā)現(xiàn)，其實(shí)線面圖標(biāo)造型的重點(diǎn)就是線面位置關(guān)系以及面的多少，在這兩點(diǎn)的基礎(chǔ)上線與面本身的設(shè)計(jì)樣式完全可以參照線性圖標(biāo)與面型圖標(biāo)。

二、線包含面

線包含面，色塊面位于線條內(nèi)部，與線條沒有分離，根據(jù)面的所占比例分為部分包含以及全包含。

1.部分包含

線面圖標(biāo)本身只有部分充滿色塊，如下圖：

這是一種常見的線面圖標(biāo)，色塊面采用主題色，線條采用深黑色系。除了以上這種，再為大家舉幾種常見的處理方式。

線面不透明度改變

線條與色塊面采用同一色彩，部分色塊面降低不透明度與線條色彩形成差異，整體風(fēng)格清新簡約，并不會(huì)有線面圖標(biāo)刻板的可愛風(fēng)格。

在這個(gè)基礎(chǔ)上可以對(duì)線條進(jìn)行同色系的漸變處理，又是一種新的效果，如下圖：

多色色塊

色塊面采用多個(gè)色彩，線條采用深黑色系。比起單一色塊，更加豐富，色彩面面積更廣。

色彩漸變

色塊面采用多色彩漸變，是一種較常規(guī)的面型處理方式，也能使線面圖標(biāo)整體更加豐富。

不透明度漸變

色塊面采用漸變色，一側(cè)色彩不透明度100%，一側(cè)色彩不同明度調(diào)至0~20%，比起純色色彩漸變，變化更加清新明快。

2.全包含

線面圖標(biāo)的內(nèi)部面全包含色塊，色塊面的處理方式與部分包含區(qū)別不大（可以自己動(dòng)手試試用部分包含面的處理方式繪制），這里主要介紹扁平線面插畫圖標(biāo)以及MBE風(fēng)格線面圖標(biāo)。

1）扁平線面插畫圖標(biāo)

圖標(biāo)造型相對(duì)復(fù)雜，會(huì)將圖形的細(xì)節(jié)表現(xiàn)出來，適合繪制有實(shí)物參考的圖形，常用在徽章、頭圖banner等偏向強(qiáng)視覺的運(yùn)營處。

圖標(biāo)參考實(shí)物進(jìn)行線稿繪制后，對(duì)不同位置進(jìn)行色彩填充，可以通過深色陰影以及白色高光增加圖標(biāo)的厚度。

2）MBE線面圖標(biāo)

MBE圖標(biāo)是線面圖標(biāo)中非常具有辨識(shí)度的一種風(fēng)格，最大的特點(diǎn)就是采用斷點(diǎn)線條，用色明亮并搭配一些簡單幾何做點(diǎn)綴。

三、線面分離

線與面分離開，根據(jù)線面分離的位置可以分為線條內(nèi)部分離、外部錯(cuò)位以及拼接線面。

1.線條內(nèi)部分離

線條圖形內(nèi)部色塊面與線條分離，常見的處理方式有縮小內(nèi)部面、內(nèi)錯(cuò)高光、內(nèi)部面型圖形。

1）縮小內(nèi)部面

將線面分離，并縮小內(nèi)部色塊面與外部線條形成一定的間距，如下圖：

2）內(nèi)錯(cuò)高光

內(nèi)部色塊面通過布爾運(yùn)算錯(cuò)位與外部線條形成一個(gè)空白高光，對(duì)于規(guī)則的形狀可以直接通過形狀繪制。

3）內(nèi)部面型圖形

在線型圖標(biāo)的基礎(chǔ)上，內(nèi)部采用色塊面增加一個(gè)圖形，可以將圖標(biāo)本身內(nèi)部圖形改成面型色塊，也可以在圖標(biāo)內(nèi)部增加一個(gè)規(guī)則色塊面，如下圖：

2.外部錯(cuò)位

線條圖形色塊面與線條錯(cuò)位分離，常見的處理方式有規(guī)則圖形錯(cuò)位、圖標(biāo)形狀錯(cuò)位。

1）規(guī)則圖形錯(cuò)位

在線性圖標(biāo)的基礎(chǔ)上，在底層增加一個(gè)規(guī)則圖形（圓、矩形等）的色塊面形成錯(cuò)位感，色塊面可根據(jù)面型圖標(biāo)樣式進(jìn)行各種嘗試，常見的如純色色塊、漸變色塊、不透明漸變色塊等。

2）圖標(biāo)形狀錯(cuò)位

線面圖標(biāo)的線與色塊面直接分離并錯(cuò)位交叉，一般會(huì)選擇將色塊面置于線條下部留出錯(cuò)位感。

3.拼接線面

線條圖形與色塊面共同拼接形成完整的圖標(biāo)，常見的處理方式有：有交集線面拼接、無交集線面拼接。

1）有交集線面拼接

圖標(biāo)一半采用線條繪制，一半采用面型繪制，且線條與面有交集。這種拼接風(fēng)格較個(gè)性化，色塊面常常用色彩漸變添加。

2）無交集線面拼接

圖標(biāo)一部分采用線條繪制，一部分采用面型繪制，且面與線之間沒有交集。與斷點(diǎn)線性圖標(biāo)原理相似，不過將線與線斷點(diǎn)的一部分線型形狀改成了面型，如下圖：

劃重點(diǎn)

線面圖標(biāo)的設(shè)計(jì)重點(diǎn)在于線面位置的改變以及面的所占比，在這兩點(diǎn)的基礎(chǔ)上線與面本身的設(shè)計(jì)樣式完全可以參照線性圖標(biāo)與面型圖標(biāo)。

常見的面占比大?。盒”壤?、大比例、全比例。

常見的線面位置：色塊面包含在線條內(nèi)部、色塊面與線條交叉錯(cuò)開、色塊面與線條有交集拼接、色塊面與線條無交集拼接。

直線網(wǎng)公眾號(hào)，第一時(shí)間學(xué)習(xí)最新教程，看最新行業(yè)動(dòng)態(tài)?。?/p>