以下是我對(duì)于設(shè)計(jì)圖標(biāo)的一些建議——關(guān)于從一個(gè)簡(jiǎn)單的單色圖形到一個(gè)細(xì)節(jié)豐富的APP圖標(biāo)。
有很多細(xì)節(jié) 我的 app 設(shè)計(jì)流程 這篇文章沒(méi)有涉及到，特別是圖標(biāo)的圖形設(shè)計(jì)方面。圖標(biāo)的設(shè)計(jì)通常是被設(shè)計(jì)軟件推動(dòng)的，充分利用軟件的向量、蒙板和建模功能。正是這些原因?qū)е铝藞D標(biāo)需要多種工具和技術(shù)。
創(chuàng)作與造型
我認(rèn)為應(yīng)該把矢量路徑的創(chuàng)作和造型分開(kāi)來(lái)討論，因?yàn)閮蓚€(gè)我主要使用的工具——Photoshop和Illustrator——它們有截然不同的功能特點(diǎn)和長(zhǎng)處。
Photoshop的渲染能力和蒙板功能比其他設(shè)計(jì)功能高到不知道哪里去了，但是Illustrator有更多更好的矢量工具。在圖標(biāo)路徑設(shè)計(jì)方面，我還沒(méi)有用過(guò)比得上Illustrator的工具。
還好，這兩個(gè)工具之間幾乎是無(wú)縫切換。Photoshop可以直接產(chǎn)生既快速又簡(jiǎn)潔的工作成果；先在Illustrator里畫(huà)出圖標(biāo)組或其他復(fù)雜的圖形，然后通過(guò)粘貼圖層導(dǎo)入到Photoshop里進(jìn)行處理。
Illustrator用來(lái)創(chuàng)造，Photoshop用來(lái)渲染和導(dǎo)出。
尺寸
你需要設(shè)計(jì)圖標(biāo)的尺寸，協(xié)調(diào)圖形和線的寬度。這時(shí)因?yàn)楹芏鄨D標(biāo)需要有一條中心線，如果圖形的寬度是偶數(shù)的，同時(shí)線的寬度是奇數(shù)的，或者圖形的寬度是奇數(shù)的，同時(shí)線的寬度是偶數(shù)的，你的圖標(biāo)有就沒(méi)辦法有一條中心線了。
如果你的線的寬度是偶數(shù)的，你的圖標(biāo)寬高尺寸就應(yīng)該是偶數(shù) × 偶數(shù)；如果你的線的寬度是奇數(shù)的，你的圖標(biāo)寬高尺寸就應(yīng)該是奇數(shù) × 奇數(shù)。
盡量不要把奇數(shù)和偶數(shù)尺寸混合使用（除非你突發(fā)異想，橫豎的線寬使用不同的尺寸）。
避免使用高像素設(shè)計(jì) —— 在Retina屏幕（兩倍密度）下1像素的線寬和奇數(shù)的圖標(biāo)寬看起來(lái)挺好，但是到其他1倍或者三倍密度的屏幕下就會(huì)很糟糕了。
如果你整體上基于網(wǎng)格并且避免出現(xiàn)分?jǐn)?shù)那么工作會(huì)輕松很多，這意味著你的設(shè)計(jì)都是基于1倍屏幕來(lái)做的。
OS X app 圖標(biāo)
使用大網(wǎng)格。OS X的圖標(biāo)尺寸很多但都是成倍數(shù)的，可能你的設(shè)計(jì)一個(gè)1616像素的圖標(biāo)會(huì)用來(lái)定位10241024像素圖標(biāo)的樣子，這樣使得建立圖標(biāo)的所有尺寸更容易。除了最小的尺寸，基本上不需要針對(duì)不同尺寸對(duì)圖標(biāo)進(jìn)行調(diào)整。
蘋(píng)果的圖標(biāo)不太符合網(wǎng)格。不知什么原因，它們總是差幾個(gè)像素—— Safari 的圖標(biāo)尺寸是898像素，而不是正好對(duì)齊為網(wǎng)格1/16的896像素。
IOS app 圖標(biāo)
和OS X不一樣，IOS app 圖標(biāo)尺寸之間沒(méi)啥關(guān)系。這樣就有些難辦了。以下是目前全部的尺寸列表（你可以在這里找到更好的列表Bjango App Icon Template help).
- 29×29
- 58×58
- 60×60
- 76×76
- 80×80
- 87×87
- 120×120
- 152×152
- 167×167
- 180×180
- 1024×1024 (App Store)
一共是11種尺寸。從60px的圖標(biāo)開(kāi)始設(shè)計(jì)，然后擴(kuò)大成它的的兩倍三倍，也就是120px和180px，只需要成倍擴(kuò)大圖標(biāo)，不需要調(diào)整。避免一開(kāi)始就設(shè)計(jì)大尺寸高保真的圖標(biāo)會(huì)幫你節(jié)省很多時(shí)間，還可以創(chuàng)造更好、更可維護(hù)的圖標(biāo)。從1倍開(kāi)始。當(dāng)你準(zhǔn)備好之后再設(shè)計(jì)2倍3倍4倍的。
除了特殊情況，否則我建議不要用智能對(duì)象，因?yàn)樗鼈兛s放的方式 。
從Illustrator開(kāi)始
除了能一邊看全保真的矢量圖一邊處理1倍網(wǎng)格，Illustrator 有很多其他軟件都沒(méi)有的特點(diǎn)。很多特點(diǎn)是我離不開(kāi)的，這是為什么我用Illustrator作為我設(shè)計(jì)圖標(biāo)的主力。
設(shè)置
我不喜歡 Illustrator 的像素對(duì)齊功能，但是我可以打開(kāi) 視圖 － > 對(duì)齊到網(wǎng)格，關(guān)閉“對(duì)齊新的對(duì)象到網(wǎng)格” ，這樣完美了。第二個(gè)方法是在新建文檔的窗口下面有個(gè)對(duì)齊到網(wǎng)格的選項(xiàng)。
如果你需要非整數(shù)的調(diào)整，可以使用“移動(dòng)”窗口。（對(duì)象－> 變換 －>移動(dòng)，或者選中對(duì)象，點(diǎn)擊“enter”建來(lái)打開(kāi)“移動(dòng)”窗口）
自定義工具面板
最近，我在嘗試自定 義工具面板，移除不常用的工具，把常用的工具從彈出的菜單中拿出來(lái)。
路徑選擇工具
如果你嘗試增加、減去或者排除相交圖形（通常叫布爾運(yùn)算或者構(gòu)造幾何），Illustrator的路徑選擇器是最好用的矢量編輯器之一。
我最喜歡路徑選擇器的功能分割功能——把圖形切分成獨(dú)立的路徑，這樣可以輕松的把不想要的部分去除。
形狀生成工具
形狀生成比路徑選擇器晚一點(diǎn)出現(xiàn)，而且用起來(lái)很快捷。選擇形狀生成工具點(diǎn)擊圖形區(qū)域生成圖形，（可以是重疊的，但是要是閉合的區(qū)域），拖拽不同圖形從而結(jié)合圖形，按住 option （Mac）減去圖形。
形狀生成工具快捷鍵：shift + M
動(dòng)態(tài)圓角工具
Illustrator CC 2014 增加了動(dòng)態(tài)圓角功能，通過(guò)控制一個(gè)角來(lái)控制整個(gè)圓角。選中所有想要改變的角的錨點(diǎn)，拖動(dòng)其中一個(gè)控制圓角的控制點(diǎn)，拖動(dòng)改變圓角大小就行。整個(gè)不僅適用于矩形，適用于所有圖形。
動(dòng)態(tài)圓角可以創(chuàng)造出用其他方式不好做或者做起來(lái)很費(fèi)時(shí)的圖形，用起來(lái)很方便。
如果你需要精確的圓角數(shù)值，你可以在控制欄輸入數(shù)值。
封套扭曲
如下圖，可以彎曲、扭曲圖形，賦予圖形生命。（下圖在 cc 2015 中，在編輯 ->封套扭曲 -> 用變形建立，還有其他的扭曲選項(xiàng)）
輪廓化描邊
在把圖形導(dǎo)入 ps 中進(jìn)行處理的時(shí)候，我通常會(huì)把圖形輪廓化描邊。有一些其他工具有這個(gè)功能，但是不多。但是這個(gè)功能好像是矢量設(shè)計(jì)軟件必有的功能。
各種描邊寬度
Illustrator 寬度工具可以變換描邊的寬度。
選擇寬度工具（shift + W），雙擊錨點(diǎn)出現(xiàn)出現(xiàn)寬度點(diǎn)數(shù)編輯彈窗。不同的描邊寬度可以精確地構(gòu)造用其他方式很難實(shí)現(xiàn)的圖形。
虛線
Illustrator 包含兩種虛線模式。如下圖兩種。illustrator 對(duì)虛線的優(yōu)化處理在大多數(shù)其他的軟件中沒(méi)有。虛線還可以 作為路徑導(dǎo)入 ps 。
分別變換（對(duì)象 -> 變換 ->分別變換）
同時(shí)縮放、旋轉(zhuǎn)以及移動(dòng)多個(gè)對(duì)象在 illustrator 中很方便。很簡(jiǎn)單的功能，但是能節(jié)省很多時(shí)間。
套索工具
套索工具可以靈活的選擇，同時(shí)可以結(jié)合 shift（增加）和 option（減去）使用。
圖形樣式
我設(shè)置了一些圖形樣式方便工作。如果你要設(shè)計(jì)一套有同樣特點(diǎn)的 icon，使用圖形樣式會(huì)很方便。
像素預(yù)覽
……（作者寫(xiě)了很多，大意是不要相信 illustrator 的像素預(yù)覽，這個(gè)功能很糟糕）下面是 illustrator 的抗鋸齒像素預(yù)覽和 ps 中的抗鋸齒圖形預(yù)覽。illustrator 的效果很糟糕。
在 ps 中處理
我在 illustrator 中設(shè)計(jì)好 icon 路徑之后，我會(huì)把它們作為形狀圖層粘貼到 ps 中。但是注意別在 illustrator 中一口氣復(fù)制所有形狀，然后粘貼到 ps 中，那樣的話在 ps 里這些形狀都成了一個(gè)圖層，沒(méi)法編輯了。正確做法是：把所有路徑從 illustrator 中粘貼到 ps 中，在 ps 中選擇單個(gè)路徑，按「shift +cmd + J」這樣在 ps 中成為一個(gè)單獨(dú)的新圖層了。
