tree04.gif

某位噗友出了 "只要一片落葉緩緩落下" 的動畫題目給我..當場我的腦袋就開始秀逗..喃喃地回答 "如果用flash..偶就知道怎麼弄呀.. gif動圖呀..完全沒個頭緒XD"..這就是自學者好玩的地方..困難的反而會做哩..傷腦筋啦..

 

 

安妮是五月搬來痞客時..發現系統對gif動圖很友善..才開始玩這種動圖..再加上我沒有繪圖板..所以也自學用滑鼠來解決CG..所以也花了相當精神..終於皇天不負苦心人..可以和大家分享一下簡易的動圖製作方式

 

首先..要先畫出動畫的每一張圖 (如下面) ..圖和圖之間的變化愈精細..動圖看起來愈生動..但就會畫出很多很多張圖....如此檔案就會變得很大..例如下方畫12張彩色圖..完成動畫檔案約270K..如果您有使用外連到其它地方(如funP..facebook等)..系統外連量很容易就會超出..至使外連圖全部消失..所以..如果檔案弄得太大..就會非常不方便..必須考慮把動圖存到其它大空間去..

 

如果您使用手繪圖..建議圖的長寬比是方便拍照的4:3....當然用掃描的方式也可以啦..拍照要用腳架固定拍..不然做出來動圖畫面會跳動..不穩定的怪怪圖..這都是經驗之談啦..

 

 

         1                     2                      3                      4

01.jpg 02.jpg 03.jpg 04.jpg

         5                     6                      7                      8

05.jpg 06.jpg 07.jpg 08.jpg

         9                     10                   11                    12

09.jpg 10.jpg 11.jpg 12.jpg

 

 

安妮推薦這款線上網站..不用下載軟體佔用您的電腦空間..對初學者也較易入門..<按我入gifmake>

步驟一: 上傳所有圖

gifmake01.JPG


步驟二: 設定動圖的長寬..要記得要按"GenerateGif"鈕..才會產生動圖

gifmake02.JPG

 

步驟三: 如果動圖大小不滿意..可到步驟二處更改長寬設定..再按"產生"一次

如果速度不滿意..可到步驟一處..要變速度的圖上方改動40的數字..再"產生"

gifmake03.JPG

 

電腦這東西..就是要"自己"多多嘗試做..就會從做中領悟要領..所以能夠的話..請先試試看自己解決..況且用文字發問..常常會聽得霧煞煞..不知如何回答.....當然有高人或許有更佳的gif方法..也請不吝分享提點..最後..米那桑..Good Luck!!

 

06.gif

 

<按我看第一位學會的好小孩: 豬頭家族 >

< 按我看第二位學會的好小孩:  Grace  >

<按我看第三位學會的好小孩:看圖說故事>

 

 

logo0418.gif

如果認同文章,請按留言框右上角的"推",謝謝您

感謝您的閱讀與欣賞  安妮姐姐祝您事事順心  08a43d50691a1ed22706fc92f568fa07.gif.jpeg

回應暫且強制為悄悄話,回覆後會開放!!

 

傻呼呼的安霓 發表在 痞客邦 PIXNET 留言(57) 人氣()


留言列表 (57)

發表留言
  • iegoffice
  • 呵呵!想當然要作動畫都要用gif才行,沒想到現在的人反而不會作了!^^"

  • 是說..我沒力氣啦..不然也照樣做一個flash對照
    個人意見..flash比較可以細緻擬真!!..純屬個人意見..

    傻呼呼的安霓 於 2009/11/29 20:05 回覆

  • lsc649
  • 好玩...

  • 祝你也製作成功喔
    不要急..有空試試看..終於會成功的..

    傻呼呼的安霓 於 2009/11/29 20:03 回覆

  • wei0304
  • 我....我....我...
    我看你畫就好
    ^^

  • 很簡單滴
    素素看嘛!!

    傻呼呼的安霓 於 2009/11/29 21:05 回覆

  • 小笠
  • 筆記一下

  • 少來啦..好假
    你早就會啦..

    傻呼呼的安霓 於 2009/11/29 21:08 回覆

  • lsc649
  • 哈哈哈我做成了動態圖了ㄟ
    我用照片用成功囉
    真好玩

  • 做好的圖放到你的格子裏去
    我連結你文章..你也連結我文章


    傻呼呼的安霓 於 2009/11/29 21:07 回覆

  • lsc649
  • 只是傳到部落格不會動ㄟ
    哈哈哈..........在努力試試喔

  • 你在相簿看..是不會動
    把它放入文章中看看..應該會動喔

    傻呼呼的安霓 於 2009/11/29 21:12 回覆

  • lsc649
  • 會動了..你來看
    我放在第一篇文
    成功.............

  • 我這邊看是成功的..會動喔
    你有做更好的再加進來..或取代都可以啦
    要有信心喔...做得很好!!


    傻呼呼的安霓 於 2009/11/29 21:37 回覆

  • lsc649
  • 動了 一下又不動了


  • 我猜你又傳了一張圖取代了動圖
    你再傳新圖時..要注意編輯會閃的小直線在哪裏??
    如果在舊圖上..那新圖會取代舊圖位置喔..
    等等你再度成功..我自動會連你!!

    傻呼呼的安霓 於 2009/11/29 21:43 回覆

  • calai
  • 太好了~~!!!
    我又有新玩意可以玩啦~
    謝謝安妮姐姐~~
    趕緊來作GIF~!!!!!

  • 對呀~~
    這樣狸家族圖畫會更生動啦!!
    加油!!

    傻呼呼的安霓 於 2009/11/29 21:38 回覆

  • lsc649
  • 我好了.這次一直動
    哈哈哈

  • 圖慢一點的方法:
    你要去改步驟一的"40"處..改成 80或100 ...(每張圖都要改喔)
    最下方的GenerateGif..再產生一次動圖..你就會發現圖比較慢了

    還有步驟二..Animation Loop 要設為"0" 喔..不然循還幾次後會停..
    如果改過Loop要再按一次Generae Gif喔..再產生新的動畫存檔


    傻呼呼的安霓 於 2009/11/30 08:35 回覆

  • babylung
  • 嗯~
    有空可以來去玩玩唷~

  • 很簡單滴~~您一定會成功
    像豬頭媽直接用照片..也很好看!!


    傻呼呼的安霓 於 2009/11/30 08:15 回覆

  • lai19831208
  • 好棒的 文章分享!打包帶走嚕^^

  • 謝謝您來
    祝您製作動畫成功!!

    傻呼呼的安霓 於 2009/11/30 15:11 回覆

  • Ava011369
  • 好像很有趣,不過依我的資質學得起來嗎?
    (完全沒碰過動畫的人)

  • 沒問題的啦..只要耐心把步驟看清楚
    也可以選幾張美美照片..照3步驟去做
    試試看..慢慢來喔..加油!!

    傻呼呼的安霓 於 2009/11/30 13:18 回覆

  • kikiloser
  • 謝謝分享!~
    改天我也來用用看~
    只是我老公說我格子太多動畫跑不動><

  • 太多flash動畫是會跑不動
    音樂和部落格廣告是主因
    gif 動畫一點影響都沒有喔
    請放心...

    傻呼呼的安霓 於 2009/11/30 14:10 回覆

  • dale1128
  • 安妮真的很厲害,我這笨笨的頭腦就不行囉~(搖頭)

  • 您放心啦~~美女一定可以的啦
    豬頭媽都做好了..所以不難呀!!

    傻呼呼的安霓 於 2009/11/30 14:11 回覆

  • changcn23
  • YA~ I DO IT !
    好開心哦!
    謝謝安妮的教學分享

  • 恭喜你..小寶貝的照片好可愛
    安妮文末幫您做了連結了喔!!

    痞客留言驗證碼暫時壞了..所以妳家暫時不能留言!!

    傻呼呼的安霓 於 2009/11/30 15:29 回覆

  • 繪
  • 拜~~~~
    做起來很辛苦的感覺.
    人家是小懶猴 XD

  • 素ㄏㄡ
    素你生意做太大啦..
    沒空玩啦..

    傻呼呼的安霓 於 2009/11/30 18:39 回覆

  • happyintime
  • 不賴耶 教學文喔 讚啦
    狠狠的推一下

  • 呵呵呵..自己以為是"教學文"
    其實..想一想..算心得分享吧??
    謝謝您喔...


    傻呼呼的安霓 於 2009/12/01 07:14 回覆

  • midogcat
  • 好厲害~

    做動畫真的要很有耐心~^^

    安妮很厲害呢^^

  • 我對靜圖比較沒耐心呢
    喜歡動來動去是天性吧??

    傻呼呼的安霓 於 2009/12/01 07:12 回覆

  • 悄悄話
  • proync

  • 你太厲害了
    我能打字就很不錯了
    還學這個呀

  • 嗯!!..不難呀...您是太忙囉
    有空時可以試試呀...


    傻呼呼的安霓 於 2009/12/01 07:09 回覆

  • Niota
  • 嗯!加油加油,台灣皮克斯!

  • 哇哈哈哈
    我可能到進棺材
    也沒皮克斯的百分之一!!XD


    傻呼呼的安霓 於 2009/12/01 16:27 回覆

  • sandy0661
  • 好棒喔~讓部落多了一些生動畫面~

  • 是呀!!
    希望大家都能有更生動的圖
    ^0^


    傻呼呼的安霓 於 2009/12/01 16:18 回覆

  • moriposamomo
  • 真強,好有耐心喔,真是厲害。
    感謝分享喔^^

  • 你的畫如果動起來
    一定很可愛!!

    傻呼呼的安霓 於 2009/12/01 16:17 回覆

  • 大鐵
  • 很棒的教學文呀~~~
    gif 動畫我也沒有做過呢 ^^"

  • 這下鐵爸就可以做
    可愛的小鐵動畫啦
    期待~~

    傻呼呼的安霓 於 2009/12/01 16:16 回覆

  • 頑兔
  • 原來還有這個可以用呀,
    改天來試試看~~

  • paiinter畫好再加gif..就..
    無敵啦..美少女...

    傻呼呼的安霓 於 2009/12/01 16:15 回覆

  • happygo876
  • 安妮姐姐,看到妳的教學文,我也跟著學做看看,它會動了,滿開心的
    想請問1.可不可以設定第一張照片停留的時間較長,不要全體照片都一樣?
    2.我有去觀看第二個學會的baby,她做成4格照片的呈現方式要怎麼做?
    請安妮姐姐指導我一番!謝謝!

  • 媽咪好棒喔..是的..每一張照片都可以設不同停留時間
    步驟一中紫色圓圈有40..把它改為80的話..就停留一倍時間
    每一張圖都去改成你要的數字..數字愈大..停留時間愈久..
    如果你有改動過設定後..要記得到步驟三去再按一次 GenerateGif..
    再產生一個新動圖存檔

    4張照片作成一張照片..要用軟體先處理過..我不清楚那位媽咪用什麼軟體??
    因為許多軟體都很像..很類似..建議你..不妨去請教她看看..

    做好你的理想動圖後..要記得放上格子..大家欣賞喔..

    傻呼呼的安霓 於 2009/12/01 18:22 回覆

  • sulitea
  • 粉厲害喔(豎起大拇指)

  • 呵呵呵!!
    大姐不要笑我啦..我這是野人獻曝!!

    傻呼呼的安霓 於 2009/12/01 18:23 回覆

  • miao632
  • 學妹真的超厲害,不愧是讀圖的,偶只會讀字,對這個沒輒,
    前途一片看好~~

  • 跟據某資料顯示: 文字格和圖格數量比例是 6:1
    所以愛好文字者..比愛讀圖者..多的多啦...
    學姐..文字工作者才是前途看好咧...

    傻呼呼的安霓 於 2009/12/02 16:30 回覆

  • 玥藍
  • 真的太實用了啦!!!!!
    謝謝安妮大大精闢的教學文
    要學這種都不知道要去喇裡學呢!!!
    有時間再來好好研究!!!
    愛死妳了XD""

  • 好吧~~
    給你愛呀..>///<


    傻呼呼的安霓 於 2009/12/03 07:38 回覆

  • blackgigi16
  • 以前學校有教
    不過我覺得很費工捏
    還是欣賞別人的就好

  • 呵呵~~是呀
    超花時間的呢!!

    傻呼呼的安霓 於 2009/12/06 18:26 回覆

  • janby0708
  • 好辛苦哦!...好像用flash去做比較快....

  • 用自己熟悉的軟體就可以啦
    flash可以做得很細緻..但會使網頁跑很慢?
    所以..我兩種看情形交替使用

    傻呼呼的安霓 於 2009/12/07 20:37 回覆

  • 公車青年CYC
  • 我覺得如果那幾條表示「風」的曲線,
    也能讓它動的話就更好了,
    因為光是兩個葉子動(一個在樹上動、一個掉下),
    風卻固定著在那裡,
    稍顯不合常情。

    我說的葉動、風動,
    是用Imageready也可以做到的,
    不妨試試看。

  • 感謝高人來指點..一下子就被發現我用Adobe繪圖..不過沒有用Imageready..哈哈
    風動的問題..我在12張圖完成後有發現..
    但因我有自我要求完成每篇文章不得超過一定的時間(每周發4文是很累的工作)
    所以就沒有去修改圖..而且重點在gif的製作..所以就留下這一個暇疵..
    不過..我介紹gif網站適合初學者上手..但安妮使用別的軟體啦..下次我一定用Imageready..哈哈
    歡迎您有空常來交流喔!!

    傻呼呼的安霓 於 2009/12/14 12:05 回覆

  • automemory
  • 好用 謝謝^^
  • 感謝來訪!!

    傻呼呼的安霓 於 2010/01/05 18:10 回覆

  • ag6699
  • 我也學會囉~
    謝謝安妮姊姊...
  • 呵..如果有做出成品..請告知一下
    或許可以做個連結!!

    傻呼呼的安霓 於 2010/05/13 19:02 回覆

  • 冷曉淨
  • 我學會了~謝謝分享~
    又學到一項了~
    高興~灑花
  • 不客氣..很容易的..對不對??
    有空歡迎常來逛逛!!

    傻呼呼的安霓 於 2010/05/19 16:21 回覆

  • puck
  • 我也剛開始自己一步一步摸索動畫耶~
    是很辛苦不過完成後很有成就感!
  • 大家一起加由啦!!

    傻呼呼的安霓 於 2010/08/20 20:10 回覆

  • puck
  • 恩~那我就加你好友囉!
  • 3Q--^0^

    傻呼呼的安霓 於 2010/08/21 12:23 回覆

  • mandyhuang
  • 安妮姐姐還記得我們家嗎??
    我成功了耶!!
    我真得成功了耶~而且是一次就成功了哦!!!
    這是妳的解說相當明確才能讓我一次就ok了!!
    謝謝妳!!
    有空請來我家看看我做的"推我嘛~"這個動畫哦~
    謝謝!!
  • 看見囉~~很可愛哩
    恭喜你!!

    傻呼呼的安霓 於 2011/05/09 11:13 回覆

  • alin
  • 這是什麼時候的教學文
    很詭異哦....
    畫動畫
    可真的要有耐心和想像力
    我欣賞就好了~
  • 謝謝!!^^

    傻呼呼的安霓 於 2011/05/12 20:58 回覆

  • Invisible
  • 哈哈......我之前都只是用Photoshop中的Imageready去弄gif動畫圖:P
    不過說真的,若沒有提供教學,我想我學這類動畫圖應該不大容易上手~
  • 因為不是每個人都有Photoshop
    所以~~我才教這個比較簡易的方法!!

    Photoshop中的Imageready~~我也常用!!

    傻呼呼的安霓 於 2011/05/14 23:26 回覆

  • Invisible
  • 笑~~~~
    題外話:剛才學安妮姐姐一樣玩google翻譯將我整個部落格翻譯成日文,發覺有些句子給翻譯得很爆笑XD

    p.s. 我又放了新文章囉XD:
    http://jesskagura.pixnet.net/blog/post/30810422
  • 那個日語網頁翻譯是用來笑的
    不過我久久看一次~~也發現它略有進步!!
    沒魚蝦也好~~呵

    傻呼呼的安霓 於 2011/05/15 22:56 回覆

  • Dio
  • 嗯 ,不錯啊~
    雲端技術真是方便又綠化~
    直接上網使用工具創作~
    ^^
  • 對呀~~我幻想十年後
    沒有人鳥Adobe!!

    傻呼呼的安霓 於 2011/05/15 22:52 回覆

  • 風小王
  • 阿季又來大方了
    我們檢現成
    檢得真高興

    不過當一片樹葉落下
    這個大哉問
    好適合去問立志成仙做佛的人呦
  • 我已入木............

    傻呼呼的安霓 於 2011/05/15 22:50 回覆

  • 欣悅
  • 為蛇麼上傳所有圖片 怎麼只能傳一張?
    步驟2沒看到長寬欄位ㄝ
  • 選第一張圖~~upload~~會出現在下方
    再選第二張圖~~再upload~~會出現在上一張圖下方
    以此類推

    步驟二的2處點下去~~長寬設定欄會自動跳出來在下一行
    沒有點就不會出現喔~~祝gif動圖製作成功愉快!!

    傻呼呼的安霓 於 2011/05/19 12:07 回覆

  • 唯藍moriposamomo
  • 落葉飄下的季節,既惆悵又莫名的美,尤其是春天來臨前,沒葉子的樹,真的好有國外風景的感覺。
  • 這就好像是美人遲暮囉??

    傻呼呼的安霓 於 2011/05/19 20:16 回覆

  • 恩爸比
  • 我有看到我留言耶 好久遠啊 :D
  • 哈哈~~來囉來囉~~燒的來囉!!
    發新燒文囉~~保證全新文~~不好看退錢囉!!

    傻呼呼的安霓 於 2011/05/19 20:44 回覆

  • Sophia
  • 很有趣, 我也來試試看
  • 祝 成功~~加油!!

    傻呼呼的安霓 於 2011/05/23 22:21 回覆

  • Sophia
  • 我先用photoshop imageready試做簡單的動畫,但如何插入文章呢? 用一般照片上傳的方式,動畫變成照片,沒有動畫,可以教導一下嗎,
    也加我為你的好友吧
  • 喔~~妳在後台看GIF是一般靜態照片
    但轉到前台發表或預覽時~~就是動畫喔!!

    傻呼呼的安霓 於 2011/05/24 20:29 回覆

  • Sophia
  • 如何加你為好友? 你的部落格裡沒有加入好友欄可以點選....
  • 對呀~~我也發現囉!!~~醬子好了~~我先加妳
    妳在後台管理/好友互動~~接到通知後~~加我或訂閱我!!

    傻呼呼的安霓 於 2011/05/24 20:26 回覆

  • 月兒小魚
  • 為什麼我放了gif檔在相簿後.
    再插入圖片放在部落格里都不會動嘞?
  • 如果你在後台看~~是不會動滴
    但發布後~~在前台是ok滴
    或是你用"預覽文章"看~~也是ok

    傻呼呼的安霓 於 2011/12/24 22:07 回覆

  • 悄悄話
  • 悄悄話
  • 悄悄話