本投影片（下稱教用資源）僅授權給採用教用資源相關之旗標書籍為教科書之授課老師（下稱老師）專用，老師為教學使用之目的，得摘錄、編輯、重製教用資源（但使用量不得超過各該教用資源內容之80%）以製作為輔助教學之教學投影片，並於授課時搭配旗標書籍公開播放，但不得為網際網路公開傳輸之遠距教學、網路教學等之使用；除此之外，老師不得再授權予任何第三人使用，並不得將依此授權所製作之教學投影片之相關著作物移作他用。

著作權所有 © 旗標出版股份有限公司

重新上色圖稿、切片及輸出成網頁用

圖片–畫室網頁

第 13 章

2 2

課前導讀

Illustrator 不僅可用來製作平面設計作品或插畫,

還可以製作網頁呢！本堂課將說明如何在

Illustrator 中製作適合網頁用途的設計, 以及利用切片功能分割版面、設定圖片檔名與輸出成網頁用圖片的方法, 讓你不需透過其他專門的網頁設計軟體, 就能完 成基本的網頁設計喔！

3 3

本堂課學習提要

網頁的版面設計

利用參考線建立切片以切割版面

選取、合併與刪除已建立的切片

開啟切片選項交談窗設定超連結

使用影像地圖設定超連結

將版面設計輸出成網頁

4

13-1 網頁的版面設計

設定頁面尺寸

設計網頁版面

4

5

設定頁面尺寸

6

設定頁面尺寸

7

設定頁面尺寸

8

置入 LOGO 及決定主色

9

置入 LOGO 及決定主色

10

置入 LOGO 及決定主色

11

設計網頁版面

12

運用重新上色圖稿功能設定選單顏色

13

運用重新上色圖稿功能設定選單顏色

14

運用重新上色圖稿功能設定選單顏色

15

運用重新上色圖稿功能設定選單顏色

16

運用重新上色圖稿功能設定選單顏色

17

運用重新上色圖稿功能設定選單顏色

18

運用隨意筆畫效果製作不規則變化的線條

19

運用隨意筆畫效果製作不規則變化的線條

20

運用隨意筆畫效果製作不規則變化的線條

21

運用隨意筆畫效果製作不規則變化的線條

22

運用隨意筆畫效果製作不規則變化的線條

23

設計網頁版面

24

設計網頁版面

25

13-2 建立影像切片及設定切片檔名

利用參考線建立切片

設定切片轉存後的圖片檔名

26

利用參考線建立切片

26

27

利用參考線建立切片

28

選取及合併切片

29

選取及合併切片

30

選取及合併切片

31

選取及合併切片

32

開啟切片選項交談窗設定圖片檔名

33

開啟切片選項交談窗設定圖片檔名

34

開啟切片選項交談窗設定圖片檔名

35

13-3 輸出成網頁用圖片

檢視圖片品質

36

檢視圖片品質

37

檢視圖片品質

38

檢視圖片品質