AI教程：如何設計一個《郵差鳥》APP圖標？

導言：在這篇教程中，我為大家講解的是聊天應用設計圖標的流程和心得，我是用了一個“郵差鳥”作為寓意，來傳達一種“信息傳達“的理念，這個教程將具體的展示從草圖，到矢量化圖標的過程。

具體的製作過程：

繪製草圖

雖然草圖隻是簡略用來表達創意，表現可以很醜陋，很簡潔，但是在腦海中思路必須清晰，務必將視覺概念逐步簡化，將視覺元素盡可能的提煉，追求“用少詮釋多“的境界。視覺元素提煉的越精純，所傳達的理念便會越清晰。

還有一點要提的是，盡量保持原創性。盡管對於一些新手來說，做到這一點可能不是很容易，因為現成的誘惑往往不可抗拒。“我借鑒一下別人的作品，馬上就能獲得不錯的視覺效果”，（比如說上Dribbble去逛逛）盡管Dribbble上有很多優秀的作品，但是你看到的隻是結果，理念迭代過程是你所看不到的。比方說一幅簡約的作品，你上去就臨摹，可能臨摹到的隻是其“形”，而設計者在過程中，很可能經曆過多次減法設計，他考慮到的問題都是你所不知道的。所以，盡量保持原創，完完整整的把思考——設計——修改——成品的過程走一遍。好的設計作品，是需要花時間去琢磨、修改的。

為了保持原創性，我的建議是在繪製草圖之前不要去看別人的作品，這樣才會保證目標的專一性，無幹擾的表達靈感。而本教程所涉及的案例中，我最開始希望用草圖繪製一個鳥嘴，加上郵差的形象，讓人明白這是一款用來溝通、交流的應用。我沒有完整的畫一隻鳥，而是表達了最傳神的部分。

我希望草圖能夠盡可能的簡單，因此草圖沒有附帶太多的細節。一旦草圖數量足夠後，開始選擇一種設計概念，這時我就會去做一些調查。將所有版本的草圖整理到一起，然後挑選一個作為概念。

調查研究

調查研究要研究什麼呢，主要收集一些能夠提高效率的模板、動作，收集一些設計規範（iOS，ANdroid，Windows），選擇的圖標要適合平台。然後開始著手情緒板的創建，收集一些能夠啟發你靈感的作品，以及相關的文章和書籍。我用Ember創建情緒版，這是個非常棒的應用，能夠很方便的收集靈感。這是我創建的情緒版，可以借鑒其中的配色、線條、形狀，以及風格。

AI繪製矢量插畫

下麵我將一步一步描述流程：

步驟1、創建新文檔，設置尺寸和色彩

打開AI，CMD+N創建新新文檔，尺寸1024x1021px，圖標尺寸的最高規格。這個教程設計的圖標將應用於iOS設備中，因此需要參考蘋果的iOS設計規範。

首選項>參考線和網格，間隔10px，子網格10px，視圖>顯示網格，視圖>對齊網格窗口>工作區>基本功能，確保創作是可視範圍的最大化。

步驟2、導入草圖

文件>置入，選擇草圖，然後導入，勾選鏈接。圖層不透明度設置為50%，將圖層命名為“草圖”，然後鎖定，最後在草圖圖層的上方創建新圖層，開始勾勒圖標。

建議先用紅色打打樣，因為紅色比較明顯，能夠很好的和草圖對比，從而比較形狀。建議在正式繪製之前，先分析一下草圖，哪些形狀可以用形狀工具實現，哪些形狀需要用鋼筆工具繪製。花上幾分鍾分析一下草圖，會對創作大有幫助。

步驟3、將每個元素放置到圖層中

組織文件，一旦完成了準備工具，開始組織文件，然後將元素分別放到屬於自己的圖層中，最後命名。圖層堆疊順序如下：

1、帽子

2、頭發

3、眼睛

4、鳥嘴

5、脖子

6、頭部

7、背景

8、草圖

步驟4、使用功能形狀生成器工具來結合形狀

結合形狀方麵，其實有比路徑查找器更順手的工具，叫做形狀生成器。可以非常方便的結合、分離形狀，而且更直觀。選擇形狀，選形狀生成器，拖移到其他部分，便會看到箭頭傷的加號，代表相加，若是按Alt則相減。

步驟5、上色

色彩種類要收斂，此次設計的靈感主要來自iOS7的配色，我挑選了一些。顏色不要太花哨，要簡約，這樣形象看起來才明晰。

這便是我的配色方案，這樣無需投影便有深度感。窗口>顏色參考，便可隨心所欲的開始色彩調節，在顏色參考的色板中，點擊右上角的顯示選項，淡色/暗色,左麵色調75%，右麵100%。下麵是完成上色後的結果。

步驟6、添加細節，賦予鳥兒性格

下一步就要添加細節了：比如說眉毛，賦予眼睛深度感的投影，多嚐試一下，以求最好的結果。不過細節不要添加過多，以免畫蛇添足，增加了視覺的複雜性。此次設計中，我控製了自己的欲望，沒有增添過多的細節，讓整體風格更貼近扁平化的簡約特點。

為了讓整體更有深度感，打開窗口>外觀，鳥的主體形象外輪廓加一層6pt的深紅色描邊。一些細節處加上投影，如下。

描邊

步驟7、打開模板或自己做一個

我是用了Michael Flarup製作的iOS7圖標模板，很不錯的模板，Vimeo上有模板教程。用完模板後，確保插畫在PS中圖層堆疊順序正確就可以了。

打開iOS模板，放入自己的作品即可。