- 相關(guān)推薦
Illustrator如何制作一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)
蜂采百花釀甜蜜，人讀群書(shū)明真理。以下是小編為大家搜索整理的Illustrator如何制作一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)，希望能給大家?guī)?lái)幫助!更多精彩內(nèi)容請(qǐng)及時(shí)關(guān)注我們應(yīng)屆畢業(yè)生考試網(wǎng)!
1.首先用ill設(shè)計(jì)出網(wǎng)頁(yè)的大體布局。
2.然后選中幾個(gè)按鈕，執(zhí)行object/slice/make命令，立刻就出現(xiàn)了我們需要的切片。這種切片可以根據(jù)對(duì)象的大小進(jìn)行自動(dòng)調(diào)整的，對(duì)于設(shè)計(jì)網(wǎng)頁(yè)十分方便。
3.對(duì)于網(wǎng)頁(yè)下面的文字，由于字體比較小，直接輸出成圖片可能不太容易看清楚，所以我們先用工具箱中的“切片工具”手工設(shè)置一個(gè)切片范圍(切片編號(hào)為15)，這個(gè)切片中的內(nèi)容以后可以在dreamweaver或者golive中進(jìn)一步編輯，最后處理成文字可能效果更好一些。
4.用“切片選擇工具”可以調(diào)整切片的大小。
5.然后選擇file/save for web命令，將出現(xiàn)下面的面板。用“切片選擇工具”可以選擇不同的切片并對(duì)它們進(jìn)行不同的優(yōu)化處理：首先根據(jù)切片中圖像的特征，確定優(yōu)化方式是gif、jpeg還是png格式;然后再為各種圖像格式選擇合理的優(yōu)化參數(shù)(這一步不太好說(shuō)明白，先跳過(guò)去了)。在“圖像尺寸”面板中，可以確定網(wǎng)頁(yè)輸出的尺寸。
6.點(diǎn)擊面板右下方的ie圖標(biāo)，可以對(duì)將要輸出的網(wǎng)頁(yè)進(jìn)行預(yù)覽。一切就緒后點(diǎn)擊“保存”按鈕，在彈出的對(duì)話(huà)框中選擇“html and image”輸出。
7.下面回到illustrator中繼續(xù)進(jìn)行處理。為了作出“鼠標(biāo)經(jīng)過(guò)效果”(就是rollover效果，不知道怎么翻譯才好，暫時(shí)先用這個(gè)吧)，再次選擇幾個(gè)按鈕，更改一下按鈕的顏色。
8.然后選擇file/save for web命令，首先不要忘記將圖像尺寸調(diào)整到和第一次一樣的大小，然后用“切片選擇工具”同時(shí)選中所有按鈕(按住shift鍵)。
9.優(yōu)化完畢后，點(diǎn)擊save進(jìn)行輸出，首先要把文件改一個(gè)名字，要不然會(huì)覆蓋掉第一次輸出的圖像，比如第一次輸出時(shí)文件的名稱(chēng)為index，那么第二次輸出時(shí)不妨就叫indexover。然后在保存類(lèi)型中選擇“image only”，在最后一個(gè)選項(xiàng)中選擇“selected slices”進(jìn)行輸出。
10.最后輸出的文件應(yīng)該大概和下面這張圖片差不多。
11.最后在用dreamweaver和golive這樣的軟件進(jìn)行一下簡(jiǎn)單的編輯，最終效果就是下面這張圖了。
【Illustrator如何制作一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)】相關(guān)文章：
如何制作自己的網(wǎng)頁(yè)08-20
如何制作網(wǎng)頁(yè)設(shè)計(jì)09-17
Dreamweaver如何制作網(wǎng)頁(yè)08-13
Dreamweaver如何制作網(wǎng)頁(yè)模板07-22
Dreamweaver如何制作網(wǎng)頁(yè)設(shè)計(jì)07-02
如何設(shè)計(jì)制作自適應(yīng)網(wǎng)頁(yè)10-24