如何用AI製作一個簡單的網頁介面
本教程中上學習AI的朋友們將學習到AI製作一個簡單的網頁介面的方法介紹，教程比較簡單，喜歡的朋友快來學習一下吧！
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．最後輸出的檔案應該大概和下面這張圖片差不多。
教程結束，以上就是AI製作一個簡單的網頁介面教程，希望大家喜歡！
【如何用AI製作一個簡單的網頁介面】相關文章：