中國代碼網

用Illustrator 10做簡單網頁

發表時間:2010-01-10 12:05

溫馨提示:您可以點擊下面的鏈接閱讀或打印用Illustrator 10做簡單網頁全文。

更多
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.最后輸出的文件應該大概和下面這張圖片差不多。

溫馨提示:您可以點擊下面的鏈接閱讀或打印用Illustrator 10做簡單網頁全文。

  • 本站刊登此文只為傳遞信息,并不表示贊同或者反對作者觀點。
  • 如果此內容給您造成了負面影響或者損失,本站不承擔任何責任。
  • 如果內容涉及版權問題,請及時與我們取得聯系。
179
更多
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99