
設計與實作快訣
Animated GIF Icons Creation
Design and Practice
數位出版/網路文創:多媒體篇-知識美學/數位美學之建構方法
數位動畫設計製作程序繼承視覺設計4元素、媒體建構層次的數位影象、或數位繪圖的建構物件,以及增加數位數位動畫特殊的建構物件。
數位動畫的建構物件與技術
動畫設計與實作程序包括:認識創作分析架構與建構元素、企畫與原稿設計、匯入、順序、速度、過場、特效、調整、輸出、匯出、資源、品析、發表。
動畫進階技術包括:物件管理員面板、透明重疊、透明融接、底框與畫格進階應用、調整大小與位移、畫格多物件處理、高等微調-尺寸與對齊、畫面修飾。
數位動畫圖示/動畫貼圖
數位動畫圖示通常為視覺識別標幟系統的組成物件之一,只是以動畫方式表現,主體在可能只有幾秒,幾乎都是循環播放。
數位動畫貼圖/圖示相對於前2個類型,尺寸較小,業界雖無固定的標準,通常長寬在220px 以下(這是早期網站設計的標準,可參考延用,但不需被限制)。
數位動畫貼圖則是手機興起後的新興創作方式,通常以系列方式表現,故本身應具備視覺識別標幟系統設計觀念,在當前與未來,均有廣泛應用需求。
相較於標準數位動畫小品,數位動畫圖示省略了過場、特效 2 個步驟。
數位動畫創作軟體選擇:PhotoImpact Animator
統雄老師「問題解決式學習方案」下的教學工具選擇策略是:
工具獨立性,
工具環境可供性,
工具個人應用性,
工具彈性發展性。
希望達到學文創‧不只是學軟體的目的,所以選擇 PhotoImpact Animator 作為教學工具。
臺灣的資訊產業偏向硬體生產,而友立資訊1996 問世的 PhotoImpact 是軟體業中極少的臺灣之光,而也因為不凡的成就,在 2006 年後,被美國 Corel 集團併購了。
PhotoImpact 與 Photoshop, Corel Paint 並列為高階影象處理的三巨頭,使用自行開發的 ufo 系統格式存儲,有些繪圖支援功能還超過 Photoshop,且提供數位動畫創作功能,價格卻遠低於 Photoshop。美國版的 X3 版之後,價格又大幅提升了。
PhotoImpact 8 已達完整境界,PhotoImpact 12 是臺灣品牌最後1版,功能略有增加,但改採用雲端支援,在教室集體上課會有頻寬問題,並不便利。而解決方案是同時安裝 8 和 12,在 12 使用過程中有媒材支援需求時,到本機 8 版的資料中去抓。
Windows 7 以後 PhotoImpact 的問題
Windows 7 以後 PhotoImpact 無法開啟 .ufo 檔案,除此之外,PhotoImpact 所附的數位動畫創作軟體 animator 也可能發生問題。
upi12_patch_(tc).exe
友立資訊曾提出 upi12_patch_(tc).exe 修補程式,解決這個問題,建議使用PhotoImpact 12 以下,一定要安裝執行。
但由於友立資訊的易手,官網上已經沒有這個檔案,可以到統雄老師提供的工具頁下載:
http://tx.liberal.ntu.edu.tw/Tools/Image/PhotoImpact/
Photoshop
與 PhotoImpact 比較
在 Photoshop 中,也可以製作 GIF 動畫,啟用方式為:
〉視窗
〉時間軸
出現類似 PhotoImpact 的介面,然後使用圖層區編輯。
不過,Photoshop 不提供動畫專案檔,未來編修較費工時。
數位動畫圖示/動畫貼圖的設計建構程序
數位動畫的格式有很多,最簡易的就是GIF數位動畫格式,一般作為「多媒體小品 Multimedia Title」。
從這種方法入手打好數位動畫創作基礎,再使用其他更複雜的工具,自然水到渠成。
較大型的數位動畫,則設計製作等同「數位視訊」。
主題企畫
下例的數位動畫圖示/動畫貼圖視覺主題為「教學神掌」。
意涵:表達統雄老師的特殊教學秘訣。
結構:以佛教的「大手印」表現特殊秘訣;以統雄老師標誌上的「標準圖」--金環,兼為底座與「風格物件」。
動力:以火焰噴發,表現熱情分享、與薪火傳承。
色彩:統雄老師網站主色:藍、黃。不過,圖示是基於輔助角色,故以黃為主、而以藍(手腕)而次。
原稿設計:逆向工程法
動畫圖示/動畫貼圖的原稿設計,經常採用逆向工程法,亦即先將完成、完整圖示畫好,再逆向一步、一步減去部分結標。
為何不「順向」加上動畫物件呢?因為考慮「結構完整性」,當全部畫完後,可能有細部還要微調,如果順向增加畫格,可能又要從頭再來一次,增加反復性。
火焰完成後是由下向上噴發,但原稿設計卻是將完成圖慢慢擦去。
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
Down Materials
GIF Animator
〉視窗
〉切換
到 GIF Animator
Open ga-main.exe or switch to the package.
Choose the 'Wizard'.
使用「動畫精靈」協助後續程序。
Decide the size by the materials, however, you may change it.
尺寸選擇
數位動畫如果只是在自己的網站播放,尺寸很自由,經常是根據原稿決定。
這裡是 66 * 120
速度預設
這裡可以設定速度,但實務上是到最後才調整,所以可暫時採用預設速度。
匯入
Select all original gif files.
按〈新增影象〉可匯入原稿。
調整 順序
The interface of the Animator.
如有必要,可點選畫格,調整順序。
速度調整
系統預設為速度相同。
但為了表現火焰的閃動感,設計為不同速度。同時,第一格通常停頓較長。
右鍵〉任一畫格
〉畫格內容
注意單位為 1/100 秒。
通常選擇「智慧型」。
也可以使用 shift, control 作多格選擇、多格設定。
按〈播放〉鈕,可以觀察播放效果。
其他參考數位動畫圖示/動畫貼圖
![]() |
![]() |
![]() |
![]() |
![]() |
將表格編輯成數位動畫統計圖
在pdf
檔中嵌入數位動畫
Advanced Skills




