第6章 電腦科技的相關應用─影像處理 6-1 影像處理的基本知識 6-2 PhotoImpact 的基本操作 6-3 影像編輯技巧

Presentation on theme: "第6章 電腦科技的相關應用─影像處理 6-1 影像處理的基本知識 6-2 PhotoImpact 的基本操作 6-3 影像編輯技巧"— Presentation transcript:

1 第6章 電腦科技的相關應用─影像處理 6-1 影像處理的基本知識 6-2 PhotoImpact 的基本操作 6-3 影像編輯技巧
6-1 影像處理的基本知識 6-2 PhotoImpact 的基本操作 6-3 影像編輯技巧 6-4 特殊文字製作 6-5 網頁元件製作 6-6 動畫的製作

2 6-1 影像處理的基本知識 6-1-1　影像數位化 6-1-2　數位影像的基本概念

3 6-1-1 影像數位化 利用數位相機 利用掃瞄器 利用電腦軟體繪製
6-1-1　影像數位化 利用數位相機 數位相機目前已趨於普遍化，其實數位相機就跟傳統相機有點類似，不過數位相機有個最大的優點，那就是可以直接將拍出來的照片，透過傳輸線或是記憶卡，將照片直接儲存至電腦中。 利用掃瞄器 我們可以將傳統的照片、底片、報章雜誌內容…等，透過掃瞄器將他們輸入到電腦中，成為一個數位化影像。 利用電腦軟體繪製 除了利用數位相機和掃瞄器建立數位化影像外，您也可以直接利用市面上所販售的繪圖軟體，像是PhotoImpact、Photoshop、…等，自行創作出您要的影像。

4 6-1-2　數位影像的基本概念 點陣式影像 點陣圖（Bitmap Image）是一種最常見的影像圖檔，它主要是由一個一個點所組成的。點陣圖是以像素（Pixel）來記錄影像，此種格式的圖片，放大後就會產生鋸齒狀，圖片也會失真。 常見的點陣式圖檔有：JPG、TIF、BMP、TGA、…等。 點陣圖放大後就會產生鋸齒狀，而讓圖片品質變差

5 6-1-2　數位影像的基本概念 向量式圖檔 向量圖（Vector Image）簡單的解釋，就是一張不管我們如何縮放，都不會造成鋸齒狀、失真等問題的圖片。 向量式的圖檔，是以點、線、面，以及點線面之間的屬性為基本架構；而這些屬性決定了畫面上所有的點、線、面相關位置。 由於向量圖在存檔格式上可以完整保留各個點線面的相關屬性，因此改變顏色、大小、旋轉、移動、…等動作時，都不會有鋸齒狀或是影像品質的問題發生。常見的向量式圖檔有：EPS、WMF、AI、CDR、…等。

6 6-1-2 數位影像的基本概念 像素 前面我們說過，點陣圖是由一個一個點所組成的，而這個點我們就稱為像素（Pixels）。
6-1-2　數位影像的基本概念 像素 前面我們說過，點陣圖是由一個一個點所組成的，而這個點我們就稱為像素（Pixels）。 我們將一張圖片放大後，會發現在圖片中有許多的小 方格，而這些小方格就是像素。 一個圖檔所包含的像素越多，它所佔的記憶體容量也就越大，品質也越好。 將圖片放大後，就會看到許多的小方格，這些小方格就是像素

7 6-1-2　數位影像的基本概念 解析度 解析度（Resolution）指的是單位長度內所含的像素數量（pixel per inch，簡稱ppi），像素數量越多代表解析度越高。 一張圖片的列印品質，解析度越高，列印品質越好，解析度越低，則列印品質就越差。 列印的品質與印表機的解析度也有關係，印表機的解析度是以dpi（dot per inch）為單位，也就是說每英吋中有多少個點的意思。 當我們要將一張圖片掃瞄到電腦中時，我們會設定要掃瞄的解析度、印表機列印的解析度、每單位長度要掃描、列印多少像素…等資訊。

8 6-1-2 數位影像的基本概念 影像尺寸 影像尺寸指的是電腦螢幕解析度的尺寸大小，通常是以「寬*長」表示，它以像素的數量表示影像尺寸單位的。
6-1-2　數位影像的基本概念 影像尺寸 影像尺寸指的是電腦螢幕解析度的尺寸大小，通常是以「寬*長」表示，它以像素的數量表示影像尺寸單位的。 我們常聽到「800*600」，而它所指的就是「寬800像素，長600像素」的影像。 而影像尺寸和列印尺寸又有所不同，例如：一張影像尺寸為800*600，解析度為72ppi，則他的列印尺寸為：（800÷72）×（600÷72）＝11.11×8.33平方英寸。

9 6-1-2　數位影像的基本概念 圖片色彩 螢幕上一張彩色圖片是由許多不同色彩組合而成的，而影像根據可用色彩數目的多寡，大致上可以分為：黑白、灰階、16色、256色、全彩、…等，而當色彩數目越多時，該影像檔案也就會越大。

10 6-1-2　數位影像的基本概念 黑白：黑白影像的色彩只有「黑」或「白」兩種，而黑白影像中的每一個像素佔了「1 bit」的空間，所以黑白的影像所佔的容量是最小的。 灰階：灰階影像的色彩也是只有「黑」或「白」兩種，但他還使用了不同亮度的灰色，而灰階影像中的每一個像素佔了「8 bits」的空間，所以每個點可以有28=256種灰色的變化。 16色：16色指的就是一張圖片可以使用16種顏色來組合，而它的每一個像素佔了「4 bits」的空間，所以可以有24=16種色彩。 256色：256色指的是一張圖片可以使用256種顏色來組合，而它的每一個像素佔了「8 bits」的空間，所以可以有28=256種色彩。 全彩：全彩的圖片所呈現的效果與我們眼睛所看到的色彩幾乎是相同的，因此被稱為「全彩」，而它的每一個像素佔了「24 bits」空間，所以可以有224=16,177,216種色彩。

11 6-1-2　數位影像的基本概念 色彩模式 RGB模式也就是所謂的三原色，R代表紅色（Red）、G代表綠色（Green）、B代表藍色（Blue）。 HSB模式中的H代表色相（Hue）、S代表飽和度（Saturation）、B代表亮度（Brightness）所組成的配色模式。 CMYK是一種屬於印刷時所使用的配色模式，其中C代表青（Cyan）、M代表洋紅（Magenta）、Y代表黃（Yellow）、K代表黑（Black）。

12 6-1-2　數位影像的基本概念 圖檔格式 每個影像處理軟體，會依據程式的特殊功能與需求各自發展出專屬的圖檔格式，例如：PhotoShop軟體，它的專屬圖檔格式就是「PSD」，而PhotoImpact軟體，它的專屬圖檔格式則是「UFO」。 不過為了方便圖檔的交換、出版…等，大部份的圖片我們都會儲存成大家通用的圖檔格式，像是：TIF、JPEG、GIF、…等。

13 6-1-2　數位影像的基本概念 BMP：它是Windows中標準的點陣圖，它是屬於一種不壓縮圖檔格式，這種圖檔在儲存之後可以完整的保留圖形中的所有色彩，而不會有失真的問題。 GIF：它是一種256色壓縮的點陣式圖檔格式，GIF格式的圖檔除了可以是普通圖片之外，它也可以拿來製作動畫圖片。 JPEG：它是一種可以壓縮全彩圖片的點陣式圖檔格式。其特色是可以表現全彩，因此所呈現的色彩較為豐富。JPEG圖片檔案的壓縮品質，可以由壓縮的程度上調整，所以圖檔如果壓縮的程度越高，圖檔大小就會越小，但是相對的，圖檔就會失去它原有的風貌，也就是所謂的失真。 TIFF：它屬於一種不壓縮格式的圖檔，支援各種色彩模式，而且影像的品質良好，因此，此種圖檔大部份皆用於印刷之用。

14 6-1-2　數位影像的基本概念 PNG：它是由W3C在1996年所制定的Web標準點陣式圖檔格式。不過，雖然這圖檔格式是由W3C所制定，但是這種格式的接受程度並不高，因此並沒有被大量採用。 EPS：它是屬於一種向量圖檔，它是印刷廠或輸出中心的標準印刷輸出用的圖檔。此種格式的圖檔，有個好處，就是具有可去背景的不規則形狀點陣圖特性。 UFO：這是PhotoImpact專屬的檔案格式，當我們利用PhotoImpact製作好一個影像時，我們會先將該影像檔案，儲存為UFO格式，這樣才可以再進行修改及編輯的動作。 PSD ：這是PhotoShop專屬的檔案格式，利用hotoShop製作好一個影像時，我們會先將該影像檔案，儲存為PSD格式，這樣才可以再進行修改及編輯的動作。

15 6-2 PhotoImpact 的基本操作 6-2-1 認識PhotoImpact操作環境 6-2-2 PhotoImpact基本操作
6-2-3　百寶箱的使用

16 6-2-1認識PhotoImpact操作環境 功能表列 一般工具列 屬性工具列 工具箱 面板管理員 百寶箱 編輯區 瀏覽管理員 狀態列

17 6-2-2 PhotoImpact基本操作 建立新的影像 按下一般工具列上的「 」開新影像工具鈕，即可開啟一個新的影像。
按下一般工具列上的「 」開新影像工具鈕，即可開啟一個新的影像。 點選功能表上的「檔案∕開新檔案∕ 開新影像」功能，即可開啟一個新的影像。 按下鍵盤上的 Ctrl + N 快速鍵，也可開啟一個新的影像。

18 6-2-2 PhotoImpact基本操作 開啟影像檔 按下一般工具列上的「 」開啟舊檔工具鈕，即可進行開啟影像檔的動作。
按下一般工具列上的「 」開啟舊檔工具鈕，即可進行開啟影像檔的動作。 點選功能表上的「檔案∕開啟舊檔」功能，即可進行開啟影像檔的動作。 按下鍵盤上的 Ctrl + O 快速鍵，即可進行開啟影像檔的動作。

19 6-2-2 PhotoImpact基本操作 用「視覺化開啟」來開啟影像檔
點選功能表上的「檔案∕視覺化開啟」功能，也可以直接按下鍵盤上的 Shift + O 快速鍵，即可開啟「視覺化開啟」對話方塊。

20 6-2-2 PhotoImpact基本操作 關閉影像檔 儲存影像檔 點選功能表上的「檔案∕關閉」功能，即可關閉使用中的影像檔。
直接按下該影像檔編輯區右上方的「 」關閉按鈕，即可將影像檔關閉。 儲存影像檔 按下一般工具列上的「 」儲存檔案工具鈕，即可進行儲存的動作。 點選功能表上的「檔案∕儲存檔案」功能，即可進行儲存的動作。 按下鍵盤上的 Ctrl + S 快速鍵，也可進行儲存的動作。

21 6-2-2 PhotoImpact基本操作 檢視影像 按下一般工具列上的「 」顯示比例選單鈕，在選單中選擇您要檢視的大小。
按下一般工具列上的「 」顯示比例選單鈕，在選單中選擇您要檢視的大小。 您也可以按下鍵盤上的「+」鍵放大影像，按下鍵盤上的 「-」鍵縮小影像。 您也可以使用工具箱中的「 」放大鏡工具，點選後，將滑鼠游標移至影像編輯區中，此時滑鼠游標會呈「 」狀態，按一下滑鼠左鍵即可放大影像一次，再按一下則會再放大影像一次；若要縮小影像時，則先按下鍵盤上的 Shift 鍵不放，此時滑鼠游標會呈「 」狀態，接著按下滑鼠左鍵即可縮小影像。

22 6-2-3 百寶箱的使用 百寶箱分成了「圖庫」與「資料庫」二類。
6-2-3　百寶箱的使用 百寶箱分成了「圖庫」與「資料庫」二類。 「圖庫」中包含各種特效、濾鏡…等範本。 「資料庫」中則包含了可用於影像中的不同類型物件，像是：影像、遮罩、輪廓、路徑、形狀、範本、…等。 要使用百寶箱中的範本時，可先按下面板管理員上的「 」百寶箱工具鈕，即可開啟「百寶箱」；若要再關閉「百寶箱」時，則再按一下「 」工具鈕即可。

23 6-2-3 百寶箱的使用 圖庫百寶箱 2.按下「圖庫」 工具鈕 1.按下百寶箱工具鈕 4.雙擊要套用的範本 3.選擇要使用圖庫的類型
6-2-3　百寶箱的使用 圖庫百寶箱 2.按下「圖庫」 工具鈕 1.按下百寶箱工具鈕 4.雙擊要套用的範本 3.選擇要使用圖庫的類型 5.編輯區即會套用您所選擇的範本

24 6-2-3　百寶箱的使用 資料庫百寶箱 1.按下「物件資料庫」 工具鈕 3.雙擊要套用的影像 2.選擇要使用類型 4.該影像即會加入編輯區中

25 6-2-3 百寶箱的使用 以影像作為圖庫的預覽縮圖
6-2-3　百寶箱的使用 以影像作為圖庫的預覽縮圖 當您在使用百寶箱時，可以將開啟的影像檔當作圖庫中的縮圖範本，這樣就能夠很容易看出影像套用範本後會有何結果了。在百寶箱中按下「 」工具選單鈕，在選單中選擇「使用影像當作縮圖」，即可將圖庫中的範本更改為您開啟的影像檔。

26 6-3　影像編輯技巧 6-3-1　自動調整 6-3-2　在相片中加入特效 6-3-3　調整與裁剪影像 6-3-4　選取工具的使用

27 6-3-1　自動調整 點選功能表上的「格式∕自動處理」功能，在選單中選擇您要調整的選項，當您按下時，PhotoImpact會自動偵測影像檔哪些地方須要調整，再自動進行調整的動作。

28 6-3-2 在相片中加入特效 利用PhotoImpact中的「特效∕相片」功能，可以在相片中加入聚光、底片顆粒、漸層、星狀、…等特效。
6-3-2　在相片中加入特效 利用PhotoImpact中的「特效∕相片」功能，可以在相片中加入聚光、底片顆粒、漸層、星狀、…等特效。 點選功能表上的「特效∕相片」功能，在選單中選擇「漸層濾鏡」功能。

29 6-3-2　在相片中加入特效 開啟「漸層濾鏡」對話方塊，這裡我們要將「白天」變成「黃昏」。在設定時，右邊的預覽區會呈現結果，設定好後按下「確定」按鈕即可。

30 6-3-3 調整與裁剪影像 使用變形工具 利用工具箱中的「變形工具」，可以輕易的改變影像、物件、選取區、文字、路徑…、等大小。
6-3-3　調整與裁剪影像 使用變形工具 利用工具箱中的「變形工具」，可以輕易的改變影像、物件、選取區、文字、路徑…、等大小。 按下工具箱上的「 」變形工具鈕時，則在一般工具列的下方會開啟該工具的屬性工具列，利用屬性工具列上的工具鈕，即可針對被選取的物件進行調整大小、變形、翻轉、旋轉…等動作。 這裡可以選擇要變形的方式 這裡可以選擇「旋轉與翻轉」的方式 按下此鈕後被選取的物件可進行等比例的縮放 按下此鈕可進行任意旋轉 這裡可以輸入要旋轉的角度

31 6-3-3　調整與裁剪影像 選取要進行變形的物件，按下工具箱上的「 」工具鈕。接著，再按下屬性工具列上的「 」透視工具鈕，此時該物件會出現四個黑色控點。 1.將滑鼠游標移至控點上 2.按下滑鼠左鍵不放往右拖移滑鼠 3.完成後放掉滑鼠左鍵即可

32 6-3-3　調整與裁剪影像 剪裁影像 按下工具箱上的「 」剪裁工具鈕，此時滑鼠游標會呈「 」狀態，接著按下滑鼠左鍵不放，拖曳滑鼠拉出您要保留的部份。 3.雙擊滑鼠左鍵，即可完成剪裁的動作 1.按下「 」工具鈕後，滑鼠游標會呈此狀態 2.拖曳出您要保留的範圍

33 6-3-4　選取工具的使用 在一個編輯區中，若有許多不同的物件時，我們可以按下工具箱上的「 」挑選工具鈕，再去點選您要選取的物件，即可選擇單一物件；若要選取多個物件時，您可以同時按下鍵盤上的 Ctrl 或 Shift 鍵不放，進行多個物件的選取。 在物件上按下滑鼠左鍵即可選取該物件 利用 Ctrl 或 Shift 鍵即可選取多個物件

34 6-3-4 選取工具的使用 標準選取工具 標準選取工具可以讓您選取預設的大小和形狀。您可以依照需求選擇要選取矩形、圓形、長方形、…等。
6-3-4　選取工具的使用 標準選取工具 標準選取工具可以讓您選取預設的大小和形狀。您可以依照需求選擇要選取矩形、圓形、長方形、…等。 按下工具箱上的「 」標準選取工具鈕，當您按下後，就會開啟該工具的屬性列，在屬性列上您可以選擇要使用的形狀，也能夠精準的設定想要選取的大小。 按下此鈕即可進行選取的動作 按下此鈕可以減掉現有的選取區 這裡可以設定選取區的「柔邊」 按下此鈕可以加入另一個選取區 這裡可以選擇您要選取的形狀 這裡可以設定您要選取的範圍大小

35 6-3-4　選取工具的使用 建立選取區：按下「 」工具鈕，在「形狀」選單中，選擇一個形狀，選擇好後，將滑鼠游標移至影像上，按下滑鼠左鍵不放並拖曳滑鼠，即可拉出一個虛框範圍，此範圍即表示您要選取的。當您選取好您要的部份時，再按下屬性列上的「 」剪裁工具鈕，即可將整張圖片剪裁為選取區的大小。

36 6-3-4　選取工具的使用 在現有的選取區中增加另一個選取區：按下「 」工具鈕，此時滑鼠游標會呈「 」狀態，接著拉出一個選取區即可，這個選取區會與現有的選取區結合。

37 6-3-4　選取工具的使用 在現有的選取區中減少選取區：按下「 」工具鈕，此時滑鼠游標會呈「 」狀態，接著在影像上拉出一個選取區即可，這個選取區會取消現有的選取區。

38 6-3-4 選取工具的使用 套索工具 套索工具可以選取任意形狀的區域，此種選取方式，最適合用於各種不規則形狀的選取了。
6-3-4　選取工具的使用 套索工具 套索工具可以選取任意形狀的區域，此種選取方式，最適合用於各種不規則形狀的選取了。 按下工具箱上的「選取工具」，在選單中選擇「 」工具鈕，接著將滑鼠游標移至影像上，按一下滑鼠左鍵，即可標出起點，接著再拖曳滑鼠到第二個地方按下滑鼠左鍵，一直重複此方式即可進行任意形狀的選取。

39 6-3-4　選取工具的使用 要結束選取時，只要將滑鼠游標回到原點上，此時在圖片上會有許多的節點，這個節點就是您所按下的「滑鼠左鍵」，每按一下就會產生一個節點。若有那個地方沒有選取好時，您可以將滑鼠游標移至該節點上，進行修正的動作，若都沒有問題時，按下屬性工具列上的「 」工具鈕，即可完成選取。

40 6-3-4　選取工具的使用 魔術棒 利用「魔術棒」工具，可以選取具有相似顏色的區域，若您的影像中的背景只有單一顏色時，就可以利用此工具鈕，選取您要的影像。 按下工具箱上的「選取工具」，在選單中選擇「」魔術棒工具鈕，點選後就會開啟該魔術棒的屬性工具列，接著在屬性工具列上的「相似程度」欄位中輸入顏色的相似值，並勾選「搜尋相鄰像素」。

41 6-3-4　選取工具的使用 相關的屬性設定好時，滑鼠游標會呈「 」狀態，接著在影像中的背景色彩上按下滑鼠左鍵，所有相似顏色都會被選取，此時按下鍵盤上的 Delete鍵，即可將被選取的區域刪除掉。

42 6-4　特殊文字製作 6-4-1　文字的基本使用 6-4-2　特效文字製作

43 6-4-1 文字的基本使用 輸入文字 按下工具箱上的「 」文字工具鈕，此時滑鼠游標會呈「 」狀態。
6-4-1　文字的基本使用 輸入文字 按下工具箱上的「 」文字工具鈕，此時滑鼠游標會呈「 」狀態。 接著在空白處按一下滑鼠左鍵，就會出現一個插入點，此時就可以開始進行文字輸入的動作

44 6-4-1　文字的基本使用 搬移文字位置 文字輸入完後，若要移動文字位置時，您可以將滑鼠游標移至文字四週的邊緣，此時滑鼠游標會呈「 」狀態，接著按下滑鼠左鍵不放並拖曳滑鼠即可進行搬移文字的動作，搬移完成後放掉滑鼠左鍵即可。

45 6-4-1　文字的基本使用 修改文字 若要修改文字時，按下工具箱上的「 」工具鈕，將滑鼠游標移至要修改的文字上，此時滑鼠游標會呈「 」狀態，接著雙擊滑鼠左鍵，即可進入文字模式，進入後就可以進行修改的動作。

46 6-4-1　文字的基本使用 文字的屬性設定 若在進行文字輸入時，您沒有進行任何的文字格式設定，也沒有關係，因為您可以利用文字工具的屬性列進行各種格式設定。在進行設定前，您必須先按下工具箱中的「 」工具鈕，如此才能開啟文字工具屬性列。 按下工具箱中的「 」工具鈕時，除了開啟文字工具屬性列外，「文字面板」也會跟著被開啟，您也可以利用「文字面板」進行文字的樣式、3D、分割文字、…等設定。不過，不管您是使用屬性列還是文字面板，在設定文字的各種格式時，必須先選取要設定的文字，選取後再去選擇您要設定的格式。

47 6-4-2 特效文字製作 3D特效文字 選取要製作的文字。接著點選百寶箱中的「物料圖庫」，此時在右方就會出現該效果的各種樣式。
6-4-2　特效文字製作 3D特效文字 選取要製作的文字。接著點選百寶箱中的「物料圖庫」，此時在右方就會出現該效果的各種樣式。 接著選擇一個要套用的特效，在該特效的縮圖上，雙擊滑鼠左鍵，該文字即可套用該特效。

48 6-4-2　特效文字製作 製作印章文字 建立一個「寬3cm，長5cm」的影像檔。建立完成後，按下工具箱上的「 」工具鈕，輸入自己的名字，並按下屬性工具列上的「字型」選單，在選單中選擇一個字型。 接著按下面板管理員上的「 」工具鈕，開啟百寶箱。點選圖庫選單中的「字體圖庫」，並選擇「印章5」的效果。在套用前，我們先修改該印章效果的內容，請在縮圖上按下滑鼠右鍵，在快顯功能表中點選「修改內容再套用」。 此時會開啟「字體特效」對話方塊，這裡我們將「壓力」的數字更改為「30」，讓字體更有印章蓋出來的感覺，設定好後按下「確定」按鈕。

49 6-4-2 特效文字製作 回到編輯區後，被選取的文字就會套用我們所選擇的特效了。接著我們要在文字外圍加上框線。
6-4-2　特效文字製作 回到編輯區後，被選取的文字就會套用我們所選擇的特效了。接著我們要在文字外圍加上框線。 按下工具箱上的「繪圖工具」選單鈕，在選單中選擇「 」輪廓繪圖工具，接著按下屬性工具列上的「形狀」鈕，在選單中選擇「 」形狀。 選擇好後，在編輯區中按下滑鼠左鍵並拖曳滑鼠，拉出一個長方形。完成後，點選「路徑面板」上的「輪廓」標籤，將寬度更改為「5」。 接著再點選「路徑面板」上的「形狀」標籤，將「圓形」的角度更改為「40」。 最後再按下工具箱上的「 」工具鈕，回到挑選狀態下。我們要將框線也設定為印章的效果。請點選圖庫選單中的「字體圖庫」，並選擇「印章5」的效果，在該縮圖上雙擊滑鼠左鍵，被選取的框線就會套用該效果。

50 6-4-2　特效文字製作 製作環繞路徑文字 建立一個「寬6cm，長3cm」的影像檔。請按下工具箱上的「繪圖工具」選單鈕，在選單中選擇「 」線條與箭頭繪圖工具，接著按下屬性工具列上的「形狀」鈕，在選單中選擇「 」Spline曲線。 將滑鼠游標至編輯區上，按下滑鼠左鍵，產生第一個節點，接著拖曳滑鼠即可拉出一條線，再按下滑鼠左鍵，產生第二個節點，此時再拖曳滑鼠即可再拉出另一條曲線，利用相同方法即可繪製出一條曲線。 完成曲線的繪製後，點選功能表上的「物件∕環繞」功能，在選單中選擇「將文字加至作用中路徑」功能。

51 6-4-2　特效文字製作 此時我們所繪製的曲線就會套用預設文字，接著把這些預設文字選取，並輸入自己的文字，當您在輸入時，文字就會繞著曲線跑了。輸入完文字後即可進行文字格式的設定。

52 6-5　網頁元件製作 6-5-1　背景設計師的使用 6-5-2　元件設計師的使用

53 6-5-1　背景設計師的使用 利用「背景設計師」功能，可以製作一張背景圖片，在製作網頁的背景圖片時，通常我們會將該圖片的大小設為「80*80像素」，因為這樣的大小，才會讓檔案小一些，在下載網頁時也才會快一些。 點選功能表上的「網路∕背景設計師」功能，開啟「背景設計師」對話方塊。 接著在「方格大小」中選擇您要的大小；在「模式」選單中選擇您要的底色圖案樣式；在「背景類型」中選擇一個類型，以修改材質的圖樣，都選擇好後，按下「確定」按鈕即可。

54 6-5-1 背景設計師的使用 按下「確定」按鈕後，就會產生一個我們所建立的背景影像檔了。接著我們只要將該檔案儲存起來即可。
6-5-1　背景設計師的使用 按下「確定」按鈕後，就會產生一個我們所建立的背景影像檔了。接著我們只要將該檔案儲存起來即可。 這裡我們將背景圖儲存成「jpg」格式，請點選功能表上的「檔案∕儲存檔案」功能，開啟「另存新檔」對話方塊，在「檔案名稱」中輸入一個檔名；在「檔案類型」中選擇「JPG/JPEG/JPE(JPEG file interchange format)」類型，設定好後按下「儲存」按鈕。 此時會開啟「友立JPEG影像最佳化程式」對話方塊，這裡您可以設定該圖片的品質。在「JPEG選項」頁面中，可以在「品質」中輸入您要的品質，輸入好後按下「確定」按鈕，即可完成存檔的動作。

55 6-5-2 元件設計師的使用 橫幅的製作 在元件設計師中提供了一個「橫幅」的範本，利用此範本我們可以輕鬆的製作一個廣告標題或是網頁中的橫幅。
6-5-2　元件設計師的使用 橫幅的製作 在元件設計師中提供了一個「橫幅」的範本，利用此範本我們可以輕鬆的製作一個廣告標題或是網頁中的橫幅。 點選功能表上的「網路∕元件設計師」功能，開啟「元件設計師」對話方塊。 此時在左邊的清單中，您可以看到許多不同的範本，這裡我們選擇「橫幅」範本，請按下「橫幅」範本前的「 」展開鈕，展開所有的範本類型。 接著選擇一個類型，選擇時，在右邊的選單中就會顯示該類型的範本，這裡即可點選您要的範本，選擇好後按「下一步」繼續。

56 6-5-2　元件設計師的使用 接著就可以開始進行文字、色彩、面板…等設定了。這裡請點選「標幟」項目，在「大小」頁面中可以設定橫幅的大小；在「陰影」頁面中可以選擇是否要有影陰效果；在「超連結」中可以設定該橫幅的超連結選項。 接著，點選請點選「標題」項目，在「文字」欄位中輸入您要的標題文字，在「字型」選單中選擇字型，在「樣式」選單中勾選您要的樣式。 接著點選「色彩」標籤，這裡可以設定文字的色彩，您可以選擇單一色彩、漸層色彩、填充色彩等方式。 接著再去點選您要修改的項目，一一的進行修改即可，修改完成後，按下「匯出」按鈕，即可將該橫幅匯出。

57 6-5-2　元件設計師的使用 這裡我們選擇匯出「至影像最佳化程式」，選擇後會開啟「友立JPEG影像最佳化程式」對話方塊，這裡可以選擇您要儲存成「JPG」、「GIF」、「PNG」等格式，選擇後按下「儲存」按鈕，即可進行儲存的動作。

58 6-5-2　元件設計師的使用 按鈕列的製作 利用「元件設計師」中的「按鈕列」功能，可以輕鬆的完成一系列的按鈕製作，這裡我們就來看看該如何製作按鈕列。 點選功能表上的「網路∕元件設計師」功能，開啟「元件設計師」對話方塊。 此時在左邊的選單中，您可以看到許多不同的範本，這裡我們選擇「按鈕列」範本，請按下「按鈕列」範本前的「 」展開鈕，展開所有的範本類型。 接著在選單中選擇一個類型，選擇時，在右邊的選單中就會顯示該類型的範本，這裡即可點選您要的範本，選擇好後按「下一步」繼續。

59 6-5-2　元件設計師的使用 接著我們要來修改按鈕列的各項設定。首先要設定的是按鈕文字，這裡先將所有預設的按鈕文字刪除，點選要刪除的按鈕文字，再按下「 」工具鈕，即可刪除該按鈕文字。 刪除完後，接著我們就可以加入我們要的按鈕文字了，在欄中輸入按鈕文字，輸入完後按下「 」工具鈕，即可將該文字加入，再以相同方式加入其他的按鈕文字。 接著，點選「文字」標籤即可設定按鈕列的文字樣式；點選「版面」標籤則可以設定按鈕列的間距及按鈕列的外觀；點選「大小」標籤則可以設定按鈕列的大小；點選「陰影」標籤則可以將按鈕列加入陰影效果。

60 6-5-2 元件設計師的使用 接著再去點選您要修改的項目，一一的進行修改即可，修改完成後，按下「匯出」按鈕，即可將按鈕列匯出。
6-5-2　元件設計師的使用 接著再去點選您要修改的項目，一一的進行修改即可，修改完成後，按下「匯出」按鈕，即可將按鈕列匯出。 這裡我們選擇匯出「至影像最佳化程式」，會開啟「輸出選項」對話方塊，詢問您是否要將每個按鈕輸出成個別的影像檔，這裡您可以依照個人選擇，選擇好後按下「確定」按鈕。 此時會開啟「友立JPEG影像最佳化程式」對話方塊，這裡可以選擇您要儲存成「JPG」、「GIF」、「PNG」等格式，這裡我們選擇「GIF」格式，當您點選後，圖片會自動進行去背的功能，選擇後按下「儲存」按鈕，即可進行儲存的動作。 儲存時，元件設計師會將您所製作的按鈕列，分別進行儲存的動作，您有多少個按鈕列，就會有多少個圖檔，而該圖檔的檔案名稱會自動進行編號的動作。

61 6-5-2 元件設計師的使用 Rollover按鈕的製作
6-5-2　元件設計師的使用 Rollover按鈕的製作 當您在瀏覽網頁時，將滑鼠游標移至某個按鈕上時，該按鈕的顏色或形狀就會改變，而再當您按下滑鼠左鍵時，該按鈕又會改變成另一種顏色或形狀，這種互動式的按鈕。我們可以利用「Rollover按鈕」功能來製作。 左圖為「正常按鈕」；中圖為「滑鼠停駐按鈕」；右圖為「滑鼠按下按鈕」

62 6-5-2 元件設計師的使用 點選功能表上的「網路∕元件設計師」功能，開啟「元件設計師」對話方塊。
6-5-2　元件設計師的使用 點選功能表上的「網路∕元件設計師」功能，開啟「元件設計師」對話方塊。 此時在左邊的選單中，您可以看到許多不同的範本，這裡我們選擇「Rollover按鈕」範本，請按下「Rollover按鈕」範本前的「 」展開鈕，展開所有的範本類型。 接著在選單中選擇一個類型，選擇時，在右邊的選單中就會顯示該類型的範本，這裡即可點選您要的範本，選擇好後按「下一步」繼續。 選擇好後接著我們就可以開始進行「Rollover按鈕」的文字、色彩、面板、…等設定了。這裡會將請點選「Java Rollover」項目，我們先來設定該按鈕的整體屬性。點選「選項」標籤，將「按鈕採用相同文字」勾選，這樣三個按鈕的文字格式就會相同。

63 6-5-2　元件設計師的使用 接著點選「大小」標籤，即可設定該按鈕的大小。設定好後您可以點選「預覽」標籤，使用滑鼠在「預覽」區域中檢視與測試您所設定按鈕。 接著我們分別要來設定按鈕的樣式，在選單中分別有「正常」、「MouseOver」、「MouseDown」三個項目，這三個項目分別代表一個按鈕，您可以分別設定這三個按鈕的色彩、文字…等。 點選「正常」項目，此時會開啟「正常」項目的選單，這裡選擇您要設定的項目，並依照需求修改該項目的屬性。 接著再去點選您要修改的項目，一一的進行修改即可，修改完成後，按下「匯出」按鈕，即可將按鈕匯出。

64 6-5-2　元件設計師的使用 這裡我們選擇匯出「至 HTML....」，選擇此選項後，PhotoImapct會將該按鈕匯出成一個網頁檔，並將該按鈕儲存在自動產生的「Images」資料料夾中。 這是存放網頁中的圖片資料夾，其圖片在您進行匯出動作時，會自動命名 這是網頁檔案，點選該檔案時，會以IE瀏覽器開啟

65 6-5-2 元件設計師的使用 將Rollover按鈕複製到FrontPage網頁中
6-5-2　元件設計師的使用 將Rollover按鈕複製到FrontPage網頁中 這裡我們來看看如何將製作好的Rollover按鈕，與我們在FrontPage中所製作的網頁中結合在一起。在進行前，請您先在FrontPage中開啟一個要插入Rollover按鈕的網頁。 開啟光碟片中的「計概Ⅱ∕Ch06∕範例∕01.htm」檔案，接著點選功能表上的「檢視∕原始檔」功能。 此時，該網頁的原始碼會以「記事本」開啟，接著我們要將一部份的原始碼複製到FrontPage的網頁中。請您選取「<Script Language=”JavaScript”>」開頭到「</Script>」結束的HTML程式碼。

66 6-5-2　元件設計師的使用 選取好後，按下鍵盤上的 Ctrl + C 快速鍵，複製這段語法，複製好後將視窗切換至您所開啟的網頁中，將滑鼠游標移至要插入的位置上，再按下「HTML」標籤，將網頁切換到HTML編輯模式下。 進入「HTML」模式後，您會發現滑鼠游標停留在您所要插入的位置上，接著按下鍵盤上的 Ctrl + V 快速鍵，將我們所複製的語法貼上。 複製完成後，接著我們要再複製顯示按鈕部份的HTML程式碼，請您再至記事本中選取「<A HREF=””」開頭，「</A>」結束的程式碼。 選取好後，按下鍵盤上的 Ctrl + C 快速鍵，將視窗切換至網頁中，將滑鼠游標移至要插入按鈕的位置上，再按下「HTML」標籤，將網頁切換到HTML編輯模式下。

67 6-5-2　元件設計師的使用 進入「HTML」模式後，您會發現滑鼠游標會停留在您所要插入的位置上，接著按下鍵盤上的 Ctrl + V 快速鍵，將HTML程式碼複製到插入點上。 複製完成後，接著按下「一般」標籤，回到編輯模式，此時在插入點上就會多了一個我們所插入的按鈕。 接著按下「預覽」標籤，即可進行預覽的動作。您也可以直接點選功能表上的「檔案∕用瀏覽器預覽」功能，到瀏覽器中預覽。

68 6-6　動畫的製作 6-6-1　使用「動畫圖庫」製作動畫 6-6-2　利用GIF Animator 5.0工具製作動畫

69 6-6-1　使用「動畫圖庫」製作動畫 這裡您可以先開啟光碟片中的「計概Ⅱ∕Ch06∕範例∕夜色.jpg」檔案，進行以下的設定與練習。我們要在圖片中加入「煙火」的動畫效果。 按下一般工具列上的「 」工具鈕，開啟「開啟」對話方塊，選擇光碟片中的「計概Ⅱ∕Ch06∕範例∕夜色.jpg」檔案。 開啟檔案後，按下面板管理員上的「 」工具鈕，開啟「百寶箱」，按下「 」工具鈕，在選單中選擇「動畫圖庫」中的「光線動畫」，這裡我們選擇「煙火1」效果。 在「煙火1」縮圖上雙擊滑鼠左鍵，開啟「光線」對話方塊，這裡可以設定煙火的動畫效果。

70 6-6-1　使用「動畫圖庫」製作動畫 在「元素」選單中共有3個煙火，這裡我們只要使用二個煙火效果即可，請您選擇「煙火1」，選取好後按下「 」工具鈕，即可刪除「煙火1」。 接著要調整「煙火2」和「煙火3」的在圖片中的位置，首先請點選「煙火2」，接著將滑鼠游標移至圖片預覽區上的煙火，此時滑鼠游標會呈「 」狀態，接著按下滑鼠左鍵不放，拖曳滑鼠，將煙火放於左上角。 接著再點選「煙火3」，將「煙火3」的位置放於右上角。完成後接著按下「 」工具鈕，即可預覽動畫的效果，若要停止預覽時，按下「 」工具鈕即可。 當您在預覽時，您會發現煙火跑的太快，所以我們將他的畫格更改為「20」，讓煙火出現的速度慢一點。修改好後，最後按下「確定」按鈕，選擇「儲存動畫檔與建立新的物件」。

71 6-6-1　使用「動畫圖庫」製作動畫 接著會開啟「另存新檔」對話方塊，在「檔案名稱」欄位中輸入動畫的名稱；在「GIF動畫選項」中您可以設定動畫是否要一直重覆，若要請將「無限迴圈」勾選，若不要請將勾選取消，並在欄位中輸入要重覆的次數，都設定好後按下「存檔」按鈕即可完成動畫的製作。

72 6-6-2 利用GIF Animator 5.0工具製作動畫
利用「動畫精靈」製作動畫 在製作動畫前，您可以先利用PhotoImpact製作一連串的圖片，而在製作時，這些圖片最好是有連續性的，因為這樣的動畫看起來會比較順。這裡我們利用以下的圖片製作出一個動畫圖片。

73 6-6-2 利用GIF Animator 5.0工具製作動畫
點選工作列上的「開始∕程式集∕Ulead PhotoImpact 8∕Ulead GIF Animator 5.0」工具。 開啟GIF Animator工具後，會出現「啟動精靈」對話方塊，這裡您可以選擇要建立新的動畫或是開啟舊有的檔案，若不想使用「啟動精靈」時，直接按下「關閉」按鈕，按下「關閉」按鈕後，就會進入Ulead GIF Animator操作視窗中。 這裡我們要利用「動畫精靈」來製作動畫，所以請您點選「動畫精靈」選項，進行動畫的製作。 接著會開啟「動畫精靈─設定底框大小」對話方塊，這裡我們要設定製作的動畫圖片大小，我們所製作好的圖片大小是「590*385」，所以在「寬度」欄位中輸入「590」，在「高度」欄位中輸入「385」。輸入完後按「下一步」繼續。

74 6-6-2 利用GIF Animator 5.0工具製作動畫
著我們要選取要製作成動畫的所有圖片，請直接按下「新增影像」按鈕，開啟「開啟」對話方塊，選擇檔案。 開啟「開啟」對話方塊後，請選擇光碟片中的「計概Ⅱ∕Ch06∕範例∕海豚」資料夾，選取「a_10.gif」到「a_17.gif」的檔案，選取時，按著鍵盤上的 鍵即可進行連續選取的動作。選取好後按下「開啟」按鈕。 回到「最佳化精靈-選取檔案」對話方塊後，在清單中就會出現我們所選擇的檔案，接著按「下一步」繼續。 接著，我們要來設定動畫的延遲時間，這裡您可以依照需求進行設定。

75 6-6-2 利用GIF Animator 5.0工具製作動畫
最後按下「完成」按鈕，回到「Ulead GIF Animator」操作視窗中，就可以看到我們所製作的動畫。接著您可以按下「 」工具鈕，預覽動畫的效果，若要停止預覽時，則按下「 」工具鈕即可停止。

76 6-6-2 利用GIF Animator 5.0工具製作動畫
修改畫格的延遲時間 選取您要選修格的畫格，在該畫格上按下滑鼠右鍵，在快顯功能表中選擇「畫格內容」；或是直接點選功能表上的「畫格∕畫格內容」功能。 此時會開啟「畫格內容」對話方塊，接著在「延遲」欄位中輸入您要修改的時間，輸入完後按下「確定」按鈕即可。

77 6-6-2 利用GIF Animator 5.0工具製作動畫
調整畫格順序 若要調整畫格順序時，只要點選您要調整的畫格後，按著滑鼠左鍵不放並拖曳滑鼠，即可將畫格拖曳到您要的位置，確定位置後放掉滑鼠左鍵，即可完成畫格的順序調整。

78 6-6-2 利用GIF Animator 5.0工具製作動畫
儲存動畫 在GIF Animator中，您可以將製作好的動畫，存成「GIF檔」、「UGA檔」、「UFO檔」、「PSD檔」、「視訊檔（*.avi）」、「Flash檔（*.swf）」。要存檔時點選功能表上的「檔案∕另存新檔」功能，在選單中即可選擇您要存檔的方式。 您也可以直接按下一般工具列上的「 」選單鈕，在選單中選擇您要存檔的方式，當您選擇時，會開啟「另存新檔」對話方塊，即可進行存檔的動作。

79 6-6-2 利用GIF Animator 5.0工具製作動畫
加入橫幅文字 在GIF Animator中，您可以在動畫中加入「橫幅文字」，而這個橫幅文字可以讓您進行動畫的設定，這裡我們就來看看該如何加入橫幅文字。我們延續前面的例子，在第8個畫格後加入「賞鯨之旅．邀您同遊」的文字。 點選第8個畫格，接著按下畫格面板中的「 」工具鈕，您也可以直接點選功能表上的「畫格∕新增橫幅文字」功能。 接著會開啟「新增橫幅文字」對話方塊，請點選「文字」標籤，在欄位中輸入「賞鯨之旅．邀您同遊」，輸入完後即可設定該文字的格式。

80 6-6-2 利用GIF Animator 5.0工具製作動畫
接著我們要來調整文字的位置，將滑鼠游標移至預覽區上的文字，按著滑鼠左鍵不放並拖曳滑鼠，即可移動文字的位置。 接著點選「特效」標籤，勾選您要使用的動畫，這裡我們將「進入場景」和「離開場景」都設定為「淡化」效果，並將「畫格」都設定為「10」。 接著點選「畫格控制」可以設定橫幅文字的「延遲時間」，這裡請您自行依照需求做設定。接著點選「霓虹燈」標籤，將「霓虹燈」勾選，將「方向」選擇「外側」，將「寬度」設定為「6」，將「色彩」選擇「黃色」，將「光芒」及「透明度」勾選。

81 6-6-2 利用GIF Animator 5.0工具製作動畫
都設定好後，按下「開始預覽」按鈕，即可進行動畫的預覽，若要停止則按下「停止預覽」按鈕。 最後按下「確定」按鈕，選擇「建立成橫幅文字（建議選項）」選項，即可在原有的動畫中加入橫幅文字。 回到操作視窗後，在畫格中就會多了20個我們所加入的橫幅文字畫格。最後別忘了進行存檔的動作。

82 6-6-2 利用GIF Animator 5.0工具製作動畫
設定動畫的循環次數 製作好的動畫我們可以設定該動畫要循環的次數，點選功能表上的「編輯∕整體資訊」功能，開啟「整體資訊」對話方塊後，即可進行設定。 預設的循環方式為「無限」，也就是一直重覆的播放動畫，若要取消，則將勾選取消即可，並設定要循環的次數。 在「註解方塊」欄位中，可以輸入註解文字，而此文字並不會出現在動畫中，他只會儲存在UGA專案檔中。