| 導購 | 订阅 | 在线投稿
分享
 
 
 

用Illustrator10做一個簡單的網頁

2006-01-14 19:29:09  編輯來源:互聯網  简体版  手機版  移動版  評論  字體: ||

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

用Illustrator10做一個簡單的網頁

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

用Illustrator10做一個簡單的網頁

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

用Illustrator10做一個簡單的網頁

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

用Illustrator10做一個簡單的網頁

5.然後選擇File/Save for Web命令,將出現下面的面板。用「切片選擇工具」可以選擇不同的切片並對它們進行不同的優化處理:首先根據切片中圖像的特征,確定優化方式是Gif、JPEG還是PNG格式;然後再爲各種圖像格式選擇合理的優化參數(這一步不太好說明白,先跳過去了)。在「圖像尺寸」面板中,可以確定網頁輸出的尺寸。

用Illustrator10做一個簡單的網頁

6.點擊面板右下方的IE圖標,可以對將要輸出的網頁進行預覽。一切就緒後點擊「保存」按鈕,在彈出的對話框中選擇「Html and Image」輸出。

用Illustrator10做一個簡單的網頁

7.下面回到Illustrator中繼續進行處理。爲了作出「鼠標經過效果」(就是Rollover效果,不知道怎麽翻譯才好,暫時先用這個吧),再次選擇幾個按鈕,更改一下按鈕的顔色。

用Illustrator10做一個簡單的網頁

8.然後選擇File/Save for Web命令,首先不要忘記將圖像尺寸調整到和第一次一樣的大小,然後用「切片選擇工具」同時選中所有按鈕(按住Shift鍵)。

用Illustrator10做一個簡單的網頁

9.優化完畢後,點擊Save進行輸出,首先要把文件改一個名字,要不然會覆蓋掉第一次輸出的圖像,比如第一次輸出時文件的名稱爲Index,那麽第二次輸出時不妨就叫Indexover。然後在保存類型中選擇「Image Only」,在最後一個選項中選擇「Selected Slices」進行輸出。

用Illustrator10做一個簡單的網頁

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

用Illustrator10做一個簡單的網頁

11.最後在用Dreamweaver和Golive這樣的軟件進行一下簡單的編輯,最終效果就是下面這張圖了。

用Illustrator10做一個簡單的網頁

1.首先用ill設計出網頁的大體布局。 [url=/bbs/detail_82180.html][img]http://www.duomeiti8.org/MPicture/UploadFiles/200512595724734.gif[/img][/url] 2.然後選中幾個按鈕,執行Object/Slice/make命令,立刻就出現了我們需要的切片。這種切片可以根據對象的大小進行自動調整的,對于設計網頁十分方便。 [url=/bbs/detail_82180.html][img]http://www.duomeiti8.org/MPicture/UploadFiles/200512595724580.gif[/img][/url] 3.對于網頁下面的文字,由于字體比較小,直接輸出成圖片可能不太容易看清楚,所以我們先用工具箱中的「切片工具」手工設置一個切片範圍(切片編號爲15),這個切片中的內容以後可以在Dreamweaver或者Golive中進一步編輯,最後處理成文字可能效果更好一些。 [url=/bbs/detail_82180.html][img]http://www.duomeiti8.org/MPicture/UploadFiles/200512595724621.gif[/img][/url] 4.用「切片選擇工具」可以調整切片的大小。 [url=/bbs/detail_82180.html][img]http://www.duomeiti8.org/MPicture/UploadFiles/200512595724360.gif[/img][/url] 5.然後選擇File/Save for Web命令,將出現下面的面板。用「切片選擇工具」可以選擇不同的切片並對它們進行不同的優化處理:首先根據切片中圖像的特征,確定優化方式是Gif、JPEG還是PNG格式;然後再爲各種圖像格式選擇合理的優化參數(這一步不太好說明白,先跳過去了)。在「圖像尺寸」面板中,可以確定網頁輸出的尺寸。 [url=/bbs/detail_82180.html][img]http://www.duomeiti8.org/MPicture/UploadFiles/200512595724371.gif[/img][/url] 6.點擊面板右下方的IE圖標,可以對將要輸出的網頁進行預覽。一切就緒後點擊「保存」按鈕,在彈出的對話框中選擇「Html and Image」輸出。 [url=/bbs/detail_82180.html][img]http://www.duomeiti8.org/MPicture/UploadFiles/200512595725797.gif[/img][/url] 7.下面回到Illustrator中繼續進行處理。爲了作出「鼠標經過效果」(就是Rollover效果,不知道怎麽翻譯才好,暫時先用這個吧),再次選擇幾個按鈕,更改一下按鈕的顔色。 [url=/bbs/detail_82180.html][img]http://www.duomeiti8.org/MPicture/UploadFiles/200512595725112.gif[/img][/url] 8.然後選擇File/Save for Web命令,首先不要忘記將圖像尺寸調整到和第一次一樣的大小,然後用「切片選擇工具」同時選中所有按鈕(按住Shift鍵)。 [url=/bbs/detail_82180.html][img]http://www.duomeiti8.org/MPicture/UploadFiles/200512595725784.gif[/img][/url] 9.優化完畢後,點擊Save進行輸出,首先要把文件改一個名字,要不然會覆蓋掉第一次輸出的圖像,比如第一次輸出時文件的名稱爲Index,那麽第二次輸出時不妨就叫Indexover。然後在保存類型中選擇「Image Only」,在最後一個選項中選擇「Selected Slices」進行輸出。 [url=/bbs/detail_82180.html][img]http://www.duomeiti8.org/MPicture/UploadFiles/200512595725833.gif[/img][/url] 10.最後輸出的文件應該大概和下面這張圖片差不多。 [url=/bbs/detail_82180.html][img]http://www.duomeiti8.org/MPicture/UploadFiles/200512595725738.gif[/img][/url] 11.最後在用Dreamweaver和Golive這樣的軟件進行一下簡單的編輯,最終效果就是下面這張圖了。 [url=/bbs/detail_82180.html][img]http://www.duomeiti8.org/MPicture/UploadFiles/200512595725140.gif[/img][/url]
󰈣󰈤
王朝萬家燈火計劃
期待原創作者加盟
 
 
 
>>返回首頁<<
 
 
 
 
 熱帖排行
 
王朝網路微信公眾號
微信掃碼關註本站公眾號 wangchaonetcn
 
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有