Illustrator如何制作一個簡單的網頁

　　蜂采百花釀甜蜜，人讀群書明真理。以下是小編為大家搜索整理的Illustrator如何制作一個簡單的網頁，希望能給大家帶來幫助!更多精彩內容請及時關注我們應屆畢業生考試網!

　　1.首先用ill設計出網頁的大體布局。

　　2.然后選中幾個按鈕，執行object/slice/make命令，立刻就出現了我們需要的切片。這種切片可以根據對象的大小進行自動調整的，對于設計網頁十分方便。

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

　　4.用“切片選擇工具”可以調整切片的大小。

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

　　6.點擊面板右下方的ie圖標，可以對將要輸出的網頁進行預覽。一切就緒后點擊“保存”按鈕，在彈出的對話框中選擇“html and image”輸出。

　　7.下面回到illustrator中繼續進行處理。為了作出“鼠標經過效果”(就是rollover效果，不知道怎么翻譯才好，暫時先用這個吧)，再次選擇幾個按鈕，更改一下按鈕的顏色。

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

　　9.優化完畢后，點擊save進行輸出，首先要把文件改一個名字，要不然會覆蓋掉第一次輸出的圖像，比如第一次輸出時文件的名稱為index，那么第二次輸出時不妨就叫indexover。然后在保存類型中選擇“image only”，在最后一個選項中選擇“selected slices”進行輸出。

　　10.最后輸出的文件應該大概和下面這張圖片差不多。

　　11.最后在用dreamweaver和golive這樣的軟件進行一下簡單的編輯，最終效果就是下面這張圖了。

【Illustrator如何制作一個簡單的網頁】相關文章：

如何制作規范的網頁10-11

如何制作自己的網頁08-20

如何制作網頁設計09-17

Dreamweaver如何制作網頁08-13

Dreamweaver如何制作網頁模板07-22

Dreamweaver如何制作網頁設計07-02

如何設計制作自適應網頁10-24

如何用Dreamweaver制作網頁模板08-15

如何制作自適應網頁設計10-15