圖示設計要求熟練運用軟體，涉獵各種向量特性、蒙板以及構造實體幾何，因此，會需要同學們運用不同的軟體工具與技巧，今天的譯文全都是超實用的技巧幹貨，週末來補充點有料的。

圖形建立 vs 圖形樣式

對向量路徑的建立和圖形樣式的設定作出正確的區分是十分重要的，因為它們需要通過兩種截然不同的設計軟體來實現——Photoshop 和 Illustrator。

Photoshop 的渲染質量和蒙板功能幾乎超越了所有的設計軟體，而 Illustrator 則囊括了豐富的向量功能。Illustrator 可謂是向量路徑界的王者。

值得慶幸的是，Photoshop 和 Illustrator 兩者之間的轉換算得是無縫連線了。通常我的工作流程是這樣的：在Photoshop 中進行簡單圖形操作，但如果涉及到整套圖示或任何複雜圖形，會先選用 Illustrator 進行建立，而後移步Photoshop 進行樣式處理。

簡而言之，Illustrator 用於建立圖形，Photoshop 用於設定樣式及輸出。

規格

如果你可以控制圖示尺寸，那麼圖示樣式和線條粗細應有助於規格的制定，因為許多圖示都必須有一條中線。也就是說，如果一個圖示的寬度為偶數，那麼中線的寬度便不能為奇數。同理，如果一個圖示的寬度為奇數，那麼其中線的寬度便不可為偶數。

當你使用的線條寬度為偶數時，圖示尺寸應為：偶數（寬）x 偶數（高）。當線條寬度為奇數時，那麼圖示尺寸應為：奇數（寬）x 奇數（高）。

儘可能不要混合使用奇數和偶數尺寸（除非你不混合會抓狂，那麼也確保不同軸使用不同粗細的線條）。

勿用高分別率來掩蓋這個問題——在奇數寬度的圖示中使用1pt（或 1dp）的線條，也許在 Retina 配置中看起來沒有問題，但絕對會在1× 和 3× 尺寸的解析度中發現讓你頭大的問題。

其實，大家只要把所有的點都想象成圖示的基礎網格，避免過於細小的偏移定位，一切也沒那麼複雜。要確保所有的圖示設計應該從 1× 開始。

OS X 應用圖示

使用簡單的網格系統可有助應用圖示的繪製。OS X 的應用圖示尺寸均為成倍增長，因此，我可以通過 16×16 畫素的圖示大致界定 1024×1024 圖示的定位，這樣的工作流程就輕鬆多了。對於那些極小的版本，也就無需過多調整細節了。

然而，蘋果的圖示並沒有完全吻合網格系統。不知為何，它們有著幾個畫素的偏差——Safari 圖示的直徑為 898 畫素，而非完全吻合 1/16 網格的 896 畫素。

綜上所述，定義的圖示尺寸與 Safari、iTunes和其它蘋果圖示並不完全相同，不過只是 1024 畫素中的 2 畫素差別而已，遵循網格對我來說更為重要。很好奇蘋果為何選擇這個尺寸。

iOS 應用圖示

iOS 應用圖示的尺寸不如 OS X 圖示那麼具有匹配度，工作流程略微複雜一些。以下所列為如今所有 iOS 圖示的尺寸。

• 29×29

• 40×40

• 58×58

• 76×76

• 80×80

• 87×87

• 120×120

• 152×152

• 180×180

• 1024×1024（應用商店）

目前總共有 10 種尺寸。但是，如果你只需製作 1x 的網格尺寸，那就只需關注 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（應用商店）

4種基礎尺寸加上應用商店尺寸 1024×1024 畫素，工作量直線減半。另有一個好訊息，要是哪天蘋果釋出 3x 尺寸的 iPad，那你基本也已經完成了適合該規格的圖示。

在一開始，要忍住高解析度尺寸的誘惑，專注於 1x 尺寸是事半功倍的良方，這可以幫助我們節省時間，從而獲得更有效，更易維護的設計。當水到渠成時，再開始製作 2×、3× 或 4× 的版本也不遲。

特別要謹慎使用”智慧物件”，要小心它們可能有特殊的尺寸變化。

從 Illustrator 開始

Illustrator 不但能讓你在設計 1x 網格尺寸的圖示時清晰觀察所有向量節點，並且有著數不勝數在任何其它軟體中都無法實現的獨特功能。我對其中的許多功能真是欲罷不能，這也正是為什麼會選擇 Illustrator 作為圖示工作流程第一步的原因。

對齊網格設定

不太喜歡 Illustrator 的對齊畫素設定，不過勾選”檢視→對齊網格”後的效果還是非常理想的，記得關閉對齊新物件到畫素。對齊新物件到畫素可在新建文件或變換面板中可找到。

如果你需要對畫素作非常細微的調整，可以使用移動面板（物件 → 轉換 → 移動，或直接按回車鍵）。

自定義工具面板

重新編輯了工具面板，去掉一些不常用的工具，顯示原本被隱藏的工具。

路徑尋找器

如果你想對圖形進行加、減或排除操作（通常被稱為布林操作或構造實體幾何），Illustrator 中的路徑尋找器可謂是所有向量編輯軟體中最好用的功能了。

於路徑尋找器中，最鍾愛分割功能——它將重疊的圖形分割成單獨的形狀，這樣就可以輕易地刪除不需要的部分。

形狀生成器

形狀生成器功能比路徑尋找器更新，使用起來更快捷。如果你有幾個獨立形狀互相重疊，那麼選中形狀生成器，拖動滑鼠即可組合形狀，按住 option 同時拖動滑鼠即可減去形狀。

⇧M 選擇形狀生成器。

實時圓角

Illustrator CC 2014 新添加了實時圓角功能，像小手柄一樣出現在所有轉角處。拖動小手柄即可控制圓角的角度。這個功能不僅僅針對矩形，適用於所有形狀。

實時圓角功能實現了那些原本繪製十分困難或費時的圖形。Illustrator 的這款功能一如許多其它可愛的功能，方便了設計師們的工作。

如果你希望精確定義角度，可以在控制面板中的輸入轉角直徑數值即可。

扭曲

Illustrator 的扭曲以及其它封套扭曲工具可用於各種形狀的彎曲和扭轉，讓圖形變得更有趣。

路徑輪廓

通常會先將筆觸轉路徑後，再進入 Photoshop 設定樣式。有些軟體也有這個功能，但是不多。該功能是向量編輯軟體必不可少的。

筆觸變數

在 Illustrator 中，可以對筆觸各個部位的寬度進行調整。

選擇寬度工具（shift-W），雙擊需要編輯的節點後，會出現控制面板供輸入資料精確控制寬度。該工具可以精準繪製出其它工具所無法繪製的圖形。

虛線

Illustrator 中的虛線有兩種模式——轉角對齊以及常規間隔。轉角對齊虛線總是看起來更舒服，然而多數設計軟體裡並不包含這一選項。虛線可轉化為路徑後置入 Photoshop 中作後續編輯。

單個變換

在 Illustrator 中，同時對多個物件進行大小、旋轉角度及位移等調整是相當輕鬆的，並且它還能做到以每個單獨物體為單位進行上述各類調整。這個小小的功能可以為我們省去大量的時間和精力。

套索選擇

當選取框無法滿足複雜的選區時，套索工具可以做到。可與按鍵結合使用套索工具：（加選）， （減選）。

圖形樣式

為提高工作效率，我在 Illustrator 中設定了一些圖形樣式。如果你的圖示中含有很多圖形樣式相同的元素，這麼做一定能幫你節省不少時間。

畫素預覽

說實話，Illustrator 的畫素預覽圖挺爛的，案例圖中顯示了它究竟是怎麼個爛法——畫素零散，沒有漸變遞色，等等這些都讓它的畫素預覽無法令人信服。因為我最終會在 Photoshop 裡進行樣式設定，所以 Illustrator 的畫素預覽並沒有什麼影響，但我們還是要對這一特點有所知曉。

大家可以在圖中看到 Illustrator 和 Photoshop 的畫素預覽圖對比，差異相當明顯。

零星的畫素是很危險的，iOS 和 OS X 介面影象的規格須為精確成倍的資料，所以一個影象所多出的1個零散畫素就會出現問題。

Photoshop 樣式設定

一旦完成圖示的路徑構建後，會將他們作為形狀塗層貼入 Photoshop。如果你有多個路徑，可以在 Illustrator 中將它們同時選中拷貝，在貼入 Photoshop 後仍可以分為單獨圖層。單獨選中一個路徑，並同時按⇧⌘J鍵，即可將其移入一個新圖層。

輸出

不建議通過 Illustrator 輸出點陣圖。

亦不將 iOS 圖示存為 PDF 格式。

使用 Photoshop 切片來輸出 PNG 格式或其他點陣圖格式。這一做法有諸多好處，譬如：可以選用一張需 10 秒載入的圖層，或是一整套需 100 秒載入的圖示；保持樣式的整體性；易編輯。