從頭開(kāi)始繪制圖標(biāo)系列：設(shè)計(jì)面部圖標(biāo)的詳細(xì)方法

我用了很長(zhǎng)的篇幅來(lái)討論如何設(shè)計(jì)線性風(fēng)格的圖標(biāo)。然后面部樣式圖標(biāo)的設(shè)計(jì)熟悉線性圖標(biāo)的繪制方法，操作并不困難，而且面部樣式的實(shí)際操作難度低于線性圖標(biāo)的實(shí)際操作難度，因此我們用一篇文章來(lái)描述圖標(biāo)的設(shè)計(jì)。

操作中圖標(biāo)和線性圖標(biāo)之間的大區(qū)別是筆觸和填充模式。我們知道，為了滿足像素對(duì)準(zhǔn)要求，線性行程在操作中將具有許多不可控制的因素，并且需要許多額外的步驟。彌補(bǔ)。在面部圖標(biāo)中，您不需要使用筆劃，并且可以使用相同的圖標(biāo)模板。

以下是本文中具體案例的演示。

基本風(fēng)格

我們使用線性圖標(biāo)中的樣式來(lái)設(shè)計(jì)面部效果。具體步驟不需要完全證明。只需用填充替換所有線性樣式演示中的筆劃，并使用相應(yīng)的路徑查找器功能。

值得注意的是，也許我們習(xí)慣使用線條工具繪制大量1pt寬線，這是錯(cuò)誤的方法。我們需要使用矩形工具繪制完整的閉合形狀，然后使用路徑查找工具或圖形上的批處理操作來(lái)確保均勻性。

此外，面部圖標(biāo)并不意味著“線性”元素根本不會(huì)出現(xiàn)。在某些特定情況下，我們?nèi)匀槐仨毻ㄟ^(guò)線條的形式顯示圖形的輪廓。例如，用于搜索圖標(biāo)的鏡頭，使用完全填充樣式顯然不令人滿意。因此，中空透鏡區(qū)域是不可避免的。

雖然我們不可避免地使用“線性”元素，但在面部樣式中，這些圖形的筆觸元素不應(yīng)太薄，并且應(yīng)使用不小于2pt的寬度。并且，為了確保圖標(biāo)的一致性，整個(gè)圖標(biāo)集的線應(yīng)盡可能使用相同的厚度，而不是在這里使用2pt，而在其他圖標(biāo)中使用4pt。

平面插畫(huà)風(fēng)格

平面插畫(huà)風(fēng)格實(shí)際上是一種高度自由的圖標(biāo)風(fēng)格，可以設(shè)計(jì)有許多有趣和創(chuàng)意的插圖圖標(biāo)。在這種情況下，我們只會(huì)解釋一種最基本的設(shè)計(jì)方法，以便新手入門(mén)。

最基本的平面插圖基于面部圖標(biāo)，將圖片分成不同的面部組合，然后用純色填充面部。例如，心臟圖標(biāo)看起來(lái)像一個(gè)刻面圖形，但我們可以人為地將它分成兩個(gè)面，然后填充相同顏色的不同色調(diào)，你可以得到一個(gè)平面插圖樣式圖標(biāo)。

類似于在開(kāi)放區(qū)域中帶有圖標(biāo)的搜索或消息圖標(biāo)，我們可以用不同顏色填充剪切塊，使它們顯示為單獨(dú)的面，并且可以實(shí)現(xiàn)相同的樣式。最后一個(gè)是“施加圖標(biāo)”。例如，眼睛圖標(biāo)，我們可以創(chuàng)建一個(gè)接近真實(shí)眼睛的樣式，添加細(xì)節(jié)如瞳孔?高光，只要使用純色填充，并保持細(xì)節(jié)數(shù)量在合理范圍內(nèi)，它將與其他圖標(biāo)不沖突。

顏色漸變風(fēng)格

在面部圖標(biāo)的顏色漸變中，存在各種更詳細(xì)的設(shè)計(jì)類型，例如整個(gè)圖標(biāo)的相同漸變，或圖標(biāo)中不同面部的不同漸變。

整個(gè)圖標(biāo)使用相同的漸變，這與線性圖標(biāo)的漸變方法幾乎相同，只要在開(kāi)始填充漸變之前合并所有圖層。讓我們解釋一個(gè)特殊的基本漸變樣式<!DOCTYPE不同的透明度漸變。

例如，心臟圖標(biāo)，我們將它分為兩個(gè)不同的面部組合，然后使用紅色漸變，一個(gè)強(qiáng)，一個(gè)弱。通常，我們只需要設(shè)置一個(gè)強(qiáng)梯度，然后將漸變復(fù)制到另一側(cè)并降低其透明度。

在使用透明度的圖形中，重要的是要注意，為了確保圖形背面的元素在實(shí)際使用中不影響圖標(biāo)顏色本身，我們將這些圖形復(fù)制到白色圖層并將其放在底部。

透明疊加樣式

最后，這是這種透明覆蓋層的設(shè)計(jì)風(fēng)格。就像線性圖標(biāo)中的疊加設(shè)計(jì)一樣，我們需要將圖形分成幾個(gè)面以創(chuàng)建重疊區(qū)域。

在這種情況下，圖標(biāo)盡可能使用純色，這比使用漸變更好，因?yàn)槲覀兛刂浦丿B區(qū)域的顏色。也許很多學(xué)生會(huì)看到這種風(fēng)格，他們會(huì)認(rèn)為疊加區(qū)域可以控制透明度，但這種效果通常并不理想。特別是當(dāng)顏色匹配是對(duì)比色時(shí)，交叉部分的顏色將具有“吱吱”的感覺(jué)。透明舒適度和圖形本身的飽和度也會(huì)受到影響

通常，另外配置交叉區(qū)域的顏色。也就是說(shuō)，在繪制圖形的所有輪廓之后，一起選擇它們，然后使用圖像生成工具分別為交叉區(qū)域選擇顏色方案。下圖是單獨(dú)選擇的兩種顏色組合和透明度的比較。

結(jié)論

這里解釋了面部風(fēng)格的設(shè)計(jì)。與線性圖標(biāo)的設(shè)計(jì)相比，面部工具圖標(biāo)的設(shè)計(jì)更加簡(jiǎn)單。雖然設(shè)計(jì)風(fēng)格具有很多可擴(kuò)展性和可能性，但您應(yīng)該始終記住它們。它仍然是一個(gè)“工具圖標(biāo)”，識(shí)別優(yōu)先于視覺(jué)風(fēng)格，因此不要過(guò)分強(qiáng)調(diào)視覺(jué)效果并使其成為裝飾性圖標(biāo)。

當(dāng)前文章：從頭開(kāi)始繪制圖標(biāo)系列：設(shè)計(jì)面部圖標(biāo)的詳細(xì)方法
本文URL：http://muchs.cn/news17/316717.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、品牌網(wǎng)站建設(shè)、網(wǎng)站營(yíng)銷、網(wǎng)站設(shè)計(jì)、Google、品牌網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)