1. 香港教育學院 數社科技學系
PhotoImpact 10 影像設計（二）
學習內容：
 百寶箱與特效
 網上應用
 製作網上相簿
影像設計（二） --- Page 1

2. 香港教育學院 數社科技學系
四. 百寶箱與特效
在之前的章節中，我們曾經把影像作簡單的編修，其實 PhotoImpact 已為你準備
很多功能強大的影像編輯功具，例如：百寶箱、濾鏡特效等。只需要簡單的步驟
及設定，便可以得到華麗的特效。
學習目的：
完成學習後，你便能
 懂得插入「物件資料庫」的物件
 運用「遮罩資料庫」選取影像
 懂得為影像套用「特效」
 運用「百寶箱」加入材質效果
 在「百寶箱」設定文字效果
活動 4.1 為原始影像增添物件
在這活動中，我們會從「百寶箱」的「物件資料庫」取出物件，插入影像。
1. 開啟檔案「dog.jpg」；
2. 在功能表中，選取「工作區」→「面板」→「百寶箱」；
影像設計（二） --- Page 2

3. 香港教育學院 數社科技學系
3. 開啟「百寶箱」面板；
4. 在「百寶箱」中，按一下「物件資料庫」；
5. 在「影像資料庫」中，選取「符號」及「棒球帽」；
影像設計（二） --- Page 3

4. 香港教育學院 數社科技學系
6. 然後把「棒球帽」拖曳到影像編輯區；
7. 選取工具箱的「變形工具」，把「棒球帽」修改和旋轉成合適的大小和角度；
8. 現在可以運用以上的技巧，加入更多的合適物件；
影像設計（二） --- Page 4

5. 香港教育學院 數社科技學系
9. 完成後，儲存檔案「dog.jpg」
活動 4.2 選取影像的部份
在這個活動中，我們會使用「百寶箱」的「物件資料庫」選取影像的部份位置。
1. 開啟檔案「dog.jpg」；
2. 開啟「百寶箱」的「物件資料庫」；
3. 在「遮罩資料庫」中，選取「不規則」及「I07」；
影像設計（二） --- Page 5
小貼士：把影像儲存為.jpg 會把加入的物件和原影像合併，方便往
後活動的製作。

6. 香港教育學院 數社科技學系
4. 按滑鼠的右鍵後，選取「保持原本大小」；
5. 然後把「I07」拖曳到影像編輯區的的合適的位置；
6. 按下複製；
影像設計（二） --- Page 6

7. 香港教育學院 數社科技學系
7. 在功能表中，選取「編輯」→「貼上」→「貼成新影像」；
8. 出現新影像視窗，並儲存檔案「dog.ufo」；
活動 4.3 以曲線變形
在此活動中，我們會使用「以曲線變形」功能，把狗的影像垂直扭曲。
1. 選取影像；
影像設計（二） --- Page 7

8. 香港教育學院 數社科技學系
2. 在功能表中，選取「特效」→「扭曲」→「以曲線變形」；
3. 開啟「以曲線變形」對話方塊後，在「方向」及「未定義區域」中，選取「垂直」和
「重複邊緣像素」；
4. 使用左邊的位移圖調整曲線，改變曲線變形波幅；
影像設計（二） --- Page 8

9. 香港教育學院 數社科技學系
5. 完成後按 確定 ，影像已經扭曲。
活動 4.4 把影像卡通化
在這個活動中，我們會使用「特效」功能，把狗卡通化。
1. 選取影像；
2. 在功能表中，選取「特效」→「藝術」→「卡通」來，開啟「卡通」對話方塊；
影像設計（二） --- Page 9

10. 香港教育學院 數社科技學系
3. 勾選「描邊」後，按 確定 ；
4. 現在影像已經卡通化。
活動 4.5 加入材質效果
在這個活動中，我們會為空白的背景填滿材質。
1. 在影像空白的地方，按一下，取消選取；
影像設計（二） --- Page 10

11. 香港教育學院 數社科技學系
2. 在「百寶箱」中，按一下「圖庫」；
3. 在「填充圖庫」中，選取「藝術家材質」及「AT02」後，按滑鼠兩下；
4. 現在背景已填滿材質。
影像設計（二） --- Page 11

12. 香港教育學院 數社科技學系
活動 4.6 在圖片加入特效文字
在這個活動中，我們會為狗加入名字。
1. 點選工具箱的文字工具；
2. 在編輯區中，輸入「Tommy」，及設定字型、大小和顏色；
3. 在「百寶箱」中，按一下「圖庫」；
影像設計（二） --- Page 12

13. 香港教育學院 數社科技學系
4. 在「文字／路徑特效」中，選取「變形圖庫」及「HT20」後，按滑鼠兩下；
5. 完成所有步驟後，儲存檔案「dog.ufo」。
影像設計（二） --- Page 13

14. 香港教育學院 數社科技學系
五. 網上應用
PhotoImpact 除了可編輯影像及製作華麗的圖形和文字，它還具備建立網頁的基
本功能。使用 PhotoImpact 建立網頁的步驟很簡單，你可以在影像中，切出連結
的區域及加入網址，便能製作簡單網頁。
學習目的：
完成學習後，你便能
 懂得運用「元件設計師」製作標題
 開啟一個新網頁檔案
 懂得把影像插入網頁中
 建立「影像地圖」
 為「影像地圖」加入超連結
活動 5.1 元件設計師
在以下的活動，我們會學習是教導大家如何運用「元件設計師」設計具吸引力的
標題。
1. 在功能表中，選取「網路」→「元件設計師」；
2. 開啟「元件設計師」對話方塊；
影像設計（二） --- Page 14

15. 香港教育學院 數社科技學系
3. 在「橫幅」內，選取合適的範本；
4. 現在可以在「橫幅」圖層，設定大小「700 X 82 像素」及勾選陰影；
5. 然後在「標題」圖層，「文字」輸入「科學園」；
影像設計（二） --- Page 15
圖層

16. 香港教育學院 數社科技學系
6. 「元件設計師」中，還有很多效果設定，我們可以根據自己喜好，作合適的修
改；
7. 按下 匯出 後，再選取「作為元件物件」；
8. 標題完成後，儲存檔案「tilte.ufo」和「title.jpg」。
影像設計（二） --- Page 16

17. 香港教育學院 數社科技學系
活動 5.2 建立新網頁檔案
在這個活動中，我們會開啟一個新網頁檔案。
1. 在功能表列中，選取「檔案」→「開新檔案」→「開新網頁」；
2. 在「開新影像」視窗的「標題」和「頁面大小」中，輸入「科學網頁」和選擇「750 x
550 像素」後，按下 確定；
3. 便建立一新網頁檔案。
影像設計（二） --- Page 17

18. 香港教育學院 數社科技學系
活動 5.3 插入影像
在這活動中，我們會在開啟的網頁檔案，插入已經製作完成的影像。
1. 在功能表列中，選取「網路」→「連結物件」→「檔案」；
2. 在「開啟」對話方塊中，選取影像檔案「graphic.jpg」後，按 開啟 ；
3. 己插入影像「graphic.jpg」。
活動 5.4 建立影像地圖
影像地圖是指影像具有超連結的區域。在這個活動中，我們會運用「影像地圖工
影像設計（二） --- Page 18

19. 香港教育學院 數社科技學系
具」為影像「graphic.jpg」切出三個區域，這些區域將會成為連結目標的框架。
1. 選取工具箱的「影像地圖工具」；
2. 然後在屬性工具列中，選取「圓形」；
3. 將圓形拖曳到影像的「太陽」；
影像設計（二） --- Page 19

20. 香港教育學院 數社科技學系
4. 完成拖曳後，便會顯示半透明的陰影；
5. 根據以上的步驟，為「彩虹」和「花朵」建立影像地圖。
活動 5.5 在影像地圖上加入超連結
在這活動中，我們會把三個影像地圖，建立超連結。
1. 在「影像地圖工具」的屬性工具列中，選取「挑選」及按下「面板」；
影像設計（二） --- Page 20

21. 香港教育學院 數社科技學系
2. 開啟「工具設定 ─ 影像地圖」面板；
3. 接著選取「太陽」的影像地圖；
4. 回到「工具設定 ─ 影像地圖」面板，為各欄位輸入以下內容：
URL http://www.lcsd.gov.hk/CE/Museum/Space
目標框架 _blank
替代文字 香港太空館
狀態列 香港太空館
影像設計（二） --- Page 21
小貼士：
URL ：超連結的位址
目標框架 ：選取超連結將開啟於哪個框架
替代文字 ：替物件作簡短的描述
狀態列 ：指定當游標顯示在物件上時，瀏覽器的狀態列上所要顯示的文字。

22. 香港教育學院 數社科技學系
5. 根據以上的步驟，為「彩虹」和「花朵」的影像地圖，輸入以下的內容：
「彩虹」的影像地圖
URL http://www.hkedcity.net
目標框架 _blank
替代文字 香港教育城
狀態列 香港教育城
「花朵」的影像地圖
URL http://www.lcsd.gov.hk/parks/hkzbg/b5/index.php
目標框架 _blank
替代文字 香港動植物公園
狀態列 香港動植物公園
6. 儲存檔案「webpage.ufo」。
活動 5.6 儲存網頁檔案
在之前的活動中，我們把檔案儲存成「.ufo」，但網頁瀏覽器是不能開啟「.ufo」檔
案的，所以我們要把它另存為「.html」檔案。
1. 開啟檔案「webpage.ufo」；
影像設計（二） --- Page 22

23. 香港教育學院 數社科技學系
2. 在功能表列中，選取「檔案」→「儲存 Web」→「存成 HTML」；
3. 開啟「另存新檔」對話方塊後，按 儲存 ；
4. 現在可以使用網頁瀏覽器，測試網頁。
影像設計（二） --- Page 23

24. 香港教育學院 數社科技學系
練習
試把標題檔案「title.jpg」插入檔案「webpage.ufo」的影像內，並匯出網頁檔案
「webpage.html」。
延伸活動：
試運用 PhotoImpact 的功能製作網頁「我的最愛」，並以「影像地圖」功能數個自己
時常瀏覽的網站連結。
影像設計（二） --- Page 24

25. 香港教育學院 數社科技學系
六. 製作網上相簿
當網站製作者想在網站與別人分享自己的照片，使用網頁編輯軟件製作相簿時
候，如果照片的數量只是很少，也不會感到麻煩。但是當面對數十張照片的時候
便會發覺所花的時間和精神都不少。
PhotoImpact Album 便是一個管理多媒體檔案的強大工具，讓使用者簡單的製作
網上相簿，與別人共享照片。
學習目的：
完成這個學習活動後，你便能
 利用 PhotoImpact Album 建立相簿
 為相簿收集照片
 匯出網上相簿
 在 PhotoImpact 中直接作網上相簿
活動 6 利用 PhotoImpact Album 管理相片及製作網上相簿
在這個活動中，我們會把 PhotoImpact Album 的相簿中管理相片，並匯出網上相
簿。
1. 開啟 PhotoImpact Album；
2. 在功能清單中，選取「檔案」→「開新檔案」；
影像設計（二） --- Page 25

26. 香港教育學院 數社科技學系
3. 在「新增」對話方塊的「標題」中，輸入「電腦學會」後，按下 確定 ；
4. 在「插入」對話方塊中，選取「從資料夾和子資料夾收集檔案」後，按下 確
定；
5. 在「收集檔案」對話方塊中，選取「resource」資料夾後，按下 收集 ；
6. 已經把所有照片收集到相簿中；
影像設計（二） --- Page 26

27. 香港教育學院 數社科技學系
7. 在功能清單中，選取「編輯」→「全選」，選取所有照片；
8. 然後功能清單中，選取「縮圖」→「匯出」→「Web 相簿」；
9. 在「匯出至 Web 相簿」對話方塊的「輸出」面頁中，把「HTML 檔名」修改為
「myphoto.html」及設定輸出資料夾的位置；
影像設計（二） --- Page 27
小貼士：
如果想為已建立的相簿加入其他照片，可以在功能清單中，選取「縮圖」→「插入」，把
其他相片的檔案加入於相簿中。

28. 香港教育學院 數社科技學系
10. 在「網頁設定」面頁中，輸入以下設定；
標題標籤 電腦學會
頁首 電腦學會的照片
頁尾 縮圖
11. 在「縮圖」面頁的「版面」中，輸入 6 欄及 6 列後，按下 確定 ；
12. 已經完成網上相簿。
影像設計（二） --- Page 28

29. 香港教育學院 數社科技學系
延伸活動：
試 PhotoImpact 10 中製作班會照片的網上相簿。
影像設計（二） --- Page 29
小貼士：
只需要在 PhotoImpact 10 軟件中，選取「檔案」→「匯出」→「web 相簿」，
便可以開始製作網上相簿。