重新上色圖稿、切片及輸出成網頁用 圖片...
TRANSCRIPT
![Page 1: 重新上色圖稿、切片及輸出成網頁用 圖片 畫室網頁w3.uch.edu.tw/chwei/illu/ppt/F3561_Ch13.pdf · 助教學之教學投影片,並於授課時搭配旗標書籍公開播放,但不得為網際網路公開傳輸之遠距教學、網路教學](https://reader034.vdocuments.pub/reader034/viewer/2022042613/5fa788b87021a765d04e430c/html5/thumbnails/1.jpg)
本投影片(下稱教用資源)僅授權給採用教用資源相關之旗標書籍為教科書之授課老師(下稱老師)專用,老師為教學使用之目的,得摘錄、編輯、重製教用資源(但使用量不得超過各該教用資源內容之80%)以製作為輔助教學之教學投影片,並於授課時搭配旗標書籍公開播放,但不得為網際網路公開傳輸之遠距教學、網路教學等之使用;除此之外,老師不得再授權予任何第三人使用,並不得將依此授權所製作之教學投影片之相關著作物移作他用。
著作權所有 © 旗標出版股份有限公司
重新上色圖稿、切片及輸出成網頁用
圖片–畫室網頁
第 13 章
![Page 2: 重新上色圖稿、切片及輸出成網頁用 圖片 畫室網頁w3.uch.edu.tw/chwei/illu/ppt/F3561_Ch13.pdf · 助教學之教學投影片,並於授課時搭配旗標書籍公開播放,但不得為網際網路公開傳輸之遠距教學、網路教學](https://reader034.vdocuments.pub/reader034/viewer/2022042613/5fa788b87021a765d04e430c/html5/thumbnails/2.jpg)
2 2
課前導讀
Illustrator 不僅可用來製作平面設計作品或插畫,
還可以製作網頁呢!本堂課將說明如何在
Illustrator 中製作適合網頁用途的設計, 以及利用切片功能分割版面、設定圖片檔名與輸出成網頁用圖片的方法, 讓你不需透過其他專門的網頁設計軟體, 就能完 成基本的網頁設計喔!
![Page 3: 重新上色圖稿、切片及輸出成網頁用 圖片 畫室網頁w3.uch.edu.tw/chwei/illu/ppt/F3561_Ch13.pdf · 助教學之教學投影片,並於授課時搭配旗標書籍公開播放,但不得為網際網路公開傳輸之遠距教學、網路教學](https://reader034.vdocuments.pub/reader034/viewer/2022042613/5fa788b87021a765d04e430c/html5/thumbnails/3.jpg)
3 3
本堂課學習提要
網頁的版面設計
利用參考線建立切片以切割版面
選取、合併與刪除已建立的切片
開啟切片選項交談窗設定超連結
使用影像地圖設定超連結
將版面設計輸出成網頁
![Page 4: 重新上色圖稿、切片及輸出成網頁用 圖片 畫室網頁w3.uch.edu.tw/chwei/illu/ppt/F3561_Ch13.pdf · 助教學之教學投影片,並於授課時搭配旗標書籍公開播放,但不得為網際網路公開傳輸之遠距教學、網路教學](https://reader034.vdocuments.pub/reader034/viewer/2022042613/5fa788b87021a765d04e430c/html5/thumbnails/4.jpg)
4
13-1 網頁的版面設計
設定頁面尺寸
設計網頁版面
4
![Page 5: 重新上色圖稿、切片及輸出成網頁用 圖片 畫室網頁w3.uch.edu.tw/chwei/illu/ppt/F3561_Ch13.pdf · 助教學之教學投影片,並於授課時搭配旗標書籍公開播放,但不得為網際網路公開傳輸之遠距教學、網路教學](https://reader034.vdocuments.pub/reader034/viewer/2022042613/5fa788b87021a765d04e430c/html5/thumbnails/5.jpg)
5
設定頁面尺寸
![Page 6: 重新上色圖稿、切片及輸出成網頁用 圖片 畫室網頁w3.uch.edu.tw/chwei/illu/ppt/F3561_Ch13.pdf · 助教學之教學投影片,並於授課時搭配旗標書籍公開播放,但不得為網際網路公開傳輸之遠距教學、網路教學](https://reader034.vdocuments.pub/reader034/viewer/2022042613/5fa788b87021a765d04e430c/html5/thumbnails/6.jpg)
6
設定頁面尺寸
![Page 7: 重新上色圖稿、切片及輸出成網頁用 圖片 畫室網頁w3.uch.edu.tw/chwei/illu/ppt/F3561_Ch13.pdf · 助教學之教學投影片,並於授課時搭配旗標書籍公開播放,但不得為網際網路公開傳輸之遠距教學、網路教學](https://reader034.vdocuments.pub/reader034/viewer/2022042613/5fa788b87021a765d04e430c/html5/thumbnails/7.jpg)
7
設定頁面尺寸
![Page 8: 重新上色圖稿、切片及輸出成網頁用 圖片 畫室網頁w3.uch.edu.tw/chwei/illu/ppt/F3561_Ch13.pdf · 助教學之教學投影片,並於授課時搭配旗標書籍公開播放,但不得為網際網路公開傳輸之遠距教學、網路教學](https://reader034.vdocuments.pub/reader034/viewer/2022042613/5fa788b87021a765d04e430c/html5/thumbnails/8.jpg)
8
置入 LOGO 及決定主色
![Page 9: 重新上色圖稿、切片及輸出成網頁用 圖片 畫室網頁w3.uch.edu.tw/chwei/illu/ppt/F3561_Ch13.pdf · 助教學之教學投影片,並於授課時搭配旗標書籍公開播放,但不得為網際網路公開傳輸之遠距教學、網路教學](https://reader034.vdocuments.pub/reader034/viewer/2022042613/5fa788b87021a765d04e430c/html5/thumbnails/9.jpg)
9
置入 LOGO 及決定主色
![Page 10: 重新上色圖稿、切片及輸出成網頁用 圖片 畫室網頁w3.uch.edu.tw/chwei/illu/ppt/F3561_Ch13.pdf · 助教學之教學投影片,並於授課時搭配旗標書籍公開播放,但不得為網際網路公開傳輸之遠距教學、網路教學](https://reader034.vdocuments.pub/reader034/viewer/2022042613/5fa788b87021a765d04e430c/html5/thumbnails/10.jpg)
10
置入 LOGO 及決定主色
![Page 11: 重新上色圖稿、切片及輸出成網頁用 圖片 畫室網頁w3.uch.edu.tw/chwei/illu/ppt/F3561_Ch13.pdf · 助教學之教學投影片,並於授課時搭配旗標書籍公開播放,但不得為網際網路公開傳輸之遠距教學、網路教學](https://reader034.vdocuments.pub/reader034/viewer/2022042613/5fa788b87021a765d04e430c/html5/thumbnails/11.jpg)
11
設計網頁版面
![Page 12: 重新上色圖稿、切片及輸出成網頁用 圖片 畫室網頁w3.uch.edu.tw/chwei/illu/ppt/F3561_Ch13.pdf · 助教學之教學投影片,並於授課時搭配旗標書籍公開播放,但不得為網際網路公開傳輸之遠距教學、網路教學](https://reader034.vdocuments.pub/reader034/viewer/2022042613/5fa788b87021a765d04e430c/html5/thumbnails/12.jpg)
12
運用重新上色圖稿功能設定選單顏色
![Page 13: 重新上色圖稿、切片及輸出成網頁用 圖片 畫室網頁w3.uch.edu.tw/chwei/illu/ppt/F3561_Ch13.pdf · 助教學之教學投影片,並於授課時搭配旗標書籍公開播放,但不得為網際網路公開傳輸之遠距教學、網路教學](https://reader034.vdocuments.pub/reader034/viewer/2022042613/5fa788b87021a765d04e430c/html5/thumbnails/13.jpg)
13
運用重新上色圖稿功能設定選單顏色
![Page 14: 重新上色圖稿、切片及輸出成網頁用 圖片 畫室網頁w3.uch.edu.tw/chwei/illu/ppt/F3561_Ch13.pdf · 助教學之教學投影片,並於授課時搭配旗標書籍公開播放,但不得為網際網路公開傳輸之遠距教學、網路教學](https://reader034.vdocuments.pub/reader034/viewer/2022042613/5fa788b87021a765d04e430c/html5/thumbnails/14.jpg)
14
運用重新上色圖稿功能設定選單顏色
![Page 15: 重新上色圖稿、切片及輸出成網頁用 圖片 畫室網頁w3.uch.edu.tw/chwei/illu/ppt/F3561_Ch13.pdf · 助教學之教學投影片,並於授課時搭配旗標書籍公開播放,但不得為網際網路公開傳輸之遠距教學、網路教學](https://reader034.vdocuments.pub/reader034/viewer/2022042613/5fa788b87021a765d04e430c/html5/thumbnails/15.jpg)
15
運用重新上色圖稿功能設定選單顏色
![Page 16: 重新上色圖稿、切片及輸出成網頁用 圖片 畫室網頁w3.uch.edu.tw/chwei/illu/ppt/F3561_Ch13.pdf · 助教學之教學投影片,並於授課時搭配旗標書籍公開播放,但不得為網際網路公開傳輸之遠距教學、網路教學](https://reader034.vdocuments.pub/reader034/viewer/2022042613/5fa788b87021a765d04e430c/html5/thumbnails/16.jpg)
16
運用重新上色圖稿功能設定選單顏色
![Page 17: 重新上色圖稿、切片及輸出成網頁用 圖片 畫室網頁w3.uch.edu.tw/chwei/illu/ppt/F3561_Ch13.pdf · 助教學之教學投影片,並於授課時搭配旗標書籍公開播放,但不得為網際網路公開傳輸之遠距教學、網路教學](https://reader034.vdocuments.pub/reader034/viewer/2022042613/5fa788b87021a765d04e430c/html5/thumbnails/17.jpg)
17
運用重新上色圖稿功能設定選單顏色
![Page 18: 重新上色圖稿、切片及輸出成網頁用 圖片 畫室網頁w3.uch.edu.tw/chwei/illu/ppt/F3561_Ch13.pdf · 助教學之教學投影片,並於授課時搭配旗標書籍公開播放,但不得為網際網路公開傳輸之遠距教學、網路教學](https://reader034.vdocuments.pub/reader034/viewer/2022042613/5fa788b87021a765d04e430c/html5/thumbnails/18.jpg)
18
運用隨意筆畫效果製作不規則變化的線條
![Page 19: 重新上色圖稿、切片及輸出成網頁用 圖片 畫室網頁w3.uch.edu.tw/chwei/illu/ppt/F3561_Ch13.pdf · 助教學之教學投影片,並於授課時搭配旗標書籍公開播放,但不得為網際網路公開傳輸之遠距教學、網路教學](https://reader034.vdocuments.pub/reader034/viewer/2022042613/5fa788b87021a765d04e430c/html5/thumbnails/19.jpg)
19
運用隨意筆畫效果製作不規則變化的線條
![Page 20: 重新上色圖稿、切片及輸出成網頁用 圖片 畫室網頁w3.uch.edu.tw/chwei/illu/ppt/F3561_Ch13.pdf · 助教學之教學投影片,並於授課時搭配旗標書籍公開播放,但不得為網際網路公開傳輸之遠距教學、網路教學](https://reader034.vdocuments.pub/reader034/viewer/2022042613/5fa788b87021a765d04e430c/html5/thumbnails/20.jpg)
20
運用隨意筆畫效果製作不規則變化的線條
![Page 21: 重新上色圖稿、切片及輸出成網頁用 圖片 畫室網頁w3.uch.edu.tw/chwei/illu/ppt/F3561_Ch13.pdf · 助教學之教學投影片,並於授課時搭配旗標書籍公開播放,但不得為網際網路公開傳輸之遠距教學、網路教學](https://reader034.vdocuments.pub/reader034/viewer/2022042613/5fa788b87021a765d04e430c/html5/thumbnails/21.jpg)
21
運用隨意筆畫效果製作不規則變化的線條
![Page 22: 重新上色圖稿、切片及輸出成網頁用 圖片 畫室網頁w3.uch.edu.tw/chwei/illu/ppt/F3561_Ch13.pdf · 助教學之教學投影片,並於授課時搭配旗標書籍公開播放,但不得為網際網路公開傳輸之遠距教學、網路教學](https://reader034.vdocuments.pub/reader034/viewer/2022042613/5fa788b87021a765d04e430c/html5/thumbnails/22.jpg)
22
運用隨意筆畫效果製作不規則變化的線條
![Page 23: 重新上色圖稿、切片及輸出成網頁用 圖片 畫室網頁w3.uch.edu.tw/chwei/illu/ppt/F3561_Ch13.pdf · 助教學之教學投影片,並於授課時搭配旗標書籍公開播放,但不得為網際網路公開傳輸之遠距教學、網路教學](https://reader034.vdocuments.pub/reader034/viewer/2022042613/5fa788b87021a765d04e430c/html5/thumbnails/23.jpg)
23
設計網頁版面
![Page 24: 重新上色圖稿、切片及輸出成網頁用 圖片 畫室網頁w3.uch.edu.tw/chwei/illu/ppt/F3561_Ch13.pdf · 助教學之教學投影片,並於授課時搭配旗標書籍公開播放,但不得為網際網路公開傳輸之遠距教學、網路教學](https://reader034.vdocuments.pub/reader034/viewer/2022042613/5fa788b87021a765d04e430c/html5/thumbnails/24.jpg)
24
設計網頁版面
![Page 25: 重新上色圖稿、切片及輸出成網頁用 圖片 畫室網頁w3.uch.edu.tw/chwei/illu/ppt/F3561_Ch13.pdf · 助教學之教學投影片,並於授課時搭配旗標書籍公開播放,但不得為網際網路公開傳輸之遠距教學、網路教學](https://reader034.vdocuments.pub/reader034/viewer/2022042613/5fa788b87021a765d04e430c/html5/thumbnails/25.jpg)
25
13-2 建立影像切片及設定切片檔名
利用參考線建立切片
設定切片轉存後的圖片檔名
![Page 26: 重新上色圖稿、切片及輸出成網頁用 圖片 畫室網頁w3.uch.edu.tw/chwei/illu/ppt/F3561_Ch13.pdf · 助教學之教學投影片,並於授課時搭配旗標書籍公開播放,但不得為網際網路公開傳輸之遠距教學、網路教學](https://reader034.vdocuments.pub/reader034/viewer/2022042613/5fa788b87021a765d04e430c/html5/thumbnails/26.jpg)
26
利用參考線建立切片
26
![Page 27: 重新上色圖稿、切片及輸出成網頁用 圖片 畫室網頁w3.uch.edu.tw/chwei/illu/ppt/F3561_Ch13.pdf · 助教學之教學投影片,並於授課時搭配旗標書籍公開播放,但不得為網際網路公開傳輸之遠距教學、網路教學](https://reader034.vdocuments.pub/reader034/viewer/2022042613/5fa788b87021a765d04e430c/html5/thumbnails/27.jpg)
27
利用參考線建立切片
![Page 28: 重新上色圖稿、切片及輸出成網頁用 圖片 畫室網頁w3.uch.edu.tw/chwei/illu/ppt/F3561_Ch13.pdf · 助教學之教學投影片,並於授課時搭配旗標書籍公開播放,但不得為網際網路公開傳輸之遠距教學、網路教學](https://reader034.vdocuments.pub/reader034/viewer/2022042613/5fa788b87021a765d04e430c/html5/thumbnails/28.jpg)
28
選取及合併切片
![Page 29: 重新上色圖稿、切片及輸出成網頁用 圖片 畫室網頁w3.uch.edu.tw/chwei/illu/ppt/F3561_Ch13.pdf · 助教學之教學投影片,並於授課時搭配旗標書籍公開播放,但不得為網際網路公開傳輸之遠距教學、網路教學](https://reader034.vdocuments.pub/reader034/viewer/2022042613/5fa788b87021a765d04e430c/html5/thumbnails/29.jpg)
29
選取及合併切片
![Page 30: 重新上色圖稿、切片及輸出成網頁用 圖片 畫室網頁w3.uch.edu.tw/chwei/illu/ppt/F3561_Ch13.pdf · 助教學之教學投影片,並於授課時搭配旗標書籍公開播放,但不得為網際網路公開傳輸之遠距教學、網路教學](https://reader034.vdocuments.pub/reader034/viewer/2022042613/5fa788b87021a765d04e430c/html5/thumbnails/30.jpg)
30
選取及合併切片
![Page 31: 重新上色圖稿、切片及輸出成網頁用 圖片 畫室網頁w3.uch.edu.tw/chwei/illu/ppt/F3561_Ch13.pdf · 助教學之教學投影片,並於授課時搭配旗標書籍公開播放,但不得為網際網路公開傳輸之遠距教學、網路教學](https://reader034.vdocuments.pub/reader034/viewer/2022042613/5fa788b87021a765d04e430c/html5/thumbnails/31.jpg)
31
選取及合併切片
![Page 32: 重新上色圖稿、切片及輸出成網頁用 圖片 畫室網頁w3.uch.edu.tw/chwei/illu/ppt/F3561_Ch13.pdf · 助教學之教學投影片,並於授課時搭配旗標書籍公開播放,但不得為網際網路公開傳輸之遠距教學、網路教學](https://reader034.vdocuments.pub/reader034/viewer/2022042613/5fa788b87021a765d04e430c/html5/thumbnails/32.jpg)
32
開啟切片選項交談窗設定圖片檔名
![Page 33: 重新上色圖稿、切片及輸出成網頁用 圖片 畫室網頁w3.uch.edu.tw/chwei/illu/ppt/F3561_Ch13.pdf · 助教學之教學投影片,並於授課時搭配旗標書籍公開播放,但不得為網際網路公開傳輸之遠距教學、網路教學](https://reader034.vdocuments.pub/reader034/viewer/2022042613/5fa788b87021a765d04e430c/html5/thumbnails/33.jpg)
33
開啟切片選項交談窗設定圖片檔名
![Page 34: 重新上色圖稿、切片及輸出成網頁用 圖片 畫室網頁w3.uch.edu.tw/chwei/illu/ppt/F3561_Ch13.pdf · 助教學之教學投影片,並於授課時搭配旗標書籍公開播放,但不得為網際網路公開傳輸之遠距教學、網路教學](https://reader034.vdocuments.pub/reader034/viewer/2022042613/5fa788b87021a765d04e430c/html5/thumbnails/34.jpg)
34
開啟切片選項交談窗設定圖片檔名
![Page 35: 重新上色圖稿、切片及輸出成網頁用 圖片 畫室網頁w3.uch.edu.tw/chwei/illu/ppt/F3561_Ch13.pdf · 助教學之教學投影片,並於授課時搭配旗標書籍公開播放,但不得為網際網路公開傳輸之遠距教學、網路教學](https://reader034.vdocuments.pub/reader034/viewer/2022042613/5fa788b87021a765d04e430c/html5/thumbnails/35.jpg)
35
13-3 輸出成網頁用圖片
檢視圖片品質
![Page 36: 重新上色圖稿、切片及輸出成網頁用 圖片 畫室網頁w3.uch.edu.tw/chwei/illu/ppt/F3561_Ch13.pdf · 助教學之教學投影片,並於授課時搭配旗標書籍公開播放,但不得為網際網路公開傳輸之遠距教學、網路教學](https://reader034.vdocuments.pub/reader034/viewer/2022042613/5fa788b87021a765d04e430c/html5/thumbnails/36.jpg)
36
檢視圖片品質
![Page 37: 重新上色圖稿、切片及輸出成網頁用 圖片 畫室網頁w3.uch.edu.tw/chwei/illu/ppt/F3561_Ch13.pdf · 助教學之教學投影片,並於授課時搭配旗標書籍公開播放,但不得為網際網路公開傳輸之遠距教學、網路教學](https://reader034.vdocuments.pub/reader034/viewer/2022042613/5fa788b87021a765d04e430c/html5/thumbnails/37.jpg)
37
檢視圖片品質
![Page 38: 重新上色圖稿、切片及輸出成網頁用 圖片 畫室網頁w3.uch.edu.tw/chwei/illu/ppt/F3561_Ch13.pdf · 助教學之教學投影片,並於授課時搭配旗標書籍公開播放,但不得為網際網路公開傳輸之遠距教學、網路教學](https://reader034.vdocuments.pub/reader034/viewer/2022042613/5fa788b87021a765d04e430c/html5/thumbnails/38.jpg)
38
檢視圖片品質