wangchao.net.cn
| 订阅该频道 | 在线投稿
分享到:
 
 
 
當前位置: 王朝網路 >> 圖像設計 >> 用Illustrator10做一個簡單的網頁

用Illustrator10做一個簡單的網頁

字體: ||
本文來源: 互聯網
  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=http://tc.wangchao.net.cn/bbs/detail_82180.html][img]http://www.duomeiti8.org/MPicture/UploadFiles/200512595724734.gif[/img][/url] 2.然後選中幾個按鈕,執行Object/Slice/make命令,立刻就出現了我們需要的切片。這種切片可以根據對象的大小進行自動調整的,對于設計網頁十分方便。 [url=http://tc.wangchao.net.cn/bbs/detail_82180.html][img]http://www.duomeiti8.org/MPicture/UploadFiles/200512595724580.gif[/img][/url] 3.對于網頁下面的文字,由于字體比較小,直接輸出成圖片可能不太容易看清楚,所以我們先用工具箱中的“切片工具”手工設置一個切片範圍(切片編號爲15),這個切片中的內容以後可以在Dreamweaver或者Golive中進一步編輯,最後處理成文字可能效果更好一些。 [url=http://tc.wangchao.net.cn/bbs/detail_82180.html][img]http://www.duomeiti8.org/MPicture/UploadFiles/200512595724621.gif[/img][/url] 4.用“切片選擇工具”可以調整切片的大小。 [url=http://tc.wangchao.net.cn/bbs/detail_82180.html][img]http://www.duomeiti8.org/MPicture/UploadFiles/200512595724360.gif[/img][/url] 5.然後選擇File/Save for Web命令,將出現下面的面板。用“切片選擇工具”可以選擇不同的切片並對它們進行不同的優化處理:首先根據切片中圖像的特征,確定優化方式是Gif、JPEG還是PNG格式;然後再爲各種圖像格式選擇合理的優化參數(這一步不太好說明白,先跳過去了)。在“圖像尺寸”面板中,可以確定網頁輸出的尺寸。 [url=http://tc.wangchao.net.cn/bbs/detail_82180.html][img]http://www.duomeiti8.org/MPicture/UploadFiles/200512595724371.gif[/img][/url] 6.點擊面板右下方的IE圖標,可以對將要輸出的網頁進行預覽。一切就緒後點擊“保存”按鈕,在彈出的對話框中選擇“Html and Image”輸出。 [url=http://tc.wangchao.net.cn/bbs/detail_82180.html][img]http://www.duomeiti8.org/MPicture/UploadFiles/200512595725797.gif[/img][/url] 7.下面回到Illustrator中繼續進行處理。爲了作出“鼠標經過效果”(就是Rollover效果,不知道怎麽翻譯才好,暫時先用這個吧),再次選擇幾個按鈕,更改一下按鈕的顔色。 [url=http://tc.wangchao.net.cn/bbs/detail_82180.html][img]http://www.duomeiti8.org/MPicture/UploadFiles/200512595725112.gif[/img][/url] 8.然後選擇File/Save for Web命令,首先不要忘記將圖像尺寸調整到和第一次一樣的大小,然後用“切片選擇工具”同時選中所有按鈕(按住Shift鍵)。 [url=http://tc.wangchao.net.cn/bbs/detail_82180.html][img]http://www.duomeiti8.org/MPicture/UploadFiles/200512595725784.gif[/img][/url] 9.優化完畢後,點擊Save進行輸出,首先要把文件改一個名字,要不然會覆蓋掉第一次輸出的圖像,比如第一次輸出時文件的名稱爲Index,那麽第二次輸出時不妨就叫Indexover。然後在保存類型中選擇“Image Only”,在最後一個選項中選擇“Selected Slices”進行輸出。 [url=http://tc.wangchao.net.cn/bbs/detail_82180.html][img]http://www.duomeiti8.org/MPicture/UploadFiles/200512595725833.gif[/img][/url] 10.最後輸出的文件應該大概和下面這張圖片差不多。 [url=http://tc.wangchao.net.cn/bbs/detail_82180.html][img]http://www.duomeiti8.org/MPicture/UploadFiles/200512595725738.gif[/img][/url] 11.最後在用Dreamweaver和Golive這樣的軟件進行一下簡單的編輯,最終效果就是下面這張圖了。 [url=http://tc.wangchao.net.cn/bbs/detail_82180.html][img]http://www.duomeiti8.org/MPicture/UploadFiles/200512595725140.gif[/img][/url]
 
  免責聲明:本文僅代表作者個人觀點,與王朝網路無關。王朝網路登載此文出於傳遞更多信息之目的,並不意味著贊同其觀點或證實其描述,其原創性以及文中陳述文字和內容未經本站證實,對本文以及其中全部或者部分內容、文字的真實性、完整性、及時性本站不作任何保證或承諾,請讀者僅作參考,並請自行核實相關內容。
 
 
 
 
 
王朝美圖
藝術體操冠軍小魚(3)
藝術體操冠軍小魚(2)
質感俱佳模特攝影(10)
質感俱佳模特攝影(9)
【小不點學攝影】頤和園
被遺忘的角落
含鄱口----鏡頭裏的廬山戀
城南舊事~~鳴羊裏〔劉芝田故居周邊〕
 
2006-01-14 19:29:09 简体版 編輯
 
 
 
 
 
 
 
 轉載本文
 UBB代碼 HTML代碼
複製到剪貼板...
 
王朝女性
 
王朝分栏
 
王朝編程
 
王朝简体
 
王朝其他
 
 
 
© 2005- 王朝網路 版權所有