原文地址：http:///create-app-icon-illustrator/

翻譯：MartinRGB

當(dāng)前瀏覽器不支持播放音樂(lè)或語(yǔ)音，請(qǐng)?jiān)谖⑿呕蚱渌麨g覽器中播放 遙遠(yuǎn) 陳泳弘 - 陳泳弘精選吉他曲

在這篇教程中，我將展示我為聊天應(yīng)用設(shè)計(jì)圖標(biāo)的流程和心得，我用了一個(gè)“郵差鳥(niǎo)“作為寓意，來(lái)傳達(dá)一種“信息傳達(dá)“的理念。這個(gè)教程將具體展示從草圖，到矢量化圖標(biāo)的過(guò)程。

繪制草圖

雖然草圖是只是簡(jiǎn)略用來(lái)表達(dá)創(chuàng)意，表現(xiàn)可以很丑陋，很簡(jiǎn)潔，但是在腦海中思路必須清晰，務(wù)必將視覺(jué)概念逐步簡(jiǎn)化，將視覺(jué)元素盡可能的提煉，追求“用少詮釋多“的境界。視覺(jué)元素提煉的越精純，所傳達(dá)的理念便會(huì)越清晰。

還有一點(diǎn)要提的是，盡量保持原創(chuàng)性。盡管對(duì)于一些新手來(lái)說(shuō)，做到這一點(diǎn)可能不是很容易。因?yàn)楝F(xiàn)成的誘惑往往不可抗拒——“我借鑒一下別人的作品，馬上就能獲得不錯(cuò)的視覺(jué)效果”(比如說(shuō)上Dribbble去逛逛），盡管Dribbble傷有很多優(yōu)秀的作品，但是你看到的只是結(jié)果，理念迭代過(guò)程是你所看不到的。比方說(shuō)一副簡(jiǎn)約的作品，你上去就臨摹，可能臨摹到的只是其“”形“，而設(shè)計(jì)者在過(guò)程中，很可能經(jīng)歷過(guò)多次減法設(shè)計(jì)，他考慮到了什么，這都是你不知道的。所以，盡量保持原創(chuàng)，完完整整的把思考——設(shè)計(jì)——修改——成品的過(guò)程走一遍。好的設(shè)計(jì)作品，是需要花時(shí)間去琢磨、修改的。

為了保持原創(chuàng)性，我的建議是在繪制草圖之前不要去看別人的作品。這樣才會(huì)保證目標(biāo)的專(zhuān)一性，無(wú)干擾的表達(dá)靈感。

而本教程所涉及的案例中，我最開(kāi)始希望用草圖繪制一個(gè)鳥(niǎo)嘴，加上郵差的形象，讓人明白，這是一款用來(lái)溝通、交流的應(yīng)用。我沒(méi)有完整的畫(huà)一只鳥(niǎo)，而是表達(dá)了最傳神的部分。

我希望草圖能夠盡可能的簡(jiǎn)單，因此草圖沒(méi)有附帶太多的細(xì)節(jié)。一旦草圖數(shù)量足夠后，開(kāi)始選擇一種設(shè)計(jì)概念，這時(shí)我就會(huì)去做一些調(diào)查。

將所有版本的草圖整理到一起，然后挑選一個(gè)作為概念

調(diào)查研究

調(diào)查研究研究什么呢，主要收集一些能夠提高效率的模板、動(dòng)作，收集一些設(shè)計(jì)規(guī)范（iOS，ANdroid，Windows），選擇圖標(biāo)將要適配的平臺(tái)。然后開(kāi)始著手情緒板的創(chuàng)建，收集一些能夠啟發(fā)你靈感的作品，以及相關(guān)的文章和書(shū)籍——我用Ember創(chuàng)建情緒版，這是個(gè)非常棒的應(yīng)用，能夠很方便的收集靈感。

這是我創(chuàng)建的情緒版，可以借鑒其中的配色、線(xiàn)條、形狀，以及風(fēng)格

開(kāi)始用AI繪制矢量插畫(huà)

下面我將一步一步描述流程

步驟 1:設(shè)定工作區(qū)域

打開(kāi)AI，cmd+N創(chuàng)建新新文檔。尺寸1024x1021px,圖標(biāo)尺寸的最高規(guī)格。這份教程，設(shè)計(jì)的圖標(biāo)將應(yīng)用于iOS設(shè)備中。因此需要參考蘋(píng)果的iOS設(shè)計(jì)規(guī)范。

首選項(xiàng)>參考線(xiàn)和網(wǎng)格，間隔10px,子網(wǎng)格10px,視圖>顯示網(wǎng)格，視圖>對(duì)齊網(wǎng)格

窗口>工作區(qū)>基本功能，確保創(chuàng)作時(shí)，可是范圍的最大化。

創(chuàng)建新文檔，設(shè)置尺寸和色彩

步驟2: 導(dǎo)入草圖

文件>置入，選擇草圖，然后導(dǎo)入，勾選鏈接。圖層不透明度設(shè)置為50%，將圖層命名為“草圖“，然后鎖定之。然后在草圖圖層的上方創(chuàng)建新圖層，開(kāi)始勾勒?qǐng)D標(biāo)。

建議先用紅色打打樣，因?yàn)榧t色比較明顯，能夠很好的和草圖對(duì)比，從而比較形狀。建議在正式繪制之前，先分析一下草圖，哪些形狀可以用形狀工具實(shí)現(xiàn)，哪些形狀需要用鋼筆工具繪制。

花上幾分鐘分析一下草圖，會(huì)對(duì)創(chuàng)作大有幫助

步驟3：將每個(gè)元素放置到屬于自己的圖層中

組織文件

一旦完成了準(zhǔn)備工具，開(kāi)始組織文件，然后將元素分別放到屬于自己的圖層中，然后命名。圖層堆疊順序如下：

    1.    帽子;

    2.    頭發(fā);

    3.    眼睛;

    4.    鳥(niǎo)嘴;

    5.    脖子;

    6.    頭部;

    7.    背景;

    8.    草圖.

圖層堆疊順序

步驟4：結(jié)合形狀

使用形狀生成器工具

結(jié)合形狀方面，其實(shí)有比路徑查找器更順手的工具。叫做形狀生成器，可以非常方便的結(jié)合、分離形狀，而且更直觀(guān)。

選擇形狀，選形狀生成器，拖移到其他部分，便會(huì)看到箭頭傷的加號(hào)，代表相加，若是按alt則相減。

是喲功能形狀生成器工具來(lái)結(jié)合形狀

步驟5：上色

色彩種類(lèi)要收斂

此次設(shè)計(jì)的靈感主要來(lái)自iOS7的配色，我挑選了一些。顏色不要太花哨，要簡(jiǎn)約，這樣形象看起來(lái)才明晰。

靈感來(lái)自iOS7的配色方案

這便是我的配色方案，，這樣無(wú)需投影便有深度感。窗口>顏色參考，便可隨心所欲的開(kāi)始色彩調(diào)節(jié)，在顏色參考的色板中，點(diǎn)擊右上角的顯示選項(xiàng)，淡色/暗色,左面色調(diào)75%，右面100%

完成上色后的結(jié)果

步驟6：添加細(xì)節(jié)

賦予鳥(niǎo)兒性格

下一步就要添加細(xì)節(jié)了：比如說(shuō)眉毛，賦予眼睛深度感的投影，多嘗試一下，以求最好的結(jié)果。不過(guò)細(xì)節(jié)不要添加過(guò)多，以免畫(huà)蛇添足，增加了視覺(jué)的復(fù)雜性。此次設(shè)計(jì)中，我控制了自己的欲望，沒(méi)有增添過(guò)多的細(xì)節(jié)。讓整體風(fēng)格更貼近扁平化的簡(jiǎn)約特點(diǎn)。

為了讓整體更有深度感，打開(kāi)窗口>外觀(guān)，鳥(niǎo)的主體形象外輪廓加一層6pt的深紅色描邊。一些細(xì)節(jié)處加上投影，如下。

描邊

投影

步驟7：打開(kāi)模板或自己做一個(gè)

我是用了Michael Flarup制作的iOS7圖標(biāo)模板，很不錯(cuò)的模板，Vimeo上有模板教程。

用完模板后，確保插畫(huà)在PS中圖層堆疊順序正確就可以了。

打開(kāi)iOS模板，放入自己的作品即可

PS動(dòng)作，可以提高你的工作效率

在設(shè)計(jì)之前讀讀平臺(tái)規(guī)范，絕對(duì)有益無(wú)害。