@張泊寧研究所?：Adobe Illustrator 誕生在 1986 年，運(yùn)行在 Macintosh 機(jī)上。在當(dāng)時(shí)，Adobe Illustrator 是 Adobe 公司的早期產(chǎn)品之一，甚至早于 Photoshop。Adobe 的創(chuàng)始人 John Warnock 帶頭開發(fā)這款產(chǎn)品，最初是希望將自己作為平面設(shè)計(jì)師的妻子從繁瑣的工作流程中解放出來（關(guān)于 AI 早期各種八卦可以參看這個(gè) App：iTunes 的 App Store 中的“AI Early Years）。

所以可以說，Adobe Illustrator 最初的客戶群體是平面設(shè)計(jì)師。雖然后來 Adobe 為 UI 設(shè)計(jì)、Web 設(shè)計(jì)等給 Illustrator 新增了一些特性和功能，不過大體上講，Adobe Illustrator 仍然更側(cè)重版式設(shè)計(jì)領(lǐng)域。自然而然的，AI 也擁有較 Photoshop 更強(qiáng)大的排版工具，比如更加強(qiáng)大的參考線和網(wǎng)格功能，這次就說說 AI 里的參考線。

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

參考線是做版式設(shè)計(jì)、Web 設(shè)計(jì)和 UI 設(shè)計(jì)的重要工具，用來保持版面元素之間的一致性與協(xié)調(diào)。在 AI 里，創(chuàng)建參考線有數(shù)種辦法。

第一種辦法與 PS 類似，按 Cmd+R，顯示標(biāo)尺，然后點(diǎn)擊標(biāo)尺，將參考線從標(biāo)尺上拖拽出來，對(duì)齊到想要對(duì)齊到的對(duì)象上，如圖：

這樣，參考線就建立好可以使用了：

另一種辦法更加靈活，AI 可以將任何線條轉(zhuǎn)化為參考線。橫著豎著斜著的直線都可以轉(zhuǎn)為參考線，甚至畫個(gè)圓也可以轉(zhuǎn)成參考線。這次，用實(shí)戰(zhàn)來舉例：創(chuàng)建一個(gè) iOS 7 圖標(biāo)模板：

可能很多人都知道了，相對(duì)于以前版本的，iOS 7 的圖標(biāo)形狀有兩點(diǎn)改變：

1. 在 iPhone 、iPod touch 上，由原先的 114x114 px (57x57 pt) 變?yōu)?120x120 px，不再支持非 Retina 屏幕（圖片摘自 WWDC 2013 Session 208: What's New in iOS User Interface Design 的 PDF) ：

2. 使用純粹的圓角看上去會(huì)覺得圓角與直邊連接處很「硌硬」，iOS 7 使用羊角螺線作為緩和曲線解決了這個(gè)問題，因?yàn)檠蚪锹菥€的曲率變化更加平滑。其中緩和曲線「圓角」大小約為 38 px。如圖：

好，知道這些后，我們就做一個(gè)圖標(biāo)模板吧。

首先，新建一個(gè)文檔，尺寸為 120x120，顏色模式 RGB，不要勾選「使新建對(duì)象與像素網(wǎng)格對(duì)齊」。

然后，到這里：File:Euler spiral.svg?下載羊角螺線的 SVG 矢量圖像，用 AI 打開：

打開以后，用選擇工具和直接選擇工具大開刪戒，一直刪成這個(gè)樣子，即只保留曲線右半部分，從原點(diǎn)到原點(diǎn)右邊第五個(gè)錨點(diǎn)：

之所以截到原點(diǎn)右邊第五個(gè)點(diǎn)，是因?yàn)樵谶@個(gè)點(diǎn)曲線切線斜率剛好為 1，即在這一點(diǎn)上曲線切線的夾角剛好是 45 度，方便使用。

然后，把這段曲線復(fù)制進(jìn)剛才新建的文檔里：然后再?gòu)?fù)制出一個(gè)，做一下上下對(duì)稱、旋轉(zhuǎn) -90 度，讓曲線能夠接上。確保兩條曲線的端點(diǎn)對(duì)上后，使用「連接」命令連接兩條曲線。接著把連接好的曲線大小設(shè)置為 38x38 像素。最后放在畫板右下角。步驟可能說起來有些繁瑣，總之嘛，做好后應(yīng)該是這樣的：

用直線工具和「連接」命令，把這四分之一圖標(biāo)形狀其他部分給補(bǔ)上：

把這段曲線復(fù)制、鏡像幾次，圖標(biāo)的大體形狀就出來了，最好再用「連接」命令，將四段曲線連接為完整的一圈：

好，圖標(biāo)的形狀出來了。接下來要做的是，使用參考線，把圖形內(nèi)部網(wǎng)格線做出來。

用直線和方框工具，給這個(gè)圖形里面畫一個(gè)米字和一個(gè)方框，這樣：

然后重點(diǎn)來了，選中剛才畫的米字和方框，右鍵點(diǎn)擊，選擇「建立參考線」命令：

就可以根據(jù)選擇的米字和方框，把參考線建立好了：

如法炮制，在方框里畫一個(gè)內(nèi)接圓，并轉(zhuǎn)為參考線：

利用 AI 的吸附功能，從每個(gè)曲線剛剛由直線被掰彎的那個(gè)點(diǎn)上畫線（不太好描述，總之見圖吧），轉(zhuǎn)為參考線：

最后，給最里面的方框畫一個(gè)內(nèi)切圓和外接圓，并轉(zhuǎn)化為參考線，就基本完成了：

把參考圖放進(jìn)去對(duì)比看一下，match perfectly！

最后，用「存儲(chǔ)為模板」命令，將其存成一個(gè)模板。每次做 iOS 7 圖標(biāo)時(shí)，使用「從模板中新建」命令，選擇這個(gè)模板，就可以方便快速地新建一個(gè)帶參考線的 iOS 7 圖標(biāo)了。

使用參考線相對(duì)于直接用普通的線條、線框相比有什么優(yōu)點(diǎn)呢？首先，參考線顯示起來，始終是 1px 寬度，無論放大還是縮小圖稿都能顯示清楚，普通的線條就不可以。再有，參考線可以使用快捷鍵 Cmd+; 快速隱藏或顯示。另外，參考線通常處于鎖定狀態(tài)，不太會(huì)被誤編輯。還有，參考線在所在圖層永遠(yuǎn)處于最上方顯示，等等。

今天就到這里吧，下節(jié)課說說 Adobe Illustrator 里的網(wǎng)格功能。

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

【優(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)頁(yè)設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程的干貨網(wǎng)站。
【特色推薦】
PS禮儀手冊(cè)：網(wǎng)頁(yè)設(shè)計(jì)師必須修煉的內(nèi)功技法，更是不可或缺的WEB設(shè)計(jì)指南http://hao.uisdc.com/ps/。
設(shè)計(jì)微博：擁有粉絲量63萬的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(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)頁(yè)設(shè)計(jì) 微信號(hào)：【youshege】?jī)?yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：