讓文字動起來 用 Ulead Gif Animator 製作動態文字橫幅

1. 讓文字動起來 用Ulead Gif Animator製作動態文字橫幅 科園國小 陳如瑾

2. 軟體簡介和文字橫幅的應用 • Ulead Gif Animator簡介 • 友立資訊公司的動畫製作軟體 • Ulead Photoimpact軟體安裝時，通常會連Ulead Gif Animator一併安裝 • 動態文字橫幅的應用 • 定義： 動態文字橫幅就是俗稱的banner • 用途： 使網頁的呈現更加活潑生動

3. 動態文字橫幅教學大綱 • 製作橫幅底圖 • 開啟Ulead Gif Animator • 新增橫幅文字點我看範例展示 • 利用顏色變化做閃爍效果點我看範例展示 • 用分割文字做跳動效果點我看範例展示 • 用閃底作出閃字點我看範例展示

4. 製作橫幅底圖 1.開啟photoimpact, 2.開新影像,修改寬度為468,高度為60

5. 製作橫幅底圖 點選”編輯”—>”填充”

6. 製作橫幅底圖 可以任意選擇色彩.漸層.材質和影像 做出不同的填充效果

7. 製作橫幅底圖 • 回教學大綱 1.存檔.檔案類型選擇jpg.這樣橫幅的底圖就完成了 2.網路上有許多現成的橫幅底圖可供下載使用

8. 開啟Ulead Gif Animator 1.開啟photoimact.點選右上方的切換. 2.選擇ulead gif animator

9. 開啟Ulead Gif Animator Ulead gif animator開啟後.選擇開啟現有的影像檔

10. 開啟Ulead Gif Animator 開啟底圖後.會進入編輯模式 開啟剛才做好的橫幅底圖

11. 開啟Ulead Gif Animator • 回教學大綱 若想更改延遲時間.可以快速點擊兩下畫格. 在畫格屬性中更改延遲時間.數字越小.出現時間越短

12. 新增橫幅文字教學 點選”畫格”—>”新增橫幅文字”

13. 新增橫幅文字教學 陰影 1.在文字區中樞輸入想要加的文字.並修改想要的字型.大小及顏色. 2.若希望文字下方有陰影.可點選右上方的陰影選項.

14. 新增橫幅文字教學 1.在特效選項中.選擇進入場景和離開場景想要的效果 2.下方的畫格數字可以修改.數字越大.效果越細緻.但是檔案也會比較大

15. 新增橫幅文字教學 1.在畫格控制中.修改延遲時間的數字. 2.數字越小.出現時間越短

16. 新增橫幅文字教學 點選霓紅燈的選項.橫幅文字就會出現霓虹燈效果

17. 新增橫幅文字教學 用滑鼠點選下面視窗中的文字.可以調整文字在底圖中的位置 點選下方-開始預覽.可以看到橫幅文字的效果

18. 新增橫幅文字教學 按確定後.選擇建立橫幅文字

19. 新增橫幅文字教學 從編輯模式切換到預覽模式 觀看橫幅文字出現的效果

20. 新增橫幅文字教學 • 回教學大綱 1.完成好的橫幅文字.檔名存成gif檔.這樣就完成了 2.uga檔和gif檔的差別: (1) uga檔可讀取與再修改 (2) gif檔讀取但不能再修改

21. 新增橫幅文字範例展示 • 範例展示 • 新增橫幅文字+霓虹燈+陰影 • 新增橫幅文字+陰影 • 回教學大綱

22. 利用顏色變化做閃爍效果教學 開啟橫幅底圖

23. 利用顏色變化做閃爍效果教學 選擇再製畫格

24. 利用顏色變化做閃爍效果教學 1.點選文字工具 2.輸入想要的文字

25. 利用顏色變化做閃爍效果教學 2.按”編輯””複製” 1.用滑鼠點選視窗中的文字

26. 利用顏色變化做閃爍效果教學 2.按”編輯””貼上” 1.用滑鼠點選第二個畫格

27. 利用顏色變化做閃爍效果教學 1.用滑鼠點選第二個畫格中的文字 2.按右鍵.選擇”文字”—>”編輯文字”

28. 利用顏色變化做閃爍效果教學 1.點選第二個畫格的文字.選擇不同的顏色. 2.若希望閃爍效果明顯一些.顏色深淺的變化就要大一些 例如第一個畫格選深紅色.第二個畫格就要選淺粉紅色

29. 利用顏色變化做閃爍效果教學 • 回教學大綱 按另存新檔.選擇gif格式.就完成了

30. 利用顏色變化做閃爍效果教學範例展示 • 範例 • 其他範例:用漸層顏色做出的效果 • 回教學大綱

31. 用分割文字做跳動效果(範例一)教學 開啟橫幅底圖.再製一個畫格 選擇再製畫格

32. 用分割文字做跳動效果(範例一)教學 1.輸入想要加的文字. 2.將文字複製到第二個畫格 3.點選第一個畫格的文字.按右鍵.選擇”文字-分割文字” 將文字複製到第二個畫格

33. 用分割文字做跳動效果(範例一)教學 1.按住ctrl鍵.同時選取第一個畫格中的第1.3.5個字 2.用鍵盤上的方向鍵.往上移動五下 3.同樣的方法.選取第二個畫格中的第2.4.6個字.往上移動五下 4.按另存新檔.就完成了

34. 用分割文字做跳動效果(範例二)教學 1.輸入想要加的文字. 2.將文字複製到第二個畫格 3.點選第一個畫格的文字.按右鍵.選擇”文字-分割文字” 4.利用變形工具.點選第一個畫格中的第1.3.5個字.往左調整15度

35. 用分割文字做跳動效果(範例二)教學 1.利用變形工具.點選第二個畫格中的第2.4.6個字.往右調整15度 2.另存新檔.就完成了

36. 用分割文字做跳動效果(範例三)教學 • 回教學大綱 1.輸入想要加的文字. 2.將文字複製到第二個畫格 3.點選第一個畫格的文字.按右鍵.選擇”文字-分割文字” 4.利用變形工具.點選第一個畫格中的第1個和第6個字.把字體變大 5.另存新檔.就完成了

37. 用分割文字做跳動效果範例展示 • 範例一 文字上下跳動 • 範例二 文字左右旋轉 • 範例三 文字大小變化

38. 用分割文字做跳動效果其他範例 • 分割文字+變化單個文字的顏色(共6張圖) • 分割文字+移動單個文字的位置(共7張圖) • 分割文字+逐漸增加文字+變化顏色(共5張圖) • 回教學大綱

39. 用閃底作出閃字(範例一)教學 1.按新增.開啟新檔 2.調整高度為400.寬度為100 3.選擇完全透明

40. 用閃底作出閃字(範例一)教學 1.按文字工具 2.輸入文字後.按確定

41. 用閃底作出閃字(範例一)教學 按魔棒

42. 用閃底作出閃字(範例一)教學 滑鼠在透明部份點一下

43. 用閃底作出閃字(範例一)教學 1.按加入圖像 2.加入喜歡的閃底底圖

44. 用閃底作出閃字(範例一)教學 3.按剪下 1.按點選工具 2.滑鼠在透明部份點一下

45. 用閃底作出閃字(範例一)教學 另存新檔就完成了

46. 用閃底作出閃字(範例二)教學 1.按新增.開啟新檔 2.調整高度為400.寬度為100 3.選擇完全透明

47. 用閃底作出閃字(範例二)教學 1.按文字工具 2.輸入想要加的文字

48. 用閃底作出閃字(範例二)教學 1.用滑鼠點選文字 2.按右鍵.選擇”文字+霓虹燈”

49. 用閃底作出閃字(範例二)教學 按確定

50. 用閃底作出閃字(範例二)教學 1.按魔棒 2.用滑鼠點一下黑色字體的部份