幾周之前，我們發(fā)布了這一套陽(yáng)光系圖標(biāo)（見(jiàn)上圖所示），你可以從我們的網(wǎng)站上免費(fèi)下載。這篇教程闡述了這套圖表中的鉛筆圖標(biāo)的制作過(guò)程。這篇教程很深入，很細(xì)致，我們想你應(yīng)該可以毫無(wú)障礙的一步一步跟著做下去。 　雖然我們認(rèn)為這篇教程中的示例很基礎(chǔ)，使用到的概念，理念，技術(shù)在一般的圖標(biāo)設(shè)計(jì)中也很適用，我們使用的工具也很簡(jiǎn)單，也很好操作，但是，你也必須對(duì)AI軟件相當(dāng)?shù)氖煜ぁ?以下就是我們這篇教程的最終成果，你可以從這下載源文件。

我們?cè)趺撮_(kāi)始呢？通常在開(kāi)始之前，我們先會(huì)去網(wǎng)上收集一些鉛筆的圖片，觀察它們的細(xì)節(jié)和特征，然后把他們?nèi)芎铣梢环N風(fēng)格，創(chuàng)造一些全新的鉛筆圖標(biāo)。我們一般從手繪開(kāi)始。

1.鉛筆圖標(biāo)的特征。繪制一個(gè)圖標(biāo)意味著描繪一個(gè)物體的最具代表性的特點(diǎn)，這樣它就可以說(shuō)明這個(gè)圖標(biāo)的功能，或者闡述這個(gè)圖標(biāo)的概念。你應(yīng)該知道，一般說(shuō)來(lái)，有以下三種鉛筆：

1. 多邊形柱體，表面涂有一層反光漆； 2. 多邊形柱體，筆身上還用一個(gè)白色的金屬圈固定著一個(gè)橡皮頭； 3. 圓柱形筆身，沒(méi)有橡皮擦。

我們選擇第二類作為圖標(biāo)設(shè)計(jì)的原型，因?yàn)樗斜匾脑厮季邆洌@樣對(duì)于觀者來(lái)說(shuō)，具有很高的可識(shí)別性。在試著按照第二種類型手繪一些草圖以后，已經(jīng)有和我們腦海中的風(fēng)格設(shè)定相匹配的草圖了。

我們一般喜歡用10%，30%，50%灰度的Copic馬克筆和圓珠筆來(lái)繪制草圖。關(guān)于圖標(biāo)設(shè)計(jì)，還有以下幾條是相當(dāng)重要的：

當(dāng)你在繪制一個(gè)大圖標(biāo)時(shí)，你需要特別注意那些細(xì)節(jié)，特別要提醒的是你必須用兩點(diǎn)透視。但是在這篇教程中，因?yàn)檫@套圖標(biāo)是在小尺寸（64×64像素和48×48像素下文中像素用px代替）下輸出的，所以應(yīng)該盡量簡(jiǎn)化，而且用一點(diǎn)透視即可。

這套圖標(biāo)中的光線必須一致。整套圖標(biāo)透視必須一致，這樣所有的圖標(biāo)看起來(lái)才像一個(gè)系列。風(fēng)格是比較陽(yáng)剛的。主色調(diào)是綠色。由于這套圖標(biāo)存儲(chǔ)為EPS8文件，所以只能使用漸變，而且所有的路徑必須是閉合的（沒(méi)有開(kāi)放路徑）。同時(shí)要注意，沒(méi)有透明效果和柵格化圖像。好了，現(xiàn)在要正式開(kāi)始了。

2.草圖 在我們的圖標(biāo)設(shè)計(jì)中草圖總是第一步 然后我們會(huì)把這些草圖掃描置入到AI中。

3.基本輪廓線

3.1筆身 1.新建一個(gè)64 x 64px文檔。將草圖拖拽到新文檔的畫(huà)板中。在透明調(diào)板中把圖像的不透明度設(shè)置為50.鎖定圖層，存儲(chǔ)文檔。新建一個(gè)圖層開(kāi)始繪制輪廓線。

2.使用圓角矩形工具新建一個(gè)圓角矩形，然后點(diǎn)擊畫(huà)板，設(shè)置圓角半徑為10px，點(diǎn)擊確定。

使用選擇工具（快捷鍵V，下文中中直接使用雙括號(hào)與英文字母表示），點(diǎn)擊圓角矩形的邊緣，然后把他拉伸與草圖對(duì)齊，如下圖所示。

* 選擇圓角矩形，把填色設(shè)為無(wú)。 * 由于橡皮擦看起來(lái)要比筆身小，所以需要變動(dòng)一下。有很多方法重新繪制橡皮擦，比如說(shuō)用鋼筆工具，但是，按照我的經(jīng)驗(yàn)，這樣的結(jié)果并不盡如人意。

選擇圓角矩形路徑。雙擊比例縮放工具，在對(duì)話框中選擇等比縮放。把比例縮放值設(shè)置為96%。按照下圖執(zhí)行復(fù)制黏貼（我覺(jué)得應(yīng)該事先復(fù)制以前的圓角矩形然后再執(zhí)行比例縮放）

使用矩形工具在橡皮差的位置繪制一個(gè)新的矩形，在圓角矩形路徑上層。

選擇添加錨點(diǎn)工具（+）然后在矩形路徑的中點(diǎn)位置添加錨點(diǎn)（在第五步中繪制），然后，選擇刪除錨點(diǎn)工具刪除那兩個(gè)頂點(diǎn)錨點(diǎn)。

選擇橢圓工具繪制下圖所示橢圓。

選擇較大的圓角矩形路徑和橢圓路徑。點(diǎn)擊路徑查找器中的分割圖標(biāo)。圖層面板中出現(xiàn)了一個(gè)新的組。分割后的路徑屬于這個(gè)組別。

在圖層面板中選擇這個(gè)新組下的兩個(gè)路徑，敲擊Command/Ctrl + G對(duì)它們進(jìn)行編組組中并鎖定這個(gè)組。這樣做是為了能更方便的刪掉沒(méi)用的路徑。選擇分割路徑的那個(gè)組，在右鍵菜單中選擇取消編組。

刪掉沒(méi)用的路徑，得到下圖所示效果。

3.2金屬環(huán)就像做橡皮擦那樣，這個(gè)路徑我們將會(huì)用到一個(gè)比較大的橢圓路徑，然后分割筆身路徑，把金屬環(huán)路徑從筆身上分離出來(lái)。

現(xiàn)在鉛筆的大致形狀已經(jīng)出來(lái)了，我想從這一步開(kāi)始我們要調(diào)整細(xì)節(jié)了，我們要做的就是細(xì)化這只鉛筆。

4.細(xì)節(jié)

使用圓角矩形工具和路徑查找器面板繪制有筆尖的鉛筆外輪廓線，我們這樣處理路徑是為了讓筆身呈現(xiàn)為棱柱，看起來(lái)有棱有角。使用圓角矩形工具繪制一個(gè)圓角半徑為4pt的圓角矩形。（像步驟2b那樣）

使用“貼在前面”命令(Command/Ctrl + F)復(fù)制一個(gè)圓角矩形，把路徑副本移動(dòng)到右側(cè)。

選擇這兩個(gè)圓角矩形路徑和筆身路徑，然后點(diǎn)擊路徑查找器中的分割命令。選擇分割后的組，取消編組，刪掉沒(méi)用的路徑，得到下圖所示效果。

繼續(xù)使用圓角矩形工具繪制一個(gè)新的圓角矩形，然后在筆身的中間位置使用分割命令，這樣就得到了一個(gè)清晰地棱柱。

現(xiàn)在解鎖圖層2中的所有路徑，然后給他們命名，如下圖：

5.樹(shù)立風(fēng)格現(xiàn)在我們要讓這個(gè)圖標(biāo)變得更加的迷人，步驟如下： 5.1添加漸變選擇所有的路徑然后使用漸變工具，然后去色板中選擇一個(gè)從黑到灰到白的徑向漸變。選擇每一個(gè)路徑，使用漸變工具(G)在其中拖動(dòng)，直至達(dá)到下圖所示效果.

把所有的路徑的描邊都設(shè)為無(wú)，這樣做是為了預(yù)覽鉛筆的大致效果。

呃...筆身的光影效果還不錯(cuò)，但是筆尖和金屬環(huán)似乎還需要調(diào)整一下。

如下圖所示，把這個(gè)路徑的漸變?cè)O(shè)置為線性漸變。希望你能調(diào)出和我一樣的效果，如果不行，你可以下載附上的源文件。

金屬環(huán)路徑應(yīng)該緊緊地套在橡皮擦上，為了達(dá)到這種效果，使用添加錨點(diǎn)工具在金屬環(huán)路徑的兩個(gè)頂點(diǎn)處再添加4個(gè)錨點(diǎn)，然后刪掉兩個(gè)頂點(diǎn)錨點(diǎn)，效果如下圖所示：

金屬環(huán)路徑應(yīng)該還有一點(diǎn)厚度，最簡(jiǎn)單的方法就是使用路徑偏移命令，點(diǎn)擊對(duì)象>路徑>偏移路徑。在偏移路徑面板中，把偏移值設(shè)定為-1或者更小。你可以勾選預(yù)覽查看效果，然后點(diǎn)擊確定。

注意：路徑偏移命令會(huì)在金屬環(huán)路徑上層復(fù)制出一個(gè)副本，然后你需要改變（位于副本下層的）金屬環(huán)圖層的漸變，以產(chǎn)生厚度感。不管偏移的路徑有沒(méi)有用，默認(rèn)名都是“路徑”。

如果偏移值為負(fù)數(shù)，則副本將會(huì)出現(xiàn)在上層。

調(diào)整金屬環(huán)路徑的漸變，敲擊G，然后在路徑中拖拽漸變效果，直到產(chǎn)生下圖所示效果：

好了，金屬環(huán)看起來(lái)舒服多了，現(xiàn)在我們來(lái)弄弄筆尖。

對(duì)筆頭路徑使用比例縮放工具，讓它和筆身鄰接匹配。

就像草圖一樣，筆頭路徑的中間需要有一個(gè)高光來(lái)表現(xiàn)它的形狀。在做這一步之前，你要記住，這個(gè)圖標(biāo)是存儲(chǔ)為EPS8格式，所以不能使用效果，也不能出現(xiàn)混合模式或者不透明度，只能使用路徑和復(fù)合形狀。為了更簡(jiǎn)單一點(diǎn)，使用鋼筆工具在筆頭路徑上勾出一個(gè)路徑。

調(diào)整漸變的方向和邊緣，和形狀匹配。

使用鋼筆工具繪制筆尖。

使用鋼筆工具繪制橡皮擦部分的高光，使用漸變工具調(diào)整，使其與橡皮擦形狀匹配

對(duì)橡皮擦路徑使用路徑偏移命令得到一個(gè)副本，調(diào)整橡皮擦路徑的漸變，讓它的邊緣看起來(lái)更明顯。

5.2上色

在這一步，我們先把各個(gè)元素編到各自的組（筆身，橡皮擦和筆尖部分）。

選擇筆身路徑（包括三個(gè)路徑）。點(diǎn)擊編輯>顏色配置，勾選預(yù)覽和轉(zhuǎn)換選項(xiàng)，然后切換到RGB模式。（這個(gè)地方注意，我使用的是windows操作系統(tǒng)下的cs2版本，要彈出這個(gè)對(duì)話框要點(diǎn)擊濾鏡>illustrator 濾鏡>調(diào)整顏色....）

拖拽滑塊調(diào)整紅/綠/藍(lán)的值（隨你調(diào)成什么樣）。

選擇橡皮擦重做第二部。

選擇筆尖也做相同的操作。

現(xiàn)在鉛筆看起來(lái)沒(méi)有之前有立體感。這是因?yàn)樵陬伾{(diào)整過(guò)后，漸變色會(huì)丟失掉黑色信息。我們接下來(lái)要做的是回到鉛筆的三個(gè)部分，然后在他們的漸變色中添加黑色，讓各個(gè)元素的形狀表現(xiàn)得更清晰。

把漸變色中主色的滑塊向白色這邊拖動(dòng)。在色板中把顏色拖拽到漸變條中，選擇剛才拖拽的顏色（通過(guò)點(diǎn)擊顏色滑塊實(shí)現(xiàn)）設(shè)定其值為0-0-0（要確定顏色模式為RGB）。你可以使用色板調(diào)整漸變色。

6.深化細(xì)節(jié)，風(fēng)格匹配。在所有的基礎(chǔ)部分完成以后，在視圖菜單中切換到像素預(yù)覽模式，檢查一下有沒(méi)有像素問(wèn)題。就快完工了。如你所見(jiàn)，筆尖看起來(lái)太尖了，給人很不踏實(shí)的感覺(jué)，所以我們應(yīng)該把圓錐點(diǎn)變?yōu)橐粋€(gè)平頭椎體。同時(shí)，我們有必要給筆身部分加一些額外的路徑來(lái)實(shí)現(xiàn)高光效果（通過(guò)使用路徑偏移命令），因?yàn)檫@支鉛筆的外層反光度很高。結(jié)果如下圖：

圖標(biāo)旋轉(zhuǎn)45度效果

現(xiàn)在還有一個(gè)問(wèn)題，這支鉛筆看起來(lái)有點(diǎn)太暗了，沒(méi)有達(dá)到我們想要的效果。所以我們需要調(diào)整一下顏色。只要通過(guò)下列方法調(diào)整一下金屬圈路徑即可：

（1）復(fù)制路徑，然后縮放一小點(diǎn)，（2）再?gòu)?fù)制一個(gè)然后使用漸變工具，讓這個(gè)圖標(biāo)看起來(lái)更真實(shí)。注意：在像素預(yù)覽時(shí)確認(rèn)“對(duì)齊像素”，“對(duì)齊點(diǎn)”已經(jīng)被勾選上。

最終輸出效果：

查看最終效果，雖然光的方向是從上至下的，但是筆身的較低部分的卻比較高部分亮。沒(méi)錯(cuò)，這是反光。

許多人覺(jué)得使用AI畫(huà)圖標(biāo)很難，因?yàn)樯夂茈y表現(xiàn)。如果你的色感很好，那你可以使用調(diào)色板來(lái)改變漸變色和色調(diào)。

不管怎樣，你可以在PS下進(jìn)行如下操作：

1.把你的矢量圖輸出為PNG格式，然后使用PS打開(kāi)。通過(guò)使用曲線命令或者色彩平衡命令或者自動(dòng)色階（都在圖像>調(diào)整選項(xiàng)下），或者使用你在PS知道的任何方法，編輯完后保存文件。

2.把編輯過(guò)后的圖像拖到AI中，然后使用滴管工具吸取色彩的三個(gè)重要部分——明部，中間部和暗部，每次洗去過(guò)后，把顏色拖到調(diào)色板中保存。

3.把你選擇好的顏色拖拽到漸變條中，調(diào)出你自己喜歡的漸變色，然后在圖標(biāo)中使用。我經(jīng)常那樣做，現(xiàn)在我已經(jīng)有一個(gè)常用的漸變色庫(kù)，我經(jīng)常在我的圖標(biāo)設(shè)計(jì)中使用。

7.源文件你可以在這里下載這個(gè)圖標(biāo)的EPS文件或者AI文件。（但是在我們這要收飯團(tuán)，如果你也像我一樣無(wú)所事事的話，打開(kāi)金山詞霸和google，隨便找一篇英文的教程來(lái)翻譯，然后貼上來(lái)，你就會(huì)得到飯團(tuán)，如果你翻譯的是一篇阿塞拜疆語(yǔ)的教程，那你會(huì)成為iconfans論壇終生免費(fèi)享用飯團(tuán)會(huì)員。）

一般錯(cuò)誤讓我們用上面的例子來(lái)討論一下在圖標(biāo)設(shè)計(jì)的時(shí)候常會(huì)犯的錯(cuò)誤。

圖標(biāo)的高光和反光，一般是在原始路徑上繪制一個(gè)新的路徑，然后填充白色或者黑色，然后改變他的不透明度。這種辦法會(huì)使物體的顏色變成銀灰色，會(huì)沒(méi)有以前清晰，盡管能夠產(chǎn)生光澤。使用華而不實(shí)的圓柱體作為鉛筆的筆身，只使用一個(gè)漸變。繪制圖標(biāo)時(shí)應(yīng)該表現(xiàn)物體最普遍最具代表性的特征。一只圓柱形的鉛筆很難表現(xiàn)清晰的棱角和明顯的高光。繪制一個(gè)路徑表現(xiàn)鉛筆身，然后通過(guò)使用一個(gè)漸變讓他看起來(lái)有棱柱的效果。這種方法確實(shí)很簡(jiǎn)單，但是很難編輯，而且漸變方向容易歪斜。在ESP8格式下使用混合工具創(chuàng)造陰影效果，陰影會(huì)變成由白至黑。一旦放在有背景色的背景下，就會(huì)有白色的輪廓線出現(xiàn)。

設(shè)計(jì)比較這是一些我們想要放在一起討論一下優(yōu)缺點(diǎn)的一些典型案例。上述的最終效果說(shuō)明鉛筆是用一點(diǎn)透視法制做的。這是個(gè)完美的設(shè)計(jì)，它包含一切信息：光感，陰影，色彩和質(zhì)感，特別是這個(gè)圖標(biāo)可以被拉伸至任何大小而不會(huì)出現(xiàn)鋸齒問(wèn)題

圖一中的鉛筆圖標(biāo)使用的是兩點(diǎn)透視法。這個(gè)圖標(biāo)的光感不錯(cuò)，陰影效果可以接受，顏色比較棒，也沒(méi)有鋸齒問(wèn)題。看起來(lái)真的挺牛逼的。但是這個(gè)鉛筆的形狀和質(zhì)感對(duì)于觀者來(lái)說(shuō)可識(shí)別性不是太高，這一點(diǎn)犯了我們?cè)O(shè)計(jì)圖標(biāo)的大忌！圖一

圖二中的文件夾也是用兩點(diǎn)透視法。這個(gè)圖標(biāo)概念不錯(cuò)，質(zhì)感也很到位。他準(zhǔn)確的刻畫(huà)了由上至下的光線，陰影也體現(xiàn)得很讓人滿意，文件夾的反光更是恰到好處，然而，由于文件夾的上邊緣存在鋸齒問(wèn)題，所以在24x24像素下連形狀都看不清了。圖二

結(jié)論有許多方法做圖標(biāo)設(shè)計(jì)，有些人用3d軟件，有些人用fw，有些人用ps，但是不管用什么，設(shè)計(jì)圖標(biāo)的目的都是一樣的。我們必須保持一套圖標(biāo)風(fēng)格一致，簡(jiǎn)單易懂。就像我在文章開(kāi)頭說(shuō)的那樣，要做一個(gè)精致漂亮的圖標(biāo)步驟就那么幾步，原則就那么幾條。

教程結(jié)束，以上就是AI制作卡通風(fēng)格的鉛筆圖標(biāo)方法介紹，操作很簡(jiǎn)單的，大家學(xué)會(huì)了嗎？希望這篇教程能對(duì)大家有所幫助！