學員:劉絢玉

 1688908407.jpg  

  
     這次,瞳格格想要分享的聯成密技是動態圖示的教學,大家也跟瞳格格一起來做自己的動態圖示。用的軟體是Adobe PhotoShop(CS3系列以上,當然現在最新版本是CS5。)話說,都CS5了還發這個會不會被圍毆,可是瞳格格真的覺得這個很好玩。那麼那麼,就進入正題囉!
首先,開一個新檔案,設300×300像素,72dpi即可。

 0920pic0001.jpg  

然後,稍微畫一下草圖想要做什麼動態圖示吧!這次瞳格格的主題是「撒嬌」,畫了之後,就可以開始畫正式圖了。(瞳格格直接修了修線就用了XDDD)

0920pic0002.jpg  

這次,主要分了四個連續動作,在畫連續動作時,一定要分圖層喔!!像瞳格格會,預計動態的第一格設名字1,第二格設名字2以此類推。(這種觀念就像,小時候在課本的角落畫走路跌倒的人,一頁畫一個那樣!)在畫第二格的時候,第一格也可以打開眼睛,把透明度調低,這樣到時候跑起來才會連戲喔!

0920pic0003.jpg  

瞳格格畫了4個圖層,分別長這樣(當然位置不是這樣XDDDDD位置一定一定要對好噢!畫完連續動作後,重頭戲就來啦在上面那排工具列上。0920pic0004.jpg  

找到【視窗】點開後,有一個【動畫】打勾後,會出現下面那一區塊的東西,不過這種太難懂了,找到「點我點我」那邊,點下去吧!

0920pic0005.jpg  

出現這麼一大串,請選擇【轉換為影格動畫】,影格就會變成以下的樣子!

0920pic0006.jpg  

介紹一下這一堆洋洋灑灑的工具:
圖層:就是一格要畫一個圖的圖層噢!眼睛就是打開關掉圖層的東西,這個待會很重要喔!
紅色圈圈:代表影格,有幾格就表示你的動畫用了幾格喔!(像瞳格格,會用最少7格,
因為,123432這樣接下去才會連續。
橘色底線:是表示一格停留了幾秒,瞳格格大部分都用0.2秒,不過這張最後用了0.3秒,三角形點下去就可以選秒數囉!!
藍色圈圈:表示你檢視這個動畫時,要讓他跑一次還是幾次還是一直跑噢!看個人習慣。
紫紅圈圈:播放的意思,如果想要看看自己做的動畫是否流暢就可以點來看看成果噢!!
綠色圈圈:跟圖層下面一樣的東西,可以新增及刪除影格,要加要減就靠他。

0920pic0007.jpg  

看完工具介紹,就要開始來把我們可愛的圖做成動畫囉!上面那張,瞳格格選了第一格,所以圖層的部分,瞳格格也將圖層1眼睛打開。

0920pic0008.jpg  

第二張,瞳格格選擇了第二格影格,圖層就選擇了圖層2打開眼睛,以此類推。
第三張,瞳格格選擇了第三格影格,圖層就選擇了圖層3打開眼睛。
第四張,瞳格格選擇了第四格影格,圖層就選擇了圖層4打開眼睛。
第五張,瞳格格選擇了第三格影格,圖層就選擇了圖層3打開眼睛。
第六張,瞳格格選擇了第四格影格,圖層就選擇了圖層4打開眼睛。
第七張,瞳格格選擇了第三格影格,圖層就選擇了圖層3打開眼睛。
第八張,瞳格格選擇了第二格影格,圖層就選擇了圖層2打開眼睛。

0920pic0009.jpg  

到【檔案】選【儲存為網頁與裝置用】才可以存出GIF的簡易動畫檔噢,點下去後會看到這個畫面。

0920pic00010.jpg  

1、一定一定要選GIF噢!這個檔案瞳格格把它當作,可以動的JPG,可以放JPG的地方都可以放GIF(大部分)
2、輸出的影像尺寸,瞳格格喜歡一開始畫大一點比較好畫,輸出後如果要小一點就可以用150×150或100X100輸出。
3、一定要選永遠,除非這個GIF最後一格永遠停下來,看需求,瞳格格的動態圖示一定是永遠的,
都OK後,就可以按下【儲存】,它會跳出要存在哪裡就OK囉!

1863409908.jpg    

 


【線稿版原尺寸撒嬌】
瞳格格為了快快存好教學的圖,所以就先暫時用線稿版本,順便看看動作順不順,之後做完教學圖,就乖乖的上色啦!

1863409919.jpg  

 


【彩色版原尺寸撒嬌】

1688908407.jpg  
【彩色版縮小應用尺寸撒嬌】150×150好像太大了呀哈哈哈哈哈哈~)

很重要的一點,如果跟瞳格格一樣,看完線稿順不順後才上色的話,那麼要上色請千萬千萬把剛剛做的動畫全部刪掉吧!只要留下第一格就好,不然之後上完色(因為上色肯定會開圖層做合併之類的)做動畫一定會非常的混亂的。(他會莫名其妙把你的圖層變成透明度0阿~或是有一位置的話會位置錯亂之類的‧‧所以一定要刪掉試做的那幾格唷!另外,瞳格格的網誌連結貼紙也是這樣的道理的啦!(只是分了很多圖層很多動作,腳、手、發條通通不同圖層好多層畫的,可以捉摸看看)1044303760.jpg

ps 想知道更詳細>W<(又剛好在中部的話),可以去上小蘇蘇(蘇芳玲老師)老師的課唷XDDDDD話說話說,她是瞳格格很想再上的老師的課呢(也很想上看看515老師的課><)!因為教的都超詳細又實用的啦XD噯呀噯呀!(應該說聯成電腦的老師都很不錯,話說話說,每個老師專注的點不同,重點是有問有保庇唷!只要敢問老師都會很欣喜的解答的啦!)

「喵喵...喵....喵...喵嗚喵喵喵......(在說蝦咪我也不知道  1688908406.jpg  

, , , ,

lccnetvip 發表在 痞客邦 PIXNET 留言(1) 人氣()


留言列表 (1)

發表留言
  • 小咪
  • 好詳細的分享,爆可愛的撒嬌文><
  • 謝謝對學員的肯定讚美~多來這裡逛逛喔~

    lccnetvip 於 2013/10/29 11:17 回覆