登錄站點

請由此登入

歡唱聯盟 - 六年乙班小學堂

  • ☆星辰☆

    製圖...GIF動畫教學..轉貼

    ☆星辰☆ 2010-12-03 16:00

    GIF動畫教學
    台中市九十三年度國民中小學
    暑期在職教師資訊應用培訓研習

    成果展:

    學員作品之一  學員作品之二 學員作品之三  學員作品之四

    一、軟體與GIF動畫原理簡介:

    軟體:友立資訊Ulead GIF Animator 5,如果已經安裝PhotoImpact 8 的學員,上述軟體就已經安裝了,打開Ulead GIF Animator 5,請建立一個捷徑在桌上,Ulead GIF Animator 5的圖示按右鍵==>傳送到==>桌面當作捷徑。
    gif程式位置

    GIF動畫原理簡介:教學示範圖按右鍵==>另存圖片於桌面上,GIF Animator==>檔案==>開啟影像==>查詢下拉選項選桌面==>找到剛剛存檔的apple.gif==>開啟,開啟之後就懂囉,原來它的主要原理就是利用人類眼睛的視覺暫留現象,在預設的時間下結合多張圖檔輪播呈現。
    開啟一張GIF動畫圖檔,說明GIF動畫原理

    二、利用動畫精靈,快速完成GIF動畫。

    (一)操作步驟:

    製作動畫的用的小蘋果圖檔製作動畫的用的小蘋果圖檔製作動畫的用的小蘋果圖檔按右鍵另存圖片,將此三個圖檔存於桌面==>GIF Animator==>檔案==>動畫精靈==>動畫精靈-設定底框大小的對話框中,寬度、高度皆填入32(三個小蘋果的原始大小為29×32,不要小於此寬高)==>下一步==>新增影像==>查詢下拉選項選桌面==>將03、04、05三張圖檔連續點選起來(利用Shift鍵連選或Ctrl鍵跳選)==>開啟==>下一步==>下一步==>完成==>檔案==>另存新檔==>GIF檔==>桌面==>檔案名稱apple01

    (二)完成的影像:這樣就簡單快速的完成一張GIF動畫囉!動畫精靈完成的簡單動畫圖檔

    (三)操作詳解:

    1. 03至05的圖檔是將apple.gif的第一畫格另存之後,再利用PhotoImpact影像處理。
    2. 將apple.gif動畫的第一畫格存檔:點選1:畫格==>檔案==>另存新檔==>影像畫格==>存於桌面,影像畫格只能存成jpg檔案,請將它命名為apple01==>儲存。
    3. 開啟PhotoImpact==>檔案==>開啟舊檔==桌面==開啟apple01.jpg==>顯示比例調為400%==>魔術棒工具==>點選蘋果以外的空白,無法連續點選可以在模式的地方點選+==>在圖示上按右鍵==>改選未選取部份==這樣就可以將蘋果選取囉!
      利用魔術棒工具選取物件

    4. 再利用百寶箱的特效圖庫的色彩調整,調出三種不同的蘋果色調。
    5. GIF動畫製作要注意每張圖檔的寬、高一定要相同,否則合成之後會很突兀。
    6. GIF動畫是多張圖檔連續播放,所以圖檔不宜過大,否則瀏覽太慢且不順暢。
    7. GIF Animator 5常常會配合PhotoImpact 一起使用,所以可以事先在編輯==>最愛的影像編輯程式中,新增加入。

    三、調整速度、位置,再製、刪除畫格,加上橫幅文字:

    1. GIF Animator==>開啟apple01.gif==>左鍵壓住第一畫格不放拖向第二畫格==>第一畫格按右鍵==再製畫格==>左鍵壓住第二畫格不放拖向第四畫格==>第三畫格按右鍵==>刪除畫格。
    2. 選取所有畫格==>按右鍵==畫格內容==>延遲改為40(數字越大,動畫轉換播放也越慢)==>確定。
    3. 第二畫格按右鍵==>新增橫幅文字==>在對話框的文字設定中輸入文字==>設定好字型、文字大小、文字顏色==>點選特效,將進場、離場特效設定好==>畫格控制、霓虹燈有需要都可以勾選==>開始預覽==>停止預覽==>滿意即可、不滿意重新選擇特效。
    4. 確定==>建立成橫幅文字==>檔案==>另存新檔==>GIF檔==>檔名apple02==>儲存,OK囉!新增橫幅文字的動畫檔

    四、利用視訊特效:

    1. GIF Animator==>開啟03.gif==>選擇一個背景顏色(鏤空罩的地方會使用背景色彩)
    2. 視訊特效==>選擇一個特效,設定好畫格、延遲時間、柔邊、框線的粗細顏色等==>確定==>將1:畫格填上背景色(配合使用PhotoImpact)==>調整一下每一個畫格的時間。
    3. 檔案==>另存新檔==>GIF檔==>檔名apple03==>儲存,OK囉!利用視訊特效做出的GIF動畫

    五、創作時間(一):

    每一位學員創作一個動畫檔,檔名請依各位的電腦編號命名,主旨註明校名、姓名,夾檔E-mail給我。

    My Email Address:yunol@mail2000.com.tw,加油!

    六、建立移動的精靈:

    背景圖檔 移動的精靈圖檔
    圖一    圖二

    1. GIF Animator==>檔案==>開啟影像==>開啟一張背景圖(找不到可下載圖一)
    2. 檔案==>新增影像(新增的影像要比背景小)==>可新增靜態的也可新增動態的(可下載圖二)==>利用對齊來調整新增小圖的位置,也可利用畫格將不同畫格的物件調成一致來調整==>調整時間,如果數張畫格的時間都要設定相同,那可以利用Shift或者Ctrl鍵挑選之後再設定。
    3. 再加入昨天教過的新增==>橫幅文字,就可以完成一個在背景上面移動的小精靈動畫檔,還有炫炫的文字效果喔!

    移動的精靈完成圖

    七、視訊GIFs,使用視訊的一部份來建立GIF動畫:

    1. 開啟 GIF Animator==>檔案==>開啟視訊。
    2. 點選欲開啟的視訊==>接著按一下期間
    3. 使用「預覽」視窗和視訊控制項來捲動至您要使用「開始標記」和「結束標記」按鈕來標記欲選取的視訊部分。
      如何擷取視訊的一部份來建立動畫
      • 拉動滑桿到欲開始的影像(B)位置,按下開始標記紐(D)標註開始位置。
      • 拉動滑桿到欲結束的影像(C)位置,按下結束標記紐(E)標註結束位置。
      • BC段就是欲擷取的影像範圍。

    4. 標出您想要使用的影像部分之後,請按「確定」來關閉「期間」對話方塊,回到「新增視訊」對話方塊內,再按一下「確定」,您選擇的畫格就會載入 GIF Animator 中。
    5. 可縮小畫格,讓動畫檔案變小,編輯==>調整影像大小==>維持寬高比勾選起來,改變寬,高自動等比改變==>檔案==>另存新檔==GIF檔==命名存檔==>完成囉!

    小貓打瞌睡視訊檔下載 GIF檔欣賞小貓打瞌睡GIF動畫檔

    飛行的水晶球視訊檔下載 GIF檔欣賞飛行的水晶球GIF動畫檔

    八、創作時間(二):

    每一位學員創作一個移動精靈的動畫檔或者擷取視訊一部份的動畫檔,檔名請依各位的電腦編號命名,主旨註明校名、姓名,夾檔E-mail給我。

    My Email Address:yunol@mail2000.com.tw,掰掰!

    所有需要用到的檔案都有打包成一個壓縮檔(gif_learning.rar),包含網頁和以下的Flash影音教學檔,放在西屯國小的教學資源管理系統,帳號、密碼 guest 即可進入下載!歡迎多多利用此下載點。

    如果文件說明仍有不清楚的地方,請點選下列的影音教學:

    1. 利用動畫精靈快速的完成GIF動畫教學示範成品欣賞
    2. 在靜態的圖檔上新增橫幅文字教學示範成品欣賞
    3. 在動態的圖檔上新增橫幅文字教學示範成品欣賞
    4. 視訊特效教學示範成品欣賞
    5. 建立移動的精靈教學示範成品欣賞
    6. 使用視訊的一部份來建立GIF動畫教學示範成品欣賞

    by yunol

  • 喜悅33
    #1
    喜悅33 2010-12-03 16:05
    好棒喔~~謝謝
  • ☆星辰☆
    #2
    ☆星辰☆ 2010-12-03 16:06
    喜悅33: 好棒喔~~謝謝
    不客氣...歡迎您
  • 奇蹟姐姐
    #3
    奇蹟姐姐 2010-12-03 16:13
    哇~好深奧喔姐姐要學粉久ㄝ
  • ☆星辰☆
    #4
    ☆星辰☆ 2010-12-03 16:15
    奇蹟姐姐: 哇~好深奧喔姐姐要學粉久ㄝ
    阿姐...你馬幫幫忙...只要你一聲令下..我就幫你做好ㄌ
  • 兜蕊咪
    #6
    兜蕊咪 2010-12-03 16:33
    不錯的教學  很讚喔
  • ☆星辰☆
    #7
    ☆星辰☆ 2010-12-03 16:35
    奇蹟姐姐: 安捏姐姐會拍謝溜
    沒辦法阿..誰叫我比你小ㄋ
  • ☆星辰☆
    #8
    ☆星辰☆ 2010-12-03 16:37
    兜蕊咪: 不錯的教學  很讚喔
    本班百廢待興..還盼大家共襄盛舉
  • 奇蹟姐姐
    #9
    奇蹟姐姐 2010-12-03 16:46
    哇~你這張目揪會動ㄝ
  • rebaca
    #10
    rebaca 2010-12-03 16:55
    哇好棒喔..有這種教學..讚...本來很累 沒神的..眼又亮了..發現大寶藏了..
  • ☆星辰☆
    #11
    ☆星辰☆ 2010-12-03 17:00
    奇蹟姐姐: 哇~你這張目揪會動ㄝ
    沒辦法阿...看到好ㄉ素材..我就毛病發作ㄌ
  • ☆星辰☆
    #12
    ☆星辰☆ 2010-12-03 17:01
    rebaca: 哇好棒喔..有這種教學..讚...本來很累 沒神的..眼又亮了..發現大寶藏了..
    那家由歐..
  • 繡兒
    #13
    繡兒 2010-12-03 17:12
    帥哥你還欠我一個圖......沒忘記吧........
  • ☆星辰☆
    #14
    ☆星辰☆ 2010-12-03 17:13
    繡兒: 帥哥你還欠我一個圖......沒忘記吧........
    好啦...你不來奇蹟姐姐哈拉館...難怪我會忘記咩
  • 繡兒
    #15
    繡兒 2010-12-03 17:16
    ☆星辰☆: 好啦...你不來奇蹟姐姐哈拉館...難怪我會忘記咩
    改天有空就去...你先做起來..謝謝你..
  • ☆星辰☆
    #17
    ☆星辰☆ 2010-12-03 21:51
    龍ㄟ:
    我以前也是笨笨ㄉ...一直不知道這軟體這樣好用..
    後來..在一年以前因為社團徽章圖...才認真研究...現在我終於能分享大家...因為我弄懂ㄌ...也寫出很多圖
  • 超級美美
    #18
    超級美美 2010-12-04 01:18
    好棒ㄉ分享...但是我好累...要花好長ㄉ時間去看
  • 龍ㄟ
    #19
    龍ㄟ 2010-12-04 01:59
    ☆星辰☆: 我以前也是笨笨ㄉ...一直不知道這軟體這樣好用..
    後來..在一年以前因為社團徽章圖...才認真研究...現在我終於能分享大家...因為我弄懂ㄌ...也寫出很多圖
    很用心謝謝你 認真教學唷
  • ☆星辰☆
    #20
    ☆星辰☆ 2010-12-04 06:01
    超級美美: 好棒ㄉ分享...但是我好累...要花好長ㄉ時間去看
    最底下有影片解說...那是速成法歐
  • ☆星辰☆
    #21
    ☆星辰☆ 2010-12-05 00:09
    紙心: 學製作動畫嗎   電腦對我很陌生ㄝ
    你可以選擇不製作阿.但是也可以選擇試驗學做做看阿...
    若想學有疑問我可以幫忙ㄉ話會盡量幫大家ㄉ
你還不是該群組正式成員,不能參與討論。 現在就加入