小課堂第四彈：使用ILLUSTRATOR做UI設(shè)計(jì)系列教程

@張泊寧研究所?：上次，說了說 Adobe Illustrator 里的參考線，今天，就說一說 AI 里的網(wǎng)格。

作者系列教程：
《使用 Adobe Illustrator 做 UI 設(shè)計(jì)——多重填充與多重描邊》
《小課堂第二彈！使用ILLUSTRATOR做UI設(shè)計(jì)系列教程》

網(wǎng)格，或是說柵格系統(tǒng)，是做版式設(shè)計(jì)、平面設(shè)計(jì)、Web 設(shè)計(jì)的重要工具。在 1960 年代，瑞士的現(xiàn)代主義平面設(shè)計(jì)海報(bào)、宣傳單中，就大量使用了網(wǎng)格來組織信息元素。進(jìn)入信息時(shí)代后，隨著 Web 的興起，由于網(wǎng)頁設(shè)計(jì)與平面設(shè)計(jì)、版式設(shè)計(jì)有很強(qiáng)的相似性，網(wǎng)格也被大量應(yīng)用在了 Web 中。網(wǎng)格的好處，就是在于給予一種規(guī)約，令排版者可以較為方便的組織標(biāo)題、列表、段落、圖片等元素，保持版面元素之間的一致性，協(xié)調(diào)正負(fù)空間。一句話概括應(yīng)用網(wǎng)格的好處：「隨心所欲，不逾矩」

（圖片摘自現(xiàn)代主義設(shè)計(jì)師 Massimo Vignelli 的 The Vignelli Canon 電子書）

不過，雖然用網(wǎng)格組織、排版信息相當(dāng)方便，通常創(chuàng)建網(wǎng)格本身卻是一件十分令人頭痛的事情。通常的做法是：

• 吭哧吭哧地在紙上算，計(jì)算網(wǎng)格的大小、間距什么的，算到天昏地暗；
• 然后吭哧吭哧地拉參考線……

很容易看出，這是一個(gè)特別苦的過程，特別是對(duì)于我這樣數(shù)學(xué)學(xué)渣而言。所幸，AI 提供了一個(gè)工具，把設(shè)計(jì)師從吭哧吭哧的計(jì)算和吭哧吭哧的拉參考線解放了出來。今天的內(nèi)容很少，就是要講這個(gè)工具的使用。這個(gè)工具用起來特別簡(jiǎn)單，這次還是像前幾次那樣，通過一個(gè)具體的案例來說明：給一個(gè) A4 紙打上類似這樣的網(wǎng)格：

首先，依然是新建文件。不過這次要新建一個(gè) A4 大小的文檔（210mm x 297mm）。

然后，在這個(gè)文檔的畫板上畫一個(gè)大小同畫板大小，覆蓋整個(gè)畫板的矩形，并去掉這個(gè)矩形的填充和描邊。

接下來，確定頁邊距。假設(shè)我們這個(gè)文檔的的橫豎頁邊距分別是 12mm，15mm 的話，選中矩形，在「變換」面板中選參考點(diǎn)為圖形中心，寬與高那兩個(gè)文本框分別輸入這樣的表達(dá)式：210 - 24mm, 297 - 30mm，即「長(zhǎng)度 - 頁邊距 x 2」。AI 是可以支持類似這樣較為簡(jiǎn)單的算數(shù)表達(dá)式的，類似這樣：

做好后畫板應(yīng)該類似這樣：

然后，執(zhí)行菜單命令：「對(duì)象」-?「路徑」-?「分割為網(wǎng)格」，在彈出的對(duì)話框中做如下設(shè)置：

點(diǎn)擊「確定」，幾乎就搞定了！如圖：

或者再進(jìn)一步，取消整個(gè)網(wǎng)格的編組，然后全選，按上節(jié)課的辦法建立參考線：

Done. 我們除了計(jì)算頁邊距之外，沒有進(jìn)行其他任何的計(jì)算，并且也沒有拉參考線。頁面的柵格系統(tǒng)就這樣輕松地建立好了。

另外，還有一種辦法來創(chuàng)建網(wǎng)格，就是利用 AI 的矢量效果中的變換效果，比較適合用來創(chuàng)建事先已經(jīng)確定了單元格長(zhǎng)、寬的網(wǎng)格，不過不能做出上面那樣的「版式網(wǎng)格」。再舉個(gè)例子來看一下：給一個(gè) 960x640 的文檔打上單元格大小為 80x24 的網(wǎng)格。

首先，當(dāng)然依舊是新建一個(gè) 960x640 大小的文檔，關(guān)掉像素對(duì)齊。然后，用直線工具，在畫板的頂端畫一條直線，如圖：

（為方便查看，我把直線的寬度設(shè)定成了 2px，F(xiàn)F0000 紅色。實(shí)際使用中，不必設(shè)置線條顏色和寬度，并且，沒有特殊原因的話，應(yīng)避免使用 FF0000 紅色）

然后，選中這條直線，加上一個(gè)「變換」效果，彈出的對(duì)話框中做如下設(shè)置：

在這個(gè)對(duì)話框里，「垂直」一項(xiàng)即為我們希望的網(wǎng)格單元格高度，「副本」一項(xiàng)是網(wǎng)格單元格的數(shù)量。如果要是懶得手工算的話，可以勾選「預(yù)覽」選項(xiàng)，用鼠標(biāo)滾輪或觸控板調(diào)整「副本」一欄的大小。

點(diǎn)擊「確定」后，畫板應(yīng)該是類似這樣：

然后，選中直線，執(zhí)行命令「擴(kuò)展外觀」兩次，將「變換」效果應(yīng)用：

接著，取消這個(gè)對(duì)象的編組，全選取消編組后的所有直線，最后再執(zhí)行命令「建立參考線」就可以了（具體方法可查看上篇教程：使用 Adobe Illustrator 做 UI 設(shè)計(jì)——靈活使用參考線 ）：

豎線同理，畫直線，使用「變換」效果復(fù)制，使用「擴(kuò)展外觀」命令應(yīng)用效果，取消編組兩次，建立參考線：

Done.

為什么沒有說 AI 內(nèi)置的網(wǎng)格效果（即使用快捷鍵 [ Cmd ] + [ ' ] 開啟的那個(gè)）？因?yàn)槟莻€(gè)網(wǎng)格是 AI 的全局設(shè)置，并不是基于文檔的。如果不同的文檔使用了不同規(guī)格的網(wǎng)格，那么每次切換文檔時(shí)都在首選項(xiàng)里改變?cè)O(shè)置。因此，這個(gè)功能基本上是雞肋。

完結(jié)。

原文地址：zhangboning
作者：@張泊寧研究所

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】
 
================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個(gè)分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程的干貨網(wǎng)站。
【特色推薦】
PS禮儀手冊(cè)：網(wǎng)頁設(shè)計(jì)師必須修煉的內(nèi)功技法，更是不可或缺的WEB設(shè)計(jì)指南http://hao.uisdc.com/ps/。
設(shè)計(jì)微博：擁有粉絲量63萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計(jì) 微信號(hào)：【youshege】?jī)?yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：