本教程中腳本之家上學(xué)習(xí)AI的朋友們將學(xué)習(xí)到AI制作一個簡單的網(wǎng)頁界面的方法介紹，教程比較簡單，喜歡的朋友快來學(xué)習(xí)一下吧！

1．首先用ill設(shè)計(jì)出網(wǎng)頁的大體布局。

2．然后選中幾個按鈕，執(zhí)行object/slice/make命令，立刻就出現(xiàn)了我們需要的切片。這種切片可以根據(jù)對象的大小進(jìn)行自動調(diào)整的，對于設(shè)計(jì)網(wǎng)頁十分方便。

3．對于網(wǎng)頁下面的文字，由于字體比較小，直接輸出成圖片可能不太容易看清楚，所以我們先用工具箱中的"切片工具"手工設(shè)置一個切片范圍（切片編號為15），這個切片中的內(nèi)容以后可以在Dreamweaver或者golive中進(jìn)一步編輯，最后處理成文字可能效果更好一些。

4．用"切片選擇工具"可以調(diào)整切片的大小。

5．然后選擇file/save for web命令，將出現(xiàn)下面的面板。用"切片選擇工具"可以選擇不同的切片并對它們進(jìn)行不同的優(yōu)化處理：首先根據(jù)切片中圖像的特征，確定優(yōu)化方式是gif、jpeg還是png格式；然后再為各種圖像格式選擇合理的優(yōu)化參數(shù)（這一步不太好說明白，先跳過去了）。在"圖像尺寸"面板中，可以確定網(wǎng)頁輸出的尺寸。

6．點(diǎn)擊面板右下方的ie圖標(biāo)，可以對將要輸出的網(wǎng)頁進(jìn)行預(yù)覽。一切就緒后點(diǎn)擊"保存"按鈕，在彈出的對話框中選擇"html and image"輸出。

7．下面回到illustrator中繼續(xù)進(jìn)行處理。為了作出"鼠標(biāo)經(jīng)過效果"（就是rollover效果，不知道怎么翻譯才好，暫時先用這個吧），再次選擇幾個按鈕，更改一下按鈕的顏色。

8．然后選擇file/save for web命令，首先不要忘記將圖像尺寸調(diào)整到和第一次一樣的大小，然后用"切片選擇工具"同時選中所有按鈕（按住shift鍵）。

9．優(yōu)化完畢后，點(diǎn)擊save進(jìn)行輸出，首先要把文件改一個名字，要不然會覆蓋掉第一次輸出的圖像，比如第一次輸出時文件的名稱為index，那么第二次輸出時不妨就叫indexover。然后在保存類型中選擇"image only"，在最后一個選項(xiàng)中選擇"selected slices"進(jìn)行輸出。

10．最后輸出的文件應(yīng)該大概和下面這張圖片差不多。

教程結(jié)束，以上就是AI制作一個簡單的網(wǎng)頁界面教程，希望大家喜歡！

最新評論