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做一個簡單的網頁
(王朝網路 wangchao.net.cn)
 
转播到腾讯微博  
 
 
 
 
 
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]
 
  免責聲明:本文僅代表作者個人觀點,與王朝網路無關。王朝網路登載此文出於傳遞更多信息之目的,並不意味著贊同其觀點或證實其描述,其原創性以及文中陳述文字和內容未經本站證實,對本文以及其中全部或者部分內容、文字的真實性、完整性、及時性本站不作任何保證或承諾,請讀者僅作參考,並請自行核實相關內容。
 
網友評論 查看所有評論
 

 
王朝美圖
美麗新娘婚紗寫真
心中的天使
老屋/新女
花容月貌的純情美女
One night in Shenyang.昭陵
西藏高原
午後的公園
溪頭印象
 
2006-01-14 19:29:09 简体版 編輯
 轉載本文
 UBB代碼 HTML代碼
複製到剪貼板...
 
 
王朝简体
 
王朝分站
 
王朝編程
 
王朝简体
 
王朝其他
 
 
 
© 2005- 王朝網路 版權所有