線面圖標(biāo)設(shè)計(jì)制作解析

作者:直尚教育
2020-07-09
9065

本篇文章跟大家分享線面圖標(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>


9
9
分享到:

0

喜歡他,就推薦他上首頁吧^_^

推薦閱讀

×

賽事服務(wù)聯(lián)系方式

0371-86068866

4008887269

cndesign@163.com

好的,我知道了

官方微信

聯(lián)系我們

  • QQ:33143335 QQ:1904200230
  • 電話:18569912460
  • 投稿:cndesign@163.com
  • 地址:鄭州市國家大學(xué)科技園東區(qū)9號(hào)樓2層

版權(quán)信息

  移動(dòng) Android 版 豫 ICP 備16038122號(hào)-2 豫公網(wǎng)安備 41019702002261號(hào)