11個(gè)小貼士！試試用illustrator來做網(wǎng)頁

@bubble丹?：現(xiàn)在大部分的網(wǎng)頁設(shè)計(jì)師都是用photoshop來作為網(wǎng)頁設(shè)計(jì)的基本工具的，殊不知其實(shí)用Illustrator也可以做出很棒的網(wǎng)頁，或許還比ps更方便，下面就讓我們一起來看一下有哪些小技巧吧！

這里有一個(gè)瘋狂的想法——用AI來制作你的下一個(gè)web項(xiàng)目。 如果你是一個(gè)網(wǎng)頁設(shè)計(jì)師，那么你肯定對(duì)這個(gè)提議不看好。AI中并不能做出PS的很多效果對(duì)么？PS是基本的網(wǎng)頁設(shè)計(jì)工具，AI只是在你需要的時(shí)候用一下。因?yàn)閜s的圖層以及它的程序設(shè)置更適合做網(wǎng)頁。

可是我連用PS設(shè)計(jì)網(wǎng)頁都不會(huì)怎么辦？
《PS經(jīng)典教程：從零開始設(shè)計(jì)一個(gè)漂亮的網(wǎng)頁》
《PS教程：教你設(shè)計(jì)有范兒的個(gè)人作品時(shí)間軸網(wǎng)頁》

由于大多數(shù)UI設(shè)計(jì)師都不愿意到處找AI的教程，于是這里我列出了AI的一些設(shè)計(jì)小貼士，在設(shè)計(jì)網(wǎng)頁時(shí)可以用的工具。 嘗試了這些之后，我保證你會(huì)學(xué)會(huì)用AI來做一個(gè)網(wǎng)頁。

一、將所有單位設(shè)置為像素

默認(rèn)情況下，Illustrator使用公制單位的尺寸和點(diǎn)。這些都是設(shè)計(jì)大多數(shù)情況下的設(shè)置，但對(duì)于網(wǎng)頁設(shè)計(jì)，你就需要設(shè)置為像素了。所以，你開始工作之前，請(qǐng)確保你的單位是否設(shè)置正確。

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

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

當(dāng)你開始你的新設(shè)計(jì),很容易瀏覽新文檔和一些重要的細(xì)節(jié),如果告訴AI你要?jiǎng)?chuàng)建web對(duì)象,這樣就不會(huì)選擇CMYK顏色和邊緣模糊的對(duì)象。在新文檔窗口一定要選擇“web”配置文件設(shè)置,一切都會(huì)好的。

三、打開對(duì)齊像素網(wǎng)絡(luò)

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

如何設(shè)置： 1、點(diǎn)擊窗口-變換 2、勾選對(duì)齊像素網(wǎng)格 如果沒有下面的選項(xiàng)就點(diǎn)擊右上角的小三角，顯示隱藏選項(xiàng)

四、使用像素預(yù)覽

像素預(yù)覽功能將使AI就像PS一樣，當(dāng)放大你的作品超過100%就會(huì)出現(xiàn)像素格，而不是完美的矢量模式。

如何設(shè)置： 1、點(diǎn)擊視圖 2、勾選像素預(yù)覽

五、使用浮動(dòng)窗口

假設(shè)你有兩臺(tái)攝像機(jī)對(duì)準(zhǔn)你的設(shè)計(jì)。一個(gè)相機(jī)在正常水平，以100%的比例展示你的作品。另一臺(tái)相機(jī)在你工作的時(shí)候以400%的縮放比例對(duì)準(zhǔn)特定的圖標(biāo)，類似于一個(gè)外科醫(yī)生。你用放大的相機(jī)觀察細(xì)節(jié)、圖標(biāo)像素的變化，用實(shí)際大小來觀察整體。這個(gè)功能在你要繪制小細(xì)節(jié)的時(shí)候特別的方便。

如何設(shè)置： 1、點(diǎn)擊窗口-新建窗口 2、點(diǎn)擊窗口-在窗口中浮動(dòng) 3、你可以自由調(diào)整縮放窗口大小，來更高效配合你的工作

六、使用符號(hào)庫（symbols tool）來快速創(chuàng)建按鈕、圖標(biāo)

有多少次你在PS中創(chuàng)建相同（接近）的按鈕或小部件？如果你是網(wǎng)頁設(shè)計(jì)師，你可能每一天都在這樣做。 AI可以幫您節(jié)省時(shí)間，并避免這種重復(fù)的工作。在符號(hào)中，你可以通過簡(jiǎn)單的拖拽來完成添加及使用符號(hào)按鈕。而不必重頭開始創(chuàng)建。還可以同步修改同一符號(hào)。 但符號(hào)還有另外一個(gè)強(qiáng)大的功能，那就是實(shí)例。

基本上，當(dāng)你改變?cè)嫉姆?hào)，這些更改會(huì)立即反映在所有的符號(hào)上。你要在所有頁面上尋找不同的形式？只是改變符號(hào)就行。 提示：如果你不想同時(shí)改變某個(gè)特殊的符號(hào)，只需選中它，點(diǎn)擊右鍵-斷開符號(hào)鏈接。當(dāng)你更改原始符號(hào)時(shí)，它就不會(huì)一起更新啦。

使用現(xiàn)有符號(hào)： 1、點(diǎn)擊窗口-符號(hào) 2、從符號(hào)窗口拖拽出你想要的符號(hào) 創(chuàng)建一個(gè)新的符號(hào)： 1、點(diǎn)擊窗口-符號(hào) 2、創(chuàng)建一個(gè)新的符號(hào) 3、把新符號(hào)拖拽至符號(hào)窗口中 4、彈出對(duì)話框點(diǎn)擊確認(rèn) 編輯符號(hào)： 1、從窗口菜單打開符號(hào)面板 2、雙擊進(jìn)入編輯模式 3、當(dāng)完成后，雙擊符號(hào)之外的任何地方來推出編輯模式

七、使用9格切片來縮放

這是符號(hào)的一個(gè)高級(jí)功能，允許縮放符號(hào)中的特定部分。

左：一個(gè)按鈕，拉伸時(shí)無9格切片縮放設(shè)置的例子。右：建立9格切片縮放，告訴AI對(duì)象的哪些部分是受保護(hù)的，哪些部分可以縮放。 一個(gè)實(shí)際的例子是一個(gè)圓角按鈕，如果你想把它變得更長(zhǎng)，你不能簡(jiǎn)單的把它拉伸，因?yàn)檫@樣會(huì)扭曲整個(gè)對(duì)象。相反，你必須手動(dòng)移動(dòng)形狀點(diǎn)。這時(shí)9格切片的優(yōu)勢(shì)就顯現(xiàn)出來啦。

八、圓角無處不在

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

創(chuàng)建一個(gè)圓角的效果：

1、創(chuàng)建一個(gè)矩形或尖角的任何其他對(duì)象 2、在效果菜單中，選擇圓角化，輸入圓角半徑和預(yù)覽 3、單擊確定應(yīng)用效果 改變一個(gè)圓角的效果： 1、選擇一個(gè)圓角的對(duì)象 2、從窗口菜單打開外觀面板 3、定位并雙擊圓角效果更改其設(shè)置或單擊眼睛圖標(biāo)來打開或關(guān)閉

九、快速創(chuàng)建位圖圖案填充

微妙的背景圖案在網(wǎng)頁設(shè)計(jì)中應(yīng)用很多，但很多設(shè)計(jì)師認(rèn)為在AI中不能輕松應(yīng)用。但其實(shí)解決方法很簡(jiǎn)單。

創(chuàng)建一個(gè)填充模式：

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

十、使用文字自動(dòng)懸浮在圖像周圍

在PS中的文字編輯功能實(shí)在令人頭疼，如果你想使文字環(huán)繞圖片，你必須創(chuàng)建兩個(gè)或三個(gè)不同的文本框來模仿效應(yīng)。 幸運(yùn)的是，AI可以直接做到。

方法： 1、AI中實(shí)現(xiàn)文本繞排必須是文本框內(nèi)的文本才可以，也就是說，必須是用文字工具拖拽出來的文本框里輸入的文字才能文本繞排 2、將文字輸入或粘貼到拖拽出來的文本框中 3、置入圖片，或繪制圖形 4、將圖片或圖形置于文本框上方你想放置的位置，主意，必須是在文本框的上面 5、選中圖片或圖形，執(zhí)行---“對(duì)象菜單”--“文本繞排”---建立 命令 如果想調(diào)整圖片和文字間的間距，還是執(zhí)行---“對(duì)象”---“文本繞排”---“選項(xiàng)”，在彈出的面板里有個(gè)“位移”輸入框，這個(gè)就是圖片和文字的間距

十一、使用文字自動(dòng)懸浮在圖像周圍

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

看完這些，你準(zhǔn)備好用AI來設(shè)計(jì)網(wǎng)頁了么？

原文地址：99designs
優(yōu)設(shè)網(wǎng)翻譯：@bubble丹

本文由優(yōu)設(shè)網(wǎng)uisdc.com原創(chuàng)翻譯，轉(zhuǎn)摘請(qǐng)注明優(yōu)設(shè)網(wǎng)譯文出處，謝謝各位小編。

【優(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)站。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量66萬的人氣微博@優(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è)哥的全拼
您也可以通過掃描下方二維碼快速添加：