公告公告

2012有好多新希望,希望都可以一一實現,加油^^!!!

之前有答應過要做一篇"如何製作小動畫"來跟大家分享的...今天就來野人獻曝一下囉...
因為這只是用非常簡單的方式來製作簡單的小動畫...還稱不上是教學啦...總之希望可以對一些朋友有幫助囉^O^
準備的軟體只要PHOTOSHOP就行了...至於版本...應該六以上都可吧...因為我沒有用過六以下的版本啦:P



GIF小動畫製作的步驟如下(本篇以已會使用基本PHOTOSHOP功能者為主要分享對象,若有問題可以再問我喔):

1.開啟PHOTOSHOP,將你所要做的動畫圖片分層放入同一個檔案的不同圖層中,要做幾層,依照你所想要的動畫效果而定,例如,你想要紅色圓形與綠色圓形交錯出現的動畫,那你就要就要有綠色及紅色兩個圖層喔!
範例:
我這個例子是希望JIN*S出現一閃一閃完,再出現WEB一閃一閃的動畫效果,
所以我要準備四個圖層,分別為:「JIN*S-深色圖層」.「JIN*S-淺色圖層」.「WEB-深色圖層」.「WEB-淺色圖層」
利用同一個圖案...但一深一淺的顏色交換來做出一閃一閃的效果...如下圖:




2.做好各圖層後,先存成PSD檔,再按下紅色框框圈起來的地方,進入PHOTOSHOP內建的動畫軟體ImageReady!
範例:



3.進入ImageReady時,出現的畫面大致如下,會有跟剛剛那張PSD檔一樣的圖層Layers視窗,及動畫影格Animation視窗,若沒有,請到視窗Window工具列中找到後打勾。
範例:



4.在Animation視窗右上角有一個三角形,按右鍵 > 新增影格New Frame,看你需要幾個就先新增幾格。
範例:我只需要四個影格,所以我就新增四個。



5.在Animation視窗中的每一個影格上按一下,選取你要顯示的圖層。
範例:我這的動畫顯示的圖層順序為「第一格:JIN*S-淺色圖層」>「第二格:JIN*S-深色圖層」> 「第三格:WEB-淺色圖層」>「第四格:WEB-深色圖層」,依序調整每個影格所見的圖層。這裡我還希望每一個影個除了顯示字外都會顯示白色底圖,所以你可以看到我都是選取兩個圖層喔。



6.設定Animation中每一個影格所要顯示的秒數,設定完可按Animation視窗最下一排中的PLAY播放看看。
範例:若每個影個要一樣秒數,可以將影格全選再一起挑整秒數喔。



7.PLAY播放沒問題後,就是儲存啦,檔案File >  另存最佳化為Save Optimized As  >  打上檔名,檔案類型為gif....就OK囉。
範例完成品:




JIN這個簡單的分享...希望對想做小動畫的入門新人有所幫助...
當然太複雜的動畫JIN就不建議用這個軟體做了...

大家可以試試看囉!
下面附上JIN之前有發表過的GIF圖給各位參考唷:


上面這張這是用兩個圖層而已喔,一張是還沒被打到的圖,一張是被打到的圖,兩個影格重複播放的效果!



上面這張是用3個圖層,4個不同秒數的影格所重複播放的效果喔!


上面這張則是用17個圖層,17個不同秒數的影格所重複播放的效果喔!
不過後來我發現用FLASH做比較漂亮...呵呵:P







 

創作者介紹
JIN

JIN*s murmur

JIN 發表在 痞客邦 PIXNET 留言(11) 人氣()


留言列表 (11)

發表留言
  • monkey1910
  • 喔~~~<br />
    真好玩<br />
    馬上試用看看
  • ViaKuo
  • 我來偷師了<br />
    沒想到這麼EZ呀!!<br />
    之前還摸不清頭緒就放棄了<br />
    現在可以秀一手了<br />
    謝謝Jin的教學<br />
    <br />
    0213_Via
  • 湘湘
  • 妳真的好厲害喔~<br />
    我也很喜歡您設計的圖案~<br />
    很美~~~~~~
  • rice953658
  • 可是........我家沒有那個軟體阿>"<
  • 娃娃
  • 原來開了photoshop就可以做動畫啦?<br />
    呵呵!!娃今天才知道威~<br />
    真是謝謝JIN的分享呀!!<br />
    有空再來玩玩看~^^
  • deliagarden
  • 太棒了!對一直搞不清楚動畫功能的我,真是大有用處!<br />
    謝謝分享!待會就來試試!
  • jinnew
  • ★DEAR MONKEY:<br />
    對阿...好玩又簡單喔<br />
    希望可以趕快看到你的猴子小動畫喔^O^<br />
    ㄧㄧㄧㄧㄧㄧㄧㄧㄧㄧㄧㄧㄧㄧㄧㄧㄧㄧㄧㄧㄧㄧㄧ<br />
    ★DEAR VIA:<br />
    是阿...ImageReady真的是很簡單<br />
    小動畫我就都用這個做的<br />
    我也是上網找資料才發現有這麼好用的東西ㄝ<br />
    相信聰明的VIA一定可以馬上上手的啦^___^<br />
    ㄧㄧㄧㄧㄧㄧㄧㄧㄧㄧㄧㄧㄧㄧㄧㄧㄧㄧㄧㄧㄧㄧㄧ<br />
    ★DEAR 湘湘老師:<br />
    謝謝你的稱讚<br />
    不過我沒有那麼厲害啦<br />
    我只是把我會的拿出來跟大家分享交流囉^O^<br />
    ㄧㄧㄧㄧㄧㄧㄧㄧㄧㄧㄧㄧㄧㄧㄧㄧㄧㄧㄧㄧㄧㄧㄧ<br />
    ★DEAR rice953658:<br />
    ㄟ...<br />
    那你可能要先想辦法有這PHOTOSHOP才行玩囉^^"<br />
    ㄧㄧㄧㄧㄧㄧㄧㄧㄧㄧㄧㄧㄧㄧㄧㄧㄧㄧㄧㄧㄧㄧㄧ<br />
    ★DEAR 娃娃:<br />
    對阿...我也是無意中知道的<br />
    真的不錯玩喔<br />
    有空一定要試試喔^___^<br />
    ㄧㄧㄧㄧㄧㄧㄧㄧㄧㄧㄧㄧㄧㄧㄧㄧㄧㄧㄧㄧㄧㄧㄧ<br />
    ★DEAR deliagarden:<br />
    恩...這套軟體可以用很輕鬆的做很簡單的動畫<br />
    但太複雜的動畫可就要用FLASH比較好囉<br />
    總之如果本來就有PHOTOSHOP的軟體<br />
    那就拿來玩玩也不錯囉加油啦^O^<br />
  • 謝謝你的分享 <br />
    老實說 看了很多人的解說<br />
    只有你的版本我看的懂<br />
    太感謝你了
  • ELAINE
  • 真滴是太棒了!!<br />
    老闆出題目給我...<br />
    看了幾個解釋通通有看沒有懂>"<<br />
    不然就是沒有那種軟體!<br />
    有了PHOTOSHOP..就能玩出這樣東西<br />
    真滴是太棒了啊!!<br />
    感謝妳簡單清楚的說明!<br />
    我能把工作交出去囉^^
  • a508508
  • 我只能做再上面放一個圖片<br />
    <br />
    然後都沒有什麼圖層的東西<br />
    <br />
    動畫的按鍵也按不下去
  • fukada
  • 真是太神奇了<br />
    不過我做4個影格之後播放就停止了耶<br />
    不能一直像你一樣持續的播放嗎