試試用ILLUSTRATOR來做網頁

 　　由於大多數UI設計師都不願意到處找AI的教程，於是這裡我列出了AI的一些設計小貼士，在設計網頁時可以用的工具。 嘗試了這些之後，我保證你會學會用AI來做一個網頁。

　　一、將所有單位設置為像素

　　默認情況下，Illustrator使用公制單位的尺寸和點。這些都是設計大多數情況下的設置，但對於網頁設計，你就需要設置為像素了。所以，你開始工作之前，請確保你的單位是否設置正確。

　　如何設置單位： 1、打開編輯菜單 2、從首選項子菜單中選擇單位 3、設置所有單位為“像素”

　　二、新建文檔配置文件類型選擇 Web

　　當你開始你的新設計,很容易浏覽新文檔和一些重要的細節,如果告訴AI你要創建web對象,這樣就不會選擇CMYK顏色和邊緣模糊的對象。在新文檔窗口一定要選擇“web”配置文件設置,一切都會好的。

　　三、打開對齊像素網絡

　　此功能是一個生命的救星，如果你曾經存在Photoshop模糊邊緣形狀的問題。他可以調整垂直和水平的對象使他們完全匹配像素網格，同時保持彎曲和傾斜段的鋸齒。這就呈現出了你在網頁設計中所想要的完美像素。

　　如何設置： 1、點擊窗口-變換 2、勾選對齊像素網格 如果沒有下面的選項就點擊右上角的小三角，顯示隱藏選項

　　四、使用像素預覽

　　像素預覽功能將使AI就像PS一樣，當放大你的作品超過100%就會出現像素格，而不是完美的矢量模式。

　　如何設置： 1、點擊視圖 2、勾選像素預覽

　　五、使用浮動窗口

　　假設你有兩台攝像機對准你的設計。一個相機在正常水平，以100%的比例展示你的作品。另一台相機在你工作的時候以400%的縮放比例對准特定的圖標，類似於一個外科醫生。你用放大的相機觀察細節、圖標像素的變化，用實際大小來觀察整體。這個功能在你要繪制小細節的時候特別的方便。

　　如何設置： 1、點擊窗口-新建窗口 2、點擊窗口-在窗口中浮動 3、你可以自由調整縮放窗口大小，來更高效配合你的工作

　　六、使用符號庫(symbols tool)來快速創建按鈕、圖標

　　有多少次你在PS中創建相同(接近)的按鈕或小部件?如果你是網頁設計師，你可能每一天都在這樣做。 AI可以幫您節省時間，並避免這種重復的工作。在符號中，你可以通過簡單的拖拽來完成添加及使用符號按鈕。而不必重頭開始創建。還可以同步修改同一符號。 但符號還有另外一個強大的功能，那就是實例。

　　基本上，當你改變原始的符號，這些更改會立即反映在所有的符號上。你要在所有頁面上尋找不同的形式?只是改變符號就行。 提示：如果你不想同時改變某個特殊的符號，只需選中它，點擊右鍵-斷開符號鏈接。當你更改原始符號時，它就不會一起更新啦。

　　使用現有符號： 1、點擊窗口-符號 2、從符號窗口拖拽出你想要的符號 創建一個新的符號： 1、點擊窗口-符號 2、創建一個新的符號 3、把新符號拖拽至符號窗口中 4、彈出對話框點擊確認 編輯符號： 1、從窗口菜單打開符號面板 2、雙擊進入編輯模式 3、當完成後，雙擊符號之外的任何地方來推出編輯模式

　　七、使用9格切片來縮放

　　這是符號的一個高級功能，允許縮放符號中的特定部分。

　　左：一個按鈕，拉伸時無9格切片縮放設置的例子。右：建立9格切片縮放，告訴AI對象的哪些部分是受保護的，哪些部分可以縮放。 一個實際的例子是一個圓角按鈕，如果你想把它變得更長，你不能簡單的把它拉伸，因為這樣會扭曲整個對象。相反，你必須手動移動形狀點。這時9格切片的優勢就顯現出來啦。

　　八、圓角無處不在

　　你可以在PS中創建圓角矩形，但在AI中你可以創建圓角的任何圖形。這是一種非破壞性的效果，這意味著你可以把它打開、關閉而不影響底層的原始圖像。

　　創建一個圓角的效果：

　　1、創建一個矩形或尖角的任何其他對象 2、在效果菜單中，選擇圓角化，輸入圓角半徑和預覽 3、單擊確定應用效果 改變一個圓角的效果： 1、選擇一個圓角的對象 2、從窗口菜單打開外觀面板 3、定位並雙擊圓角效果更改其設置或單擊眼睛圖標來打開或關閉

　　九、快速創建位圖圖案填充

　　微妙的背景圖案在網頁設計中應用很多，但很多設計師認為在AI中不能輕松應用。但其實解決方法很簡單。

　　創建一個填充模式：

　　1、將圖像拖入你的作品 2、單擊上方功能欄的嵌入(非常重要) 3、拖入色板 4、應用樣本到任何對象來填充圖案

　　十、使用文字自動懸浮在圖像周圍

　　在PS中的文字編輯功能實在令人頭疼，如果你想使文字環繞圖片，你必須創建兩個或三個不同的文本框來模仿效應。 幸運的是，AI可以直接做到。

　　方法： 1、AI中實現文本繞排必須是文本框內的文本才可以，也就是說，必須是用文字工具拖拽出來的文本框裡輸入的文字才能文本繞排 2、將文字輸入或粘貼到拖拽出來的文本框中 3、置入圖片，或繪制圖形 4、將圖片或圖形置於文本框上方你想放置的位置，主意，必須是在文本框的上面 5、選中圖片或圖形，執行—“對象菜單”–“文本繞排”—建立 命令 如果想調整圖片和文字間的間距，還是執行—“對象”—“文本繞排”—“選項”，在彈出的面板裡有個“位移”輸入框，這個就是圖片和文字的間距

　　十一、使用文字自動懸浮在圖像周圍

　　AI中的外觀面板和PS中的圖層樣式比較類似，可以添加投影、描邊等效果。

　　看完這些，你准備好用AI來設計網頁了麼?