參考線是做版式設(shè)計、Web設(shè)計和UI設(shè)計的重要工具，用來保持版面元素之間的一致性與協(xié)調(diào)。在AI里，創(chuàng)建參考線有數(shù)種辦法。本教程就為大家詳細(xì)解析AI參考線創(chuàng)建技巧及使用方法，介紹的很詳細(xì)，知識點很多，推薦給大家，希望大家能從中學(xué)到很多知識！

簡介：

AdobeIllustrator誕生在1986年，運(yùn)行在Macintosh機(jī)上。在當(dāng)時，AdobeIllustrator是Adobe公司的早期產(chǎn)品之一，甚至早于Photoshop。Adobe的創(chuàng)始人JohnWarnock帶頭開發(fā)這款產(chǎn)品，最初是希望將自己作為平面設(shè)計師的妻子從繁瑣的工作流程中解放出來。

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

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

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

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

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

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

1.在iPhone、iPodtouch上，由原先的114×114px(57×57pt)變?yōu)?20×120px，不再支持非Retina屏幕(圖片摘自WWDC2013Session208:What’sNewiniOSUserInterfaceDesign的PDF)：

2.使用純粹的圓角看上去會覺得圓角與直邊連接處很「硌硬」，iOS7使用羊角螺線作為緩和曲線解決了這個問題，因為羊角螺線的曲率變化更加平滑。其中緩和曲線「圓角」大小約為38px。如圖：

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

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

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

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

之所以截到原點右邊第五個點，是因為在這個點曲線切線斜率剛好為1，即在這一點上曲線切線的夾角剛好是45度，方便使用。

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

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

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

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

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

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

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

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

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

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

把參考圖放進(jìn)去對比看一下，matchperfectly!

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

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

今天就到這里吧，希望對AI參考線創(chuàng)建技巧及使用有所了解，并能靈活地運(yùn)用到工作當(dāng)中！謝謝大家觀賞！

最新評論