在這篇教程中，我將展示我為聊天應(yīng)用設(shè)計(jì)圖標(biāo)的流程和心得，我用了一個(gè)“郵差鳥“作為寓意，來傳達(dá)一種“信息傳達(dá)“的理念。這個(gè)教程將具體展示從草圖，到矢量化圖標(biāo)的過程。 繪制草圖雖然草圖是只是簡略用來表達(dá)創(chuàng)意，表現(xiàn)可以很丑陋，很簡潔，但是在腦海中思路必須清晰，務(wù)必將視覺概念逐步簡化，將視覺元素盡可能的提煉，追求“用少詮釋多“的境界。視覺元素提煉的越精純，所傳達(dá)的理念便會越清晰。
還有一點(diǎn)要提的是，盡量保持原創(chuàng)性。盡管對于一些新手來說，做到這一點(diǎn)可能不是很容易。因?yàn)楝F(xiàn)成的誘惑往往不可抗拒——“我借鑒一下別人的作品，馬上就能獲得不錯(cuò)的視覺效果”(比如說上Dribbble去逛逛），盡管Dribbble傷有很多優(yōu)秀的作品，但是你看到的只是結(jié)果，理念迭代過程是你所看不到的。比方說一副簡約的作品，你上去就臨摹，可能臨摹到的只是其“”形“，而設(shè)計(jì)者在過程中，很可能經(jīng)歷過多次減法設(shè)計(jì)，他考慮到了什么，這都是你不知道的。所以，盡量保持原創(chuàng)，完完整整的把思考——設(shè)計(jì)——修改——成品的過程走一遍。好的設(shè)計(jì)作品，是需要花時(shí)間去琢磨、修改的。 為了保持原創(chuàng)性，我的建議是在繪制草圖之前不要去看別人的作品。這樣才會保證目標(biāo)的專一性，無干擾的表達(dá)靈感。
而本教程所涉及的案例中，我最開始希望用草圖繪制一個(gè)鳥嘴，加上郵差的形象，讓人明白，這是一款用來溝通、交流的應(yīng)用。我沒有完整的畫一只鳥，而是表達(dá)了最傳神的部分。 我希望草圖能夠盡可能的簡單，因此草圖沒有附帶太多的細(xì)節(jié)。一旦草圖數(shù)量足夠后，開始選擇一種設(shè)計(jì)概念，這時(shí)我就會去做一些調(diào)查。
將所有版本的草圖整理到一起，然后挑選一個(gè)作為概念 調(diào)查研究 調(diào)查研究研究什么呢，主要收集一些能夠提高效率的模板、動作，收集一些設(shè)計(jì)規(guī)范（iOS，ANdroid，Windows），選擇圖標(biāo)將要適配的平臺。然后開始著手情緒板的創(chuàng)建，收集一些能夠啟發(fā)你靈感的作品，以及相關(guān)的文章和書籍——我用Ember創(chuàng)建情緒版，這是個(gè)非常棒的應(yīng)用，能夠很方便的收集靈感。
這是我創(chuàng)建的情緒版，可以借鑒其中的配色、線條、形狀，以及風(fēng)格
開始用AI繪制矢量插畫
下面我將一步一步描述流程 步驟 1:設(shè)定工作區(qū)域打開AI，cmd+N創(chuàng)建新新文檔。尺寸1024x1021px,圖標(biāo)尺寸的最高規(guī)格。這份教程，設(shè)計(jì)的圖標(biāo)將應(yīng)用于iOS設(shè)備中。因此需要參考蘋果的iOS設(shè)計(jì)規(guī)范。 首選項(xiàng)>參考線和網(wǎng)格，間隔10px,子網(wǎng)格10px,視圖>顯示網(wǎng)格，視圖>對齊網(wǎng)格 窗口>工作區(qū)>基本功能，確保創(chuàng)作時(shí)，可是范圍的最大化。
創(chuàng)建新文檔，設(shè)置尺寸和色彩 步驟2: 導(dǎo)入草圖
文件>置入，選擇草圖，然后導(dǎo)入，勾選鏈接。圖層不透明度設(shè)置為50%，將圖層命名為“草圖“，然后鎖定之。然后在草圖圖層的上方創(chuàng)建新圖層，開始勾勒圖標(biāo)。 建議先用紅色打打樣，因?yàn)榧t色比較明顯，能夠很好的和草圖對比，從而比較形狀。建議在正式繪制之前，先分析一下草圖，哪些形狀可以用形狀工具實(shí)現(xiàn)，哪些形狀需要用鋼筆工具繪制。
花上幾分鐘分析一下草圖，會對創(chuàng)作大有幫助 步驟3：將每個(gè)元素放置到屬于自己的圖層中組織文件一旦完成了準(zhǔn)備工具，開始組織文件，然后將元素分別放到屬于自己的圖層中，然后命名。圖層堆疊順序如下： 1. 帽子; 2. 頭發(fā); 3. 眼睛; 4. 鳥嘴; 5. 脖子; 6. 頭部; 7. 背景; 8. 草圖.
圖層堆疊順序
步驟4：結(jié)合形狀
使用形狀生成器工具
結(jié)合形狀方面，其實(shí)有比路徑查找器更順手的工具。叫做形狀生成器，可以非常方便的結(jié)合、分離形狀，而且更直觀。
選擇形狀，選形狀生成器，拖移到其他部分，便會看到箭頭傷的加號，代表相加，若是按alt則相減。
是喲功能形狀生成器工具來結(jié)合形狀
步驟5：上色 色彩種類要收斂
此次設(shè)計(jì)的靈感主要來自iOS7的配色，我挑選了一些。顏色不要太花哨，要簡約，這樣形象看起來才明晰。
靈感來自iOS7的配色方案 這便是我的配色方案，，這樣無需投影便有深度感。窗口>顏色參考，便可隨心所欲的開始色彩調(diào)節(jié)，在顏色參考的色板中，點(diǎn)擊右上角的顯示選項(xiàng)，淡色/暗色,左面色調(diào)75%，右面100%
完成上色后的結(jié)果
步驟6：添加細(xì)節(jié)
賦予鳥兒性格下一步就要添加細(xì)節(jié)了：比如說眉毛，賦予眼睛深度感的投影，多嘗試一下，以求最好的結(jié)果。不過細(xì)節(jié)不要添加過多，以免畫蛇添足，增加了視覺的復(fù)雜性。此次設(shè)計(jì)中，我控制了自己的欲望，沒有增添過多的細(xì)節(jié)。讓整體風(fēng)格更貼近扁平化的簡約特點(diǎn)。
為了讓整體更有深度感，打開窗口>外觀，鳥的主體形象外輪廓加一層6pt的深紅色描邊。一些細(xì)節(jié)處加上投影，如下。
描邊
投影
步驟7：打開模板或自己做一個(gè)
我是用了Michael Flarup制作的iOS7圖標(biāo)模板，很不錯(cuò)的模板，Vimeo上有模板教程。 用完模板后，確保插畫在PS中圖層堆疊順序正確就可以了。
打開iOS模板，放入自己的作品即可
PS動作，可以提高你的工作效率 在設(shè)計(jì)之前讀讀平臺規(guī)范，絕對有益無害。 |
|
|
