今天我們講講圖標(biāo)的設(shè)計(jì)流程，在工作或者學(xué)習(xí)中，我們可能會(huì)拿到這樣一個(gè)需求。比如這個(gè)

“愛(ài)麗絲夢(mèng)游仙境——章節(jié)入口圖標(biāo)設(shè)計(jì)”

今天暴富老師圍繞這個(gè)題目，對(duì)圖標(biāo)的設(shè)計(jì)以及繪制兩個(gè)方向，進(jìn)行總體的學(xué)習(xí)與梳理，使同學(xué)快速熟悉圖標(biāo)設(shè)計(jì)制作方法。

Part? 1

設(shè)計(jì)方法分析

01? ? 提取元素

根據(jù)我們愛(ài)麗絲夢(mèng)游仙境的主題，我們頭腦風(fēng)暴一下，提煉出了——蘑菇? 樹(shù)? 兔子? 懷表? 帽子? 茶壺? 領(lǐng)結(jié)? 藤蔓? 蛋糕? 藥水? 書(shū)本? 撲克等等元素。

既然章節(jié)入口圖標(biāo)，主體可以設(shè)計(jì)為書(shū)本，突出章節(jié)的含義，同時(shí)挑選其他設(shè)計(jì)的元素來(lái)輔助設(shè)計(jì)。

02? ? 構(gòu)圖擺放

構(gòu)圖上采用三角形構(gòu)圖，先用主設(shè)計(jì)元素書(shū)本，懷表，兔子來(lái)構(gòu)成主視覺(jué)中心點(diǎn)。再用樹(shù)枝來(lái)豐富畫(huà)面和構(gòu)圖的飽滿性。

小貼士：構(gòu)圖時(shí)設(shè)計(jì)的元素可先用方盒子來(lái)表示，方便確認(rèn)擺放位置和擺放角度，同時(shí)防止畫(huà)錯(cuò)透視。

03? ? 確認(rèn)線稿

根據(jù)尋找的元素繪制草圖，并對(duì)草稿進(jìn)行整理和豐富，交代清楚結(jié)構(gòu)，確認(rèn)線稿。

Part? 2

制作方法分析

01? ? 色稿環(huán)節(jié)

在線稿下面新建1層，繪制2-3個(gè)色稿草圖，如果圖標(biāo)較簡(jiǎn)單，可以省略這個(gè)步驟，直接在矢量制作的過(guò)程中出配色方案。

新手可以尋找一些適合的色彩參考，來(lái)分析他的取色范圍或是冷暖色運(yùn)用等，從而來(lái)學(xué)習(xí)他們的配色技巧。但是一定不要直接吸色來(lái)繪制，吸色是進(jìn)步的敵人。

02? ? 確定配色方案

挑選最適合主題的配色方案準(zhǔn)備正式制作。

03? ? 矢量制作以及分層

大多數(shù)圖標(biāo)采用矢量的繪制方式。我們可以以物體為單位，在矢量繪制的時(shí)候?qū)λM(jìn)行分層，在底層開(kāi)始勾起，繪制的時(shí)候圖層盡量分開(kāi)，方便后期調(diào)整修改。

04? ? 體積塑造

確定圖標(biāo)的光源，這邊確定為右上方打光，確定后用硬筆刷畫(huà)出圖標(biāo)的暗部，亮部用漸變工具做出變化，畫(huà)出物體間的投影，處理整體體積關(guān)系。

05? ? 增加細(xì)節(jié)

物體增加的處理，比如書(shū)本的褶皺，兔子衣服布料的細(xì)節(jié)處理，金屬材質(zhì)的刻畫(huà)等等，繪制細(xì)節(jié)的時(shí)候注意不要破壞大關(guān)系。整體調(diào)整到完成度較高的程度。

06? ? 提升光感氛圍

調(diào)試是否需要勾線或者裝飾紋理等，視覺(jué)中心點(diǎn)增加光感，對(duì)圖標(biāo)整體進(jìn)行潤(rùn)色， 冷暖色對(duì)比和層次細(xì)微調(diào)整，突出視覺(jué)中心點(diǎn)，提高完成度。

小貼士：潤(rùn)色圖層注意不要畫(huà)到圖標(biāo)整體外面哦，防止切圖時(shí)出現(xiàn)問(wèn)題。

當(dāng)當(dāng)當(dāng)！最后就完成啦！

這個(gè)教程主要為新進(jìn)入行業(yè)的寶貝們熟悉設(shè)計(jì)邏輯和繪制流程，希望新入行的寶貝兒們能快速適應(yīng)工作節(jié)奏，工作中越來(lái)越順利，愛(ài)你們比心~

還沒(méi)看夠？上期還有一篇燈籠主題的分享，供君一覽~

我們帥氣的梁哥給燈籠加上了仙氣飄飄的動(dòng)效，這樣的特效燈籠就更加貼近實(shí)際項(xiàng)目中的需求了~

看完這個(gè)燈籠，想學(xué)的小伙伴可以關(guān)注公眾號(hào)：葉子學(xué)堂? ?去咨詢啦，最新的動(dòng)效班即將開(kāi)課！學(xué)會(huì)這一手，升職加薪指日可待！