本篇文章跟大家分享線面圖標(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)格清新簡(jiǎn)約,并不會(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)營(yíng)處。
圖標(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)線條,用色明亮并搭配一些簡(jiǎ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)!!
0
喜歡他,就推薦他上首頁吧^_^
0371-86068866
4008887269
cndesign@163.com
CND設(shè)計(jì)網(wǎng)(CNDESIGN)會(huì)員所發(fā)布展示的 “原創(chuàng)作品/文章” 版權(quán)歸原作者所有,任何商業(yè)用途均需聯(lián)系作者。如未經(jīng)授權(quán)用作他處,作者將保留追究侵權(quán)者法律責(zé)任的權(quán)利。
Copyright ©2006-2019 CND設(shè)計(jì)網(wǎng)
移動(dòng) Android 版 豫 ICP 備16038122號(hào)-2 豫公網(wǎng)安備 41019702002261號(hào)