圖標(biāo)設(shè)計(jì)，分享圖標(biāo)設(shè)計(jì)流程及小技巧

圖標(biāo)設(shè)計(jì)要求熟練運(yùn)用軟件，涉獵各種矢量特性、蒙板以及構(gòu)造實(shí)體幾何，因此，會(huì)需要同學(xué)們運(yùn)用不同的軟件工具與技巧，今天的譯文全都是超實(shí)用的技巧干貨，周末來(lái)補(bǔ)充點(diǎn)有料的。

我認(rèn)為，對(duì)矢量路徑的創(chuàng)建和圖形樣式的設(shè)定作出正確的區(qū)分是十分重要的，因?yàn)樗鼈冃枰ㄟ^(guò)兩種截然不同的設(shè)計(jì)軟件來(lái)實(shí)現(xiàn)——Photoshop 和 Illustrator。

Photoshop 的渲染質(zhì)量和蒙板功能幾乎超越了所有的設(shè)計(jì)軟件，而 Illustrator 則囊括了豐富的矢量功能。在我的漫漫圖標(biāo)征途中，Illustrator 可謂是矢量路徑界的王者。

值得慶幸的是，Photoshop 和 Illustrator 兩者之間的轉(zhuǎn)換算得是無(wú)縫連接了。通常我的工作流程是這樣的：在 Photoshop 中進(jìn)行簡(jiǎn)單圖形操作，但如果涉及到整套圖標(biāo)或任何復(fù)雜圖形，我會(huì)先選用 Illustrator 進(jìn)行創(chuàng)建，而后移步 Photoshop 進(jìn)行樣式處理。

簡(jiǎn)而言之，Illustrator 用于創(chuàng)建圖形，Photoshop 用于設(shè)定樣式及輸出。

如果你可以控制圖標(biāo)尺寸，那么圖標(biāo)樣式和線條粗細(xì)應(yīng)有助于規(guī)格的制定，因?yàn)樵S多圖標(biāo)都必須有一條中線。也就是說(shuō)，如果一個(gè)圖標(biāo)的寬度為偶數(shù)，那么中線的寬度便不能為奇數(shù)。同理，如果一個(gè)圖標(biāo)的寬度為奇數(shù)，那么其中線的寬度便不可為偶數(shù)。

當(dāng)你使用的線條寬度為偶數(shù)時(shí)，圖標(biāo)尺寸應(yīng)為：偶數(shù)（寬）x 偶數(shù)（高）。當(dāng)線條寬度為奇數(shù)時(shí)，那么圖標(biāo)尺寸應(yīng)為：奇數(shù)（寬）x 奇數(shù)（高）。

盡可能不要混合使用奇數(shù)和偶數(shù)尺寸（除非你不混合會(huì)抓狂，那么也確保不同軸使用不同粗細(xì)的線條）。

勿用高分別率來(lái)掩蓋這個(gè)問(wèn)題——在奇數(shù)寬度的圖標(biāo)中使用1pt（或 1dp）的線條，也許在 Retina 配置中看起來(lái)沒(méi)有問(wèn)題，但絕對(duì)會(huì)在1× 和 3× 尺寸的分辨率中發(fā)現(xiàn)讓你頭大的問(wèn)題。

其實(shí)，大家只要把所有的點(diǎn)都想象成圖標(biāo)的基礎(chǔ)網(wǎng)格，避免過(guò)于細(xì)小的偏移定位，一切也沒(méi)那么復(fù)雜。要確保所有的圖標(biāo)設(shè)計(jì)應(yīng)該從 1× 開(kāi)始。

使用簡(jiǎn)單的網(wǎng)格系統(tǒng)可有助應(yīng)用圖標(biāo)的繪制。OS X 的應(yīng)用圖標(biāo)尺寸均為成倍增長(zhǎng)，因此，我可以通過(guò) 16×16 像素的圖標(biāo)大致界定 1024×1024 圖標(biāo)的定位，這樣的工作流程就輕松多了。對(duì)于那些極小的版本，也就無(wú)需過(guò)多調(diào)整細(xì)節(jié)了。

然而，蘋(píng)果的圖標(biāo)并沒(méi)有完全吻合網(wǎng)格系統(tǒng)。不知為何，它們有著幾個(gè)像素的偏差——Safari 圖標(biāo)的直徑為 898 像素，而非完全吻合 1/16 網(wǎng)格的 896 像素。

綜上所述，我定義的圖標(biāo)尺寸與 Safari、iTunes和其它蘋(píng)果圖標(biāo)并不完全相同，不過(guò)只是 1024 像素中的 2 像素差別而已，遵循網(wǎng)格對(duì)我來(lái)說(shuō)更為重要。很好奇蘋(píng)果為何選擇這個(gè)尺寸。

iOS 應(yīng)用圖標(biāo)的尺寸不如 OS X 圖標(biāo)那么具有匹配度，工作流程略微復(fù)雜一些。以下所列為如今所有 iOS 圖標(biāo)的尺寸。

?29×29?40×40?58×58?76×76?80×80?87×87?120×120?152×152?180×180?1024×1024（應(yīng)用商店）

目前總共有 10 種尺寸。但是，如果你只需制作 1x 的網(wǎng)格尺寸，那就只需關(guān)注 5 種主要尺寸即可。

?29 (1×), 58 (2×), 87 (3×)?40 (1×), 80 (2×), 120 (3×)?60 (1×), 120 (2×), 180 (3×)?76 (1×), 152 (2×), 228 (3×)?1024×1024（應(yīng)用商店）

4 種基礎(chǔ)尺寸加上應(yīng)用商店尺寸 1024×1024 像素，工作量直線減半。另有一個(gè)好消息，要是哪天蘋(píng)果發(fā)布 3x 尺寸的 iPad，那你基本也已經(jīng)完成了適合該規(guī)格的圖標(biāo)。