關閉導覽列 Close Menu
數位文創
English
吳統雄
數位美學
電子書
數位視覺
優化網站
微電影
數位文創管理
大學青年網誌
研究目錄
教學課程頁
討論區目錄
站務與協助
☰
More
社群地圖
社群新聞
│吳統雄
履歷
研究
教學
服務
榮譽
│社科
第1類知識
第2類知識
第3類知識
研究方法
統計/多變項分析
投票行為與選舉預測
53237 選民結構
人類取用行為新典範
取用行為國際研究團隊
│資管
管理學‧經濟學
資訊系統開發
電子商務
網路教育
數位電視
產學合作
就業進修‧甄選必勝
│文創
數位美學/數位文創導論
數位出版/電子書
視覺設計
優化網站
數位視訊/微電影
數位文創管理
大學青年‧網路雜誌
│電音
統雄 數位音樂作品選
我,被禁唱的民歌手
數位音樂創作教學
統雄的音樂知識美學
歡迎聽歌.點歌.下載樂譜
│人文
公共評論
法律評論
社會評論
教育文化傳媒評論
科技科普評論
美語樂學
文學創作
萬象現代(NBA)
資訊社會
幽默人生
統雄樂水
GIF 數位動畫圖示/動畫貼圖

設計與實作快訣
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 與 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檔後的效果在pdf 檔中嵌入數位動畫

advanced Advanced Skills

回頁首 Up to page head 至相關主題 Go to related pages
上一頁 Back to previous page 回頁首 Up to page head 下一頁 Go to nex page
請點這裡看所有留言分類 Please click here to view categories of comments
同類別內相關主題

上層主題
視覺設計總論
視覺設計/數位視覺設計主題_數位圖片=美工繪圖 + 影象照片 Subjects in Visual Design/Digital Visual Design
TX視覺設計創作分析架構與建構元素 Visual & Digital Visual Design Analysis Framework and Its Formation Elements
Visual Design 視覺設計:媒體/媒材的分類與整合
Graphics/Image Processing Basics 圖形影象處理技術簡介
Digital Color Design Fundamentals: Color Primaries, Digital Color Systems 數位色彩設計基礎:色彩原理‧數位調色制度
Color Psychology_Color Matching Design 色彩心理學_數位配色設計
TX's Color Selection and 4 Matching Laws TX選色與四大配色通律
色彩色塊為導向的創作流派_當代實用美術/視覺設計/繪圖美工基礎1 Color Structures Centered Stream_ Contemporary Practical Arts and Visual Design
幾何象徵為導向的創作流派_當代實用美術/視覺設計/繪圖美工基礎1 Symbolic Geometry Centered Stream_ Contemporary Practical Arts and Visual Design
複合媒材為導向的創作流派_當代實用美術/視覺設計/繪圖美工基礎3 Mixed Media Centered Stream_ Contemporary Practical Arts and Visual Design
當代實用美術作品品析_當代實用美術/視覺設計/繪圖美工 Contemporary Practical Arts and Visual Design: Artwork Critique
數位影象處理軟體應用簡介 Introduction to Imaging Processing Software
數位 圖片設計實作:數位調色盤與繪圖影象工具應用
數位圖片設計實作:數位圖片檔案轉換
數位圖片設計實作:多選取區與物件/圖層
數位圖片設計實作:圖片輸入與封面設計
數位美工繪圖
Identity Systems and Logo Design 識別標幟系統與標準字設計
視覺識別標幟系統 設計思想演變_視覺識別標幟系統設計 Evolution of Visual Identity System Design_VIS Design
視覺識別標幟系統應用專域:紋章學、旗幟學_ Heraldry and Vexillology: Specific Visual Identity System Design_VIS Design
網路時代的識別標幟系統:通用物件規格與範例 General Identity Systems Design
Logo Design: Cases 1 標誌設計:變形技術與反相技術_創意範例1
Logo Design: Cases 2 標誌設計創意範例2
Identity Systems Practice: Logo 標誌之標準圖案設計與元件設計師實作
Identity Systems Practice: Logo 標誌之標準字設計與文字工具實作
數位 圖片設計實作:造型家族:變形‧扭曲‧潤飾
網站視覺識別:布景主題‧橫幅導覽‧風格元件設計 VIS: Web Theme, Banner, Doodle, Navigation and Style Elements Design
網站視覺識別:圖示‧專用圖示‧多元圖示‧風格物件設計 VIS: Icons, Personal Icons, Creative Symbolic Icons and Style Objects Design
多元視覺識別:個人化社交卡‧貼圖‧票證設計 VIS's Social Cards/Stickers/Tickets Design
Identity Systems Practice: Banner and gif 識別標幟系統橫幅實作與gif
Hand-Drawn Visual Identity System Design 手繪視覺識別系統設計
網路素人 創意漫畫_數位繪圖/數位美工 Web Amateur Cartoonists' Works
數位攝影
數位影象/數位攝影設計 創作分析架構與建構元素 Digital Imaging/ Digital Photo Design Analysis Framework and Its Formation Elements
數位攝影建構:焦距與平面元件 Focus and Plane
數位攝影建構:光圈與景深元件 Aperture and Depth
數位攝影建構:快門與光源元件 Shutter Speed and Lighting
數位攝影建構:影象後製 與影象改創元件 Post Production
數位攝影機 簡介 About Digital Camera
Nikon F3之迷戀!
Pentax K2之信賴
數位攝影設計:劇情式劇本實作 Digital Imaging/ Digital Photo Stories Design
數位攝影設計:系列式劇本實作 Series Design in Digital Imaging/ Digital Photo Stories' Screenplay and Practice
數位攝影設計:錯覺式劇本實作 Digital Imaging/ Digital Photo Stories Design: Screenplay and Practice_ Visual Illusion
數位攝影劇本:團體式劇本實作 Digital Imaging/ Digital Photo Portrait Design: Screenplay and Practice_ Group Photo Shoot Design
數位攝影設計:人像攝影劇本實作 Digital Imaging/ Digital Photo Portrait Design
攝影劇本與視覺設計_美學追求的看山看水過程 Pursuit in Aesthetics
攝影劇本與視覺設計_美學結構的天成與偶得:造境與自然 Two Structures in Aesthetics
當代多元創意攝影作品品析 Contemporary Interdisciplinary Imaging Arts in Visual Design: Photos Critique
Digital Photo Case Study_1 數位攝影設計個案研究1
Digital Photo Case Study_2 數位攝影設計個案研究2
影象處理/後製改創
視覺設計/數位攝影/數位美工:視覺焦點設計與數位影象後製/影象改創系列
調光 數位特效_數位影象後製/影象改創技術 Light Digital SFX_ Digital Pictures Postproduction
調色 數位特效_數位影象後製/影象改創技術 Color Digital SFX_ Digital Pictures Postproduction
調HSB 數位特效_數位影象後製/影象改創技術 Integrating Hue/ Saturation/ Brightness of Digital Visual SFX_ Digital Pictures Postproduction
去雜 數位特效_數位影象後製/影象改創技術 Clean up Digital Visual SFX_ Digital Pictures Postproduction
魔術棒去背 數位特效_數位影象後製/影象改創技術 Background Digital SFX_ Digital Pictures Postproduction
套索去背 數位特效_數位影象後製/影象改創技術 Background Digital SFX_ Digital Pictures Postproduction
擷取物件去背.橡皮擦輔助去背 數位特效_數位影象後製/影象改創技術 Background Digital SFX_ Digital Pictures Postproduction
柔邊 數位特效_數位影象後製/影象改創技術 Border Digital SFX_ Digital Pictures Postproduction
加框 數位特效_數位影象後製/影象改創技術 Frame Digital SFX_ Digital Pictures Postproduction
模糊、遮罩/遮色片、色版、像素模糊、馬賽克特效_數位影象後製/影象改創技術 Blur and Mask Digital Visual SFX_ Digital Pictures Postproduction
文字特效 數位特效_數位影象後製/影象改創技術 Text Digital Visual SFX_ Digital Pictures Postproduction
圖層組合/混合模式/高級漸層_數位影象後製/影象改創技術 Layers Digital Visual SFX_ Digital Pictures Postproduction
後製整合 數位特效_數位影象後製/影象改創技術 Layers Digital Visual SFX_ Digital Pictures Postproduction
數位醫美系列 數位美容整形_數位視覺焦點設計與數位影象後製/影象改創技術 Plastic Surgery of Digital Aesthetic Medicine Series
數位減肥塑身 數位醫美系列_數位視覺焦點設計與數位影象後製/影象改創技術 Body Shaping of Digital Aesthetic Medicine Series
數位醫美環境改創 數位醫美系列_數位視覺焦點設計與數位影象後製/影象改創技術 Body Shaping with Multiple Layers of Digital Aesthetic Medicine Series
攝影詮釋學_數位視覺焦點設計與數位影象後製/影象改創技術 Interpretational Photography and Image Manipulation
數位動畫創作
數位動畫創作分析架構‧建構元素與實務分類 Animation Creation Analysis Framework, Formation Elements and Its Types
GIF 數位動畫圖示/動畫貼圖:設計與實作快訣 Animated GIF Icons Creation: Design and Practice Tips
GIF 數位動畫小品創作 :企畫與原稿設計
GIF 數位動畫小品創作 :過場設計 Animated GIF Graphics
GIF 數位動畫小品創作:特效設計 Animated GIF Graphics
GIF 數位動畫小品創作:輸出:另存新檔‧匯出/ 觀摩
GIF 數位動畫小品創作:個案研究/ 資源與觀摩
Animation: Transparent Overlay 數位動畫創作進階篇:透明重疊
Animation: Frames' Modification 數位動畫創作進階篇:畫格微調、新增、加物件
Animation: Multiple Objects in Frames 數位動畫創作進階篇:畫格多物件處理
數位動畫式統計表圖


內容網站:提供與分享各種知識、資訊、作品。互動群組:社員可以討論、展示、交流、企畫、分工、管理、投票決策。合作群組:Web2.0的民主自治精神,社員可以參與決定群組的內容與表現形式。

吳統雄的音樂-Sean TX Wu's Music  笑話中學美語-Humor and American English Learning   私人來信-Write a private mail to Sean TX Wu  留言與討論 Leave Comments/ Forum 吳統雄的相簿-Sean TX Wu's Album

只在「統雄社群」內查詢以下主題 Search in TXCommunity

統雄網群的Google排行本站Google排行榜‧全球冠軍