Chapter 8 網頁與動畫設計應用

1. Chapter 8網頁與動畫設計應用 Adobe Photoshop CS3也為網頁影像處理提供了簡單易用的，包括網頁影像的切割、網頁動畫設計等，讓設計師可以隨手將作品輸出成網頁或動畫；本章將針對網頁影像切割和動畫設計技巧做一詳細說明。  大綱 上一章 開始 離開

2. 目錄 8-1 網頁切割 8-2 ImageReady動畫設計 8-3 課後習題 大綱 回章首 離開

3. 8-1 網頁切割 以影像建立的網頁首先需要對影像進行切割處理，而影像作切割後才可進一步對其作超連結設定、最佳化影像切片以縮小網頁容量等等處理，本節以學會使用影像類網頁設計所必備的影像切割、連結設定和轉存為網頁檔案等方法。 本例說明如何在Adobe Photoshop CS3中對影像進行切片與編輯切片的處理，並按照切片的內容最佳化影像後，將作品輸出成網頁檔案。 下一節 下一頁 回目錄

4. 8-1 網頁切割 下面先在Photoshop中開啟練習檔案。 步驟一 1. 開啟練習檔案後，執行此指令，啟用「智慧型參考線」功能 下一節 上一頁 下一頁 回目錄

5. 8-1 網頁切割 步驟二 1.按下Ctrl+R快速鍵，在影像上顯示尺標，以便精確建立參考線 2.從上方尺標向下拖曳建立水平參考線 下一節 上一頁 下一頁 回目錄

6. 8-1 網頁切割 步驟三 1.從左側尺標拖曳建立垂直參考線 前一步驟建立的其他水平參考線的結果 下一節 上一頁 下一頁 回目錄

7. 8-1 網頁切割 步驟四 以步驟四相同方法建立其他垂直參考線的結果 下一節 上一頁 下一頁 回目錄

8. 8-1 網頁切割 步驟五 1.在工具箱中選擇「切片工具」 2.拖曳繪製切片 下一節 上一頁 下一頁 回目錄

9. 8-1 網頁切割 步驟六 1. 依照步驟五相同的方法，繪製其他切片 自動產生的切片稱為「自動切片」 自行繪製的切片稱為「使用者切片」 下一節 上一頁 下一頁 回目錄

10. 8-1 網頁切割 步驟七 1.在切片上單擊右鍵展開快顯選單 2.在快顯選單中執行此指令 下一節 上一頁 下一頁 回目錄

11. 8-1 網頁切割 步驟八 1.在「分割切片」視窗中勾選「垂直分割為」核取項，並設定平均分割為5片 2.按此鈕 設定分割切片時的預視情形 下一節 上一頁 下一頁 回目錄

12. 8-1 網頁切割 步驟九 • 選取「縮放顯示工具」 • 放大顯示比例，方便調整切片大小 • 按切謬所需大小逐一拖曳調整切片寬度 分割結果並不準確，還需稍作調整 下一節 上一頁 下一頁 回目錄

13. 8-1 網頁切割 步驟十 1. 選取「切片選取工具」2.單擊選取其他切片，好放棄選取5張切片的狀態3.在要編輯切片選項的切片上單擊右鍵，執行此指令 下一節 上一頁 下一頁 回目錄

14. 8-1 網頁切割 步驟十一 1.設定切片的類型、名稱、URL、目標（_Blank：要開啟在新視窗中）、訊息文字與alt標記2.單擊此鈕 下一節 上一頁 下一頁 回目錄

15. 8-1 網頁切割 步驟十二 1.選取「縮放顯示工具」2.單擊「選項列」上的「顯示全頁」按鈕，方便對整個切片版面進行處理 下一節 上一頁 下一頁 回目錄

16. 8-1 網頁切割 步驟十三 1.將滑鼠移到要調整切片高度的切片下邊框上，往下拖曳調整切片高度至參考線上 下一節 上一頁 下一頁 回目錄

17. 8-1 網頁切割 步驟十四 1.先單擊選取此切片2.按住Shift鍵，單擊加選此切片3.在已選取的切片上單擊右鍵展開快顯選單4.執行此指令，將兩張切片合成一張切片 下一節 上一頁 下一頁 回目錄

18. 8-1 網頁切割 步驟十五 1.執行此命令，隱藏參考線，讓畫面上的線條不致太多，造成編輯上的困難 下一節 上一頁 下一頁 回目錄

19. 8-1 網頁切割 步驟十六 1.在要變更切片類型的切片上單擊右鍵2.在快顯選單中執行此命令 這是自動切片類型 下一節 上一頁 下一頁 回目錄

20. 8-1 網頁切割 步驟十七 1.先用「另存新檔」命令將完成的作品儲存成.psd檔案格式，好作為後續編修使用2.執行此命令，將影像作品儲存成網頁檔案 下一節 上一頁 下一頁 回目錄

21. 8-1 網頁切割 步驟十八 1.選取「縮放顯示工具」2.按住Alt鍵，單擊縮小至合適的顯示比例 下一節 上一頁 下一頁 回目錄

22. 8-1 網頁切割 步驟十九 1.選擇「切片選取工具」2.單擊選取切片後，再按住Shift鍵，單擊加選其他需要自訂最佳化處理的切片3.為所選的切片設定最佳化影像內容 下一節 上一頁 下一頁 回目錄

23. 8-1 網頁切割 步驟二十 1.選取「手形工具」2.拖曳移動檢視範圍，檢視其他內容 下一節 上一頁 回目錄

24. 8-1 網頁切割 步驟二十一 1.單擊「2欄式」籤頁，檢視原稿與最佳化影像兩者的檔案資訊 最佳化影像檔案資訊 下一節 上一頁 回目錄

25. 8-1 網頁切割 步驟二十二 1.單擊「4欄式」籤頁，同時檢視更多的最佳化影像設定結果2.選擇要使用的最佳化方式3.單擊「儲存」鈕 下一節 上一頁 回目錄

26. 8-1 網頁切割 步驟二十三 1.選擇網頁檔案儲存位置2.輸入網頁檔案名稱並指定存檔類型3.單擊「存檔」鈕 下一節 上一頁 回目錄

27. 8-1 網頁切割 步驟二十四 1.打開儲存的網頁後，將滑鼠移到設定了URL、訊息文字與alt標記的切片上 出現本例步驟十一設定的「alt標記」內容 設定出現本例步驟十一的訊息文字 下一節 上一頁 回目錄

28. 8-2 ImageReady動畫設計 除了影像網頁處理，也可以使用Photoshop設計動畫影像，輕易將動畫影像用於點綴網頁效果上。 步驟一 1.執行此指令，顯示「動畫」面板 動畫浮動視窗 上一節 下一節 下一頁 回目錄

29. 8-2 ImageReady動畫設計 步驟二 步驟三 1.按此鈕，複製目前第一個影格 1.點選第一影格 2.在「圖層」面板中點擊眼睛圖示隱藏「圖層1」和「DLC-國際車展」兩個圖層 上一節 下一節 上一頁 下一頁 回目錄

30. 8-2 ImageReady動畫設計 步驟四 1.點選第二個影格 2.在此點擊眼睛圖示隱藏「DLC-時尚轎車」圖層， 顯示「DLC-國際車展」圖層 上一節 下一節 上一頁 下一頁 回目錄

31. 8-2 ImageReady動畫設計 步驟五 步驟六 1.點選第一個影格 2按此鈕再複製該影格 1.點選影格右下方小三角圖示，展開選單 2.選擇「0.5」選項，為第一個影格設定延遲時間 上一節 下一節 上一頁 下一頁 回目錄

32. 8-2 ImageReady動畫設計 步驟七 根據前面步驟再製第三影格而產生第四影格，並為第四影格設定相同延遲時間 上一節 下一節 上一頁 下一頁 回目錄

33. 8-2 ImageReady動畫設計 步驟八 步驟九 1.選擇第二影格 2.按此鈕，準備建立補間影格 1.顯示「補間」視窗，設定補間使用為「下一個影格」 2.設定增加的影格數為16 3.選擇「全部圖層」選項 4.按此鈕 上一節 下一節 上一頁 下一頁 回目錄

34. 8-2 ImageReady動畫設計 步驟十 1.執行「檔案─儲存為網頁和裝置用」功能後，設定相關最佳化項目後，單擊「儲存」按鈕 可預覽動畫 可調整影像尺寸 最佳化檔案資訊 可播放、停止、快轉動畫 上一節 下一節 上一頁 下一頁 回目錄

35. 8-2 ImageReady動畫設計 步驟十一 1.在「另存最佳化檔案」視窗中，指定儲存位置2.設定檔名與存檔類型3.按此鈕，將影像儲存為動畫影像 上一節 下一節 上一頁 回目錄

36. 8-2 ImageReady動畫設計 本例的最後一個步驟是將完成影格編輯的影像另存為GIF格式的影像檔案，該類型的影像具儲存動畫效果的特性，各位可從隨書光碟中開啟該檔案，觀賞本節成果檔案的動畫效果。 上一節 下一節 上一頁 回目錄

37. 8-3 課後習題 是非題 實作題 回目錄 離 開

38. 8-3-1 是非題 （　）1.使用Adobe Photoshop CS3可以將影像作品製作成GIF動畫。 （　）2.按下Ctrl+T快速鍵，可在影像上顯示尺標。 （　）3.從影像左側或上方尺標中可拖曳建立垂直或水平的參考線。 （　）4.建立了使用者切片後，也會自動建立自動切片。 （　）5.顯示或隱藏圖層時，可決定所選「動畫」影格的顯示內容。 （　）6.可以為「自訂切片」設定切片名稱、URL地址與訊息文字。 看答案 實作題 下一頁 回目錄

39. 8-3-1 是非題 （　）7.設定「訊息文字」的切片選項，可以產生當滑鼠移到切片範圍內，就在滑鼠旁邊顯示工具提示的效果。 （　）8.PNG格式影像具有動畫特性。 （　）9.設定「alt標題」切片選項的內容，可以產生當滑鼠移到切片範圍內，就在狀態列顯示訊息文字內容。 （　）10.動畫面板中依靠逐一新增或複製影格而產生動畫效果。 看答案 實作題 上一頁 回目錄

40. 8-3-1 是非題答案 （ ○ ）1.使用Adobe Photoshop CS3可以將影像作品製作成GIF動畫。 （╳）2.按下Ctrl+T快速鍵，可在影像上顯示尺標。 解析：Ctrl+T快速鍵是任意變形影像，Ctrl+R快速鍵才是顯示尺 標。 （○）3.從影像左側或上方尺標中可拖曳建立垂直或水平的參考線。 解析：顯示尺標後，從尺標可拖曳出參考線。 （○） 4.建立了使用者切片後，也會自動建立自動切片。 （○） 5.顯示或隱藏圖層時，可決定所選「動畫」影 （╳） 6.可以為「自訂切片」設定切片名稱、URL地址與訊息文字。 解析：自訂切片不能設定名稱、URL地址與訊息文字，只有「使用者切片」才可以設定。 是非題 實作題 下一頁 回目錄

41. 8-3-1 是非題答案 （╳） 7.設定「訊息文字」的切片選項，可以產生當滑鼠移到切片範圍內，就在滑鼠旁邊顯示工具提示的效果。 解析：要讓滑鼠移到切片範圍內，就在滑鼠旁邊顯示工具提示的效果時，必須設定「alt標題」切片選項。 （╳）8.PNG格式影像具有動畫特性。 解析：目前只有GIF格式的影像才具有動畫的特性。 （╳）9.設定「alt標題」切片選項的內容，可以產生當滑鼠移到切片範圍內，就在狀態列顯示訊息文字內容。 解析：要產生當滑鼠移到切片範圍內，就在狀態列顯示訊息文字內容，必須設定「訊息文字」切片選項。 （╳）10.動畫面板中依靠逐一新增或複製影格而產生動畫效果。 解析：使用「補間」指令，可一次建立多個補間影格，快速而有 效的完成動畫編輯。 是非題 實作題 上一頁 回目錄

42. 8-3-2 實作題 1.開啟影像，根據影像版面配置進行切割，並為影像上方的花朵圖案繪製圓形影像地圖連結，設定該連結為空連結、替代文字為「歡迎瀏覽百花書屋」，最後將影像另存為網頁。 是非題 下一頁 回目錄

43. 8-3-2 實作題 2.開啟影像，在「動畫」面板中為第二個影格設定隱藏第三個圖層，然後在第一、二影格之間建立8個影格的補間動畫，再為第一個影像設定延遲時間為1秒，最後將影像最佳化另存為GIF格式的動畫影像檔案。 是非題 上一頁 回目錄