lyou wrote:
這次有兩個主題分享....(恕刪)
豹紋小孩好可愛的說
背景也是粉嫩粉嫩的
我喜歡這個
只是
怎麼覺得小孩躺的姿勢有點怪怪的
感覺好像頭扭到了說
放在下面臉朝左的那張更明顯的說....
(哈....還是我想太多...
)
個人積分：44分
文章編號：1740663
個人積分：2669分
文章編號：1740702
個人積分：44分
文章編號：1740703
個人積分：2669分
文章編號：1741326
用來製作的這張圖片,是我在找一堆向量圖時無意中發現的,第一眼看上去很"乾淨/清楚",直覺要挖圖變化會很容易,於是就直接動手做起來.
雖然一開始就有做動畫的打算,不過還是先把其他的頁面做完再說,於是就東挖西挖,幾乎把原作上能利用的物件全徒手硬挖下來組合desktop~misc.
在這過程中唯一遇到的麻煩是,為了兼顧上面的水波和下面的水草,所以要把圖的中間截掉一段再黏起來....不過由於原作的藍色漸層打的蠻細蠻均的,以致接起來時中間會有一條明顯的線,所以第一次修圖,是硬用"畫筆"手繪彌補,不過主題初步做好後放上手機一看,會看得出手繪顏色不均的地方....所以最後只好用一點偷吃步修補(譬如貼個東西擋一下啦,或是直接把底部的深色水草單獨挖出來再貼上等等)
==> 
至於standby動畫原本的腹案,切圖就真的只是切上面貼出的那張靜態圖而己.第一版的動畫初步做出來是這樣子滴... 不用放上手機測也知道很怪對不對....
老實說,最早我的偷懶想法真的是只想讓兩隻魚兄魚弟平移游一下就好了.....
結果,自己都看不下去了,就想要不要先把鯊老大請走咧...要不要把海膽怪移個位咧....幾經思考,乾脆放棄原作中的構圖主體,自己找個空白的地方另起爐灶!! 於是,就決定把花過一點工夫修過的desktop拿來當畫布囉.
"畫布"中第一個決定的決定性物件是潛水艙.這潛水艙正是中途讓我傻眼的物件之一.一開始只想簡單的做,於是把潛水艙挖出來重新調整組合,並把這部分的重點放在會四處轉動的眼睛上.
==> 
接下來,就是做魚兄魚弟....因為已做過一次了嘛,所以這次就駕輕就熟,只不過是把路線稍微調整了一下.不過後來在總調整時,把游動的曲線又順過一次,並且不規則的挑出一些單格做變形和旋轉,使之不會太單調制式化,而且紅魚在後排回游時顏色打暗做出前後層次感.
原本,這個gif做到這裡已經差不多了,本來想再加一個海膽怪就可以結束了,不料在構思海膽怪要怎麼加的時候,我突然傻眼了....如果潛水艙在海水裡完全不動,不是很奇怪嗎....瘋了...我快要瘋了....於是重新做潛水艙....................
原本是不想讓潛水艙動的,所以上面的管子就直筒筒挖一根;現在要讓它浮動了,所以一根管子以水波為界挖三段,再配合艙身的位置組合成三種不同的位置,然後分解又分解,組合再組合..... 最後變成,紅魚游過去時,讓潛水艙彈一下,就是醬子:
接下來做海膽怪.先後做了兩個版本,第一版,讓海膽怪停留在海底"浮潛".效果大致是醬子:
不過做完這個抽筋的海膽怪後,覺得效果不是很好.....於是又改成往上漂浮,然後在漂浮路線上,用變形/旋轉/扭曲工具讓海膽怪的手腳"動一動",以致看起來不太呆板.
做到這裡,我家的adsl修好了,可以上網了....本想到此收尾做一結束,不過放上手機一看,覺得上面那個水波不動,真的很奇怪.....原作上的這種的水波,要怎麼讓它動咧...於是,再度又再度傻眼.....
不知是不是做到快瘋了,就會有一些怪怪的靈感....
再度祭出變形/扭曲工具:
再把做出的幾張圖貼入適當的畫格中,調整一下,讓它形成"波動"的感覺.當然,要做非常自然的水波我覺得真的太困難了,現在我的能力只能"意思意思"一下.... T_T 最後最後的修正,就是下面的這張: (自己給自己鼓掌... T_T )
雖然我已經盡力了,不過有不好的地方,自己還是要坦白承認.
光就這個GIF來看,大家有沒有注意到"氣泡"的問題呢?
如之前說過的,原作的漸層打的很細,硬要手繪修到完全看不出來的地步,我覺得太累也很難.而且原作的氣泡做的非常之誇張....於是我就阿Q地想:那會不會是某種迷你水母或特殊的浮游生物而不是氣泡呢? (那就不用修囉!萬歲!!萬歲!!!! :-P )
不管怎樣,最後我放上W800去看時,那些氣泡並不明顯,有些也已被系統字遮到了(別的機型怎樣我就不知了)....而且當水波浮動時它們也會跟著略動一下,在勉強又勉強再勉強的情狀下,醬就可以了啦~
另外,藍魚的位置略嫌低了點,幾乎是在SOFTKEY的邊線上游動...呃...那就把它當動態SOFTKEY好了....
不然,再高一點,又會碰到時間日期...再高一點,又會很怪....
SO,這個GIF製作的步驟大致就是醬子,是以幾大物件(組)為主,一層一層變化後加入的.
另外,因為這GIF有點複雜,所以在把畫格組合成GIF時我用了略異於我往常作法的技巧,直接在UGA中修改圖層<--這是一個非常有效且好用的做法,值得推薦! 因為寫起來有點多,所以詳細的作法範例會在下一封帖子中說明.
(再待續....)
技巧補充請見:
http://blog.xuite.net/gracie.liu/SEThemes/11541034
～ 臨.兵.鬥.者.皆.陣.列.前.行 ～
個人積分：0分
文章編號：1742107
個人積分：2669分
文章編號：1744299
我最喜歡的日本推理作家之一"綾十行人",他之前曾中途腰斬的"館系列"又復活了!!!!
這位幾乎可用天才形容的先生,在以所謂的本格派館系列展露頭角之初,曾發下豪語,要寫齊十個殺人館故事(於是我也一集一集乖乖跟著買),然後多年前的某一天,先生他突然宣布不要再寫館系列了,接著就是一堆有跟沒有的或變態噁心致極的耳語系列啦、殺人鬼系列啦、殺人方程式系列啦.....哇哩咧真是晴天霹靂啊 &$@&%#@(.....
太好了,現在綾十行人又再度成為我心目中top5的本格派推理大師囉!!!! 齁齁齁!!!
====
好了,言歸正傳,現在回來聊uga的主題製作.
稍早我原本寫了一大堆,不過無論哪個例子都覺得無法非常詳細又有效率的在網頁上從零開始step by step的寫(因為我不能確定看這帖子的網友到底有多少修圖基礎,是否連photo impact的基本用法都不熟悉.....) 這真是比做主題還難啊....
anyway,我還是附上練習用的圖檔以較簡單的方法來寫吧...如果有不清楚的地方大家再補充討論好了~[行前基礎,不知不可]
1.要做稍微有點難度的東西,你必須先會做透明底色的物件圖檔.
如果不會的人請善用站內搜尋功能,參考一下本板前輩曾寫過的一堆透明bar教學文
(不過以下我會先提供已經做好的練習檔,所以還不會的人不用擔心) :)
2.要習慣用photo impact或gif animator工具面板中的圖層管理員
圖1-upi的圖層管理員
圖2-uga的圖層管理員(較陽春但依然好用)
你可以利用圖層管理員在預定的"畫布"中把小圖一個個的加入,予以組合.
但要記住,在下面的圖層會被上面的圖層覆蓋住,所以,如果你要做「一個女孩子站在商店前面」這樣的圖,那麼你就要把女孩子的圖層用滑鼠拖曳的方式移到商店圖層的上面.
[快速上手練習]
現在請先在upi中開啟一個透明底色的新圖檔(圖3)
圖3-在此範例中我們是做176x220的動態gif.當然你也可以指定其他的尺寸
接下來載入練習圖檔壓縮包中的[紅魚.png]
(當然,你也可以用你自己做的物件圖檔)
附加壓縮檔: 練習圖檔
在upi中你會看到大致如下的畫面:
圖4-複製紅魚圖層
接下來切到空白的新圖檔中,把複製的紅魚貼進去.
圖5-在剛剛新開的透明底色圖檔中貼入紅魚圖層.因為等一下我們要做紅魚游動的動畫,所以請多貼幾次,先貼個5隻好了. ^_^
現在,一隻隻改變魚的位置,規畫出魚游動的路線.
位置拉開後,就可以清楚看到魚的相對位置.
圖6-特別要注意圖層上下層的相關位置及順序,以免紅魚變成"跳躍式"游動... ^^"
看一下紅魚游動的位置,大致調好了後,請先養成一個好習慣,以UFO格式把這有多個圖層的圖檔先存一下.UFO格式會把所有圖層全存在一個檔案裡,當成備份檔蠻好用的.而接下來要做的,就是進一步把每一圖層分別存成gif的畫格.請仔細注意下圖中圖層管理員的操作:
圖7-利用"眼睛"來控制圖層顯示
圖8-把圖層存成畫格圖檔
接下來依法泡製,把每一個單獨的紅魚圖層都一一儲存起來.再做一次給你看.
圖9-用同樣的方法,儲存每隻魚不同位置的畫格.有點麻煩,對吧?不過,製作動畫本來就是這樣,不然你就不要做動態,弄靜態的就好了. ^_^ 所幸,在某些情況下,可以用繪圖軟體本身的動畫工具來產生一些畫格,但那些進階技巧,這裡就先不討論了.
so,現在我個有5個畫格的紅魚了.接下來要把它們載入uga中.
執行uga,直接從檔案管理員裡把剛剛存好的5個畫格圖檔拖進來.如果之前你有乖乖依畫格序給檔名編號的話,拖進來的圖檔也會依序載入.
圖10-把做好的透明底色紅魚畫格載入UGA中.
接下來你可以按下面的[>]或上面的[預覽]標籤,去看這5隻紅魚移動的效果,然後再修改秒差,或是調整紅魚的位置.不過,如果不是很複雜的修圖,譬如這裡的紅魚可能只是要移移位置什麼的,直接在UGA中修改就以了.
圖11-檢視一下每一畫格及其相對圖層
OK,當你把紅魚游動的動作調好了,下一步就是為它加入背景.
請把上面練習圖檔壓縮包中的[海水.PNG]直接拖到UGA下部的畫格區中.
拖進去後插在哪一格的位置都沒關係,請你直接按[X]刪掉它. :-P
不過,再去檢查一下圖層列表,[海水]已被載入當成畫格圖層了,它會保留在圖層列表中,並不會隨畫格的刪除而自動一併刪除.SO,現在最新的狀況是,我們有５個紅魚畫格和６個圖層.
圖12-為動畫載入背景圖層
咦....我們已經載入了海水背景圖,怎麼我的紅魚還在太空中游泳咧....
別急別急,還沒完... ^^"
圖層的基本概念是:上面的圖層會覆蓋下面的圖層,對吧? 所以囉,請你用滑鼠把海水圖層拖到所有的圖層的最下面....還沒完,接下來選取第一畫格,勾選海水圖層旁邊的"眼睛".了解了嗎?先別嫌煩,請一格一格的為你的畫格加上海水圖層. ^_^
圖13-正確地為畫格組合背景圖層
全弄好之後,按[>]或[預覽]看一下效果吧. ^_^
如果一切OK就可以存檔了.建議你UGA格式和GIF格式各存一個.存UGA格式的話會保留目前各圖層和畫格的資料以便日後做更進一步的編修,而存成GIF的話則會因GIF的特性而降色成256色並且也會把某些圖層合併在一起,不過卻能讓你用於主題製作或放在手機/網頁上觀看.
這種在UGA中進行後段編輯並存成UGA格式的做法,日後若要再加入/變更動態物或改變背景都蠻方便的.
圖14-這是成果
圖15-換個[海底總動員]的背景試試
[進階練習]
OK,剛剛只做了5格對吧,現在我們要玩比較複雜的.請下載我已經弄好現成的紅藍魚及海膽君的畫格來做進一步的動畫組合練習.
附加壓縮檔: 進階練習圖檔
現在,請重新執行UGA.(如果你還沒關掉它的話,就請開一個176X220的新檔案吧)
首先把進階練習圖檔壓縮包中的所有紅魚檔案全拖到UGA中,看一下紅魚是怎麼游的.
接下來,點選最後一個畫格(也就是第28格),然後把練習用的12張海膽怪圖檔全部拖進UGA畫格區.
圖16-你可以看到,海膽怪被插到選取畫格的後面.
接下來,一樣,把12張海膽怪畫格全刪了.因為我們不是要海膽怪跟在紅魚後面做動作,而是要在紅魚游動的過程中動作.(看一下圖層列表,載入的海膽怪圖層並未不見.)
圖17-適當編修圖層註解,在做很複雜的動畫時就比較不會被上百個圖層搞混 :)
現在,在你的UGA中應該有紅魚28格圖層,海膽怪12圖層.假設我們要讓海膽怪從第8畫格開始出現,那麼就選取第8畫格,然後從圖層列表中勾選第一張海膽怪圖層旁邊的眼睛.
(第8畫格加海膽怪1,第9畫格加海膽怪2,第10畫格加海膽怪3.....不要搞錯了)
圖17-這時你會發現,簡單改過圖層註解的話,增入新圖層物件時就比較不會搞混 :)
把第8格到第19格都依序加入海膽怪圖層後,預覽一下成果.
圖18-海膽怪和紅魚的組合
你也可以做一些變化,譬如要讓海膽怪游慢一點的話,指定圖層時就是:
第8-9格都加海膽怪1,第10-11格都加海膽怪2,依序類推
圖19-在這裡是讓海膽怪游的較慢.如果是紅魚游的較慢的話,就要增加紅魚的畫格,比方說把0.1秒的第8格拆成0.05秒的2格去對應海膽怪1和海膽怪2.諸如此類.這並不是很難,自己試一試就能抓到訣竅了. :)
最後再加入海水背景.
圖20-紅魚加海膽怪做好囉~ 你可以再做一下秒差或其他微調讓它跑得更順更自然.
你可以再加入藍魚或第二隻紅魚做個簡易魚缸試試看.
不過,做這種動畫時,先載入畫格數最多的物件,然後再加入格數少的物件,調整起來比較方便.
好了,我抓圖打字已經弄了好幾小時了.去吃個晚飯先,其他人就自己先練習練習吧.
等晚點,我再用這種做法示範另一個動畫的製作.
(繼續待續.....)
技巧補充請見:
http://blog.xuite.net/gracie.liu/SEThemes/11557383
BTW,還有更多我寫的有用的文章整理在本串1樓的[廣播台]~
～ 臨.兵.鬥.者.皆.陣.列.前.行 ～
個人積分：44分
文章編號：1744853
)
個人積分：2669分
文章編號：1745216
個人積分：17818分
文章編號：1745240
個人積分：2669分
文章編號：1745282
現在我們一邊要來驗收一下學習成果,一邊要學另一個小技巧.
在第二個動畫範例中,我們要直接借用A大近期的大作[台客]主題中的物件來做練習.
http://www.mobile01.com/topicdetail.php?f=127&t=87633&p=39
這是A大挖出來的主角物件,我們直接借用.不過我稍微旋轉了一下身體中心軸的問題,並做了踏左腳/踏右腳對稱的一組圖.(在下面的壓縮包裡有附這個圖檔)
圖1-修圖不難,只是要花點巧思和時間.你也可以到A大的討論串去抓原圖來練習修圖.
圖2-接下來我們要做的是,用右邊這張背景圖,讓台客放洋走在風車小徑上.
用前面教過的方法,開一個透明底色的新圖檔,然後把台客左腳/右腳的圖層貼進來.
小徑很短,大概左腳-右腳-左腳-右腳共貼4張就夠了.
圖3-用目測大概估算一下,台客走在小徑上從近到遠的縮小比例,直接在圖層管理員上改寬(Ｗ)高(Ｈ)即可.不然你到物件內容對話框裡去改也可以.
圖4-把風車小徑背景貼入,拉到圖層最底層,以便調整台客所走的路線.
處理好之後,照前面帖子講過的方法,把圖層畫格一個個存下來.(在此例中,是背景圖1張,人物4張)
圖5-把剛剛做好的背景和畫格全載入UGA中,先刪掉不要的畫格留下台客走路的4格,然後在所有畫格後面再新增一個空白畫格(這麼做的目的是讓動畫看起像台客愈走愈遠最後消失在小徑盡頭,而且LOOP起來的時候首尾銜接處也比較不會突兀.但圖層列表中仍是1背景及4台客共5個圖層.)
圖6-由於我們只做了四格的台客,想當然爾走在小徑上一定跳的很快很不自然,所以我們要在畫格與畫格之間再增加新的台客畫格,讓他的移動變自然一點.如果純手工一格一格用縮小比例的方法硬做出中間畫格當然是可以,不過我們沒那個美國時間搞這種東西.在畫格區下邊的工具行裡,有一個[漸變]工具,它的作用是幫你產生[圖A到圖B的中間畫格].這功能並非所有情況都完全適用,不過在台客走路上是蠻好用的. :)
選按[漸變]鈕,指定漸變模擬的起始/結束畫格,以及中間要插入幾畫格(在這裡我們是插入5格).
圖7-插入漸變畫格時,第1輪是在第1-2格中間插入5格,所以第2輪就要在第7-8格中間插入5格,第3輪是在第13-14格中間插入5格,第4輪是在第19-20格中間插入5格,不要搞錯了.
這插入漸變畫格的技巧你多用幾次就會很熟練了. :)
圖8-為每一畫格加入背景,再調整一下秒差.現在,台客之風車小徑動畫即將完成.
圖9-最後成果
SEE,並不很難就可以做出一個不錯的動畫了吧. ^_^
的確,做動畫並不難,在很多狀況下你甚至還可以直接用繪圖軟體中現成的動畫工具來做,所以說,做動畫的重點只在細不細心(或說有沒有耐心),以及更重要的:如何用巧思去營造動的效果<---後者,在A大的諸多主題作品中隨處可見.
最後,我們還要來比較一下,這樣做動畫有什麼好處.
通常,很多人都是直接在UPI中先把所有畫格都做好,然後再丟到UGA中,只做最後調整秒差的動作,即儲存成GIF檔.
以台客之風車小徑為例,這樣做的話,由於使用漸變工具時會產生一些透明效果,這就會造成最後的結果會有畫面閃動的情形出現.下面附上這兩種做法的.UGA檔,分別載入GIF ANIMATOR中一個畫格一個畫格的看,就能明顯看出差異所在.
附加壓縮檔: UPI貼圖法和UGA圖層法的比較
不是所有用繪圖軟體內建之動畫工具做出來東西都會這樣,但GIF ANIMATOR的漸變工具的確有這個特性.而畫面的閃動也不是什麼特別的缺點,在某些情形下也可說是一種特殊效果.
另一方面,台客之風車小徑用UPI貼圖法做出來的GIF是389K,而用UGA圖層法做出來的GIF卻只有27K.你沒看錯,真的是這樣.你也可以試做別的圖來比較一下.當GIF的FILE SIZE縮小後,直接且實際的影響就是,動畫跑起來更流暢以減少可能會LAG的機會,以及製作者能有更多的餘裕去構思畫格更多更細膩的動畫!![註]
寫到這裡,所有的UGA動畫製作示範全部結束.
希望以上寫的這些,對有興趣做動態GIF的人能有所幫助.
以上 ^_^
[註]雖然上面示範的兩個例子都是用uga圖層法做出來的,且第二例也具體比較了用圖層法做動畫的好處;不過當你實際做動態gif時,到底是直接貼圖貼圖再貼圖還是到uga中處理圖層比較方便順手,得視你選用的素材以及想到達到什麼樣的效果而定.況且,創意是不受限於方法的. :)
技巧補充請見:
http://blog.xuite.net/gracie.liu/SEThemes/11861291
～ 臨.兵.鬥.者.皆.陣.列.前.行 ～
