版權說明和引用規範
Creative Commons License
噴你飯的創作噴你飯製作,以創用CC 姓名標示-非商業性-禁止改作 3.0 台灣 授權條款釋出。 此部落格所有圖文皆為噴你飯的原創,如果你喜歡我寫的文章或漫畫,可以使用每篇文章下面的"引用列表"功能,復制網址代碼到你要引用的地方. 請不要未經同意直接復制我的圖文到其他公開場合使用或商業用途,也請不要隨意修改我的作品,每個作品對創作者來說都是寶物,謝謝.

有人注意到我家的右側欄新開了一個表情符號區嗎?

我終于認認真真的開始制作飯團男爵系列的表情符號了。

 喜歡的人歡迎拿去用哦,我會盡量隔幾天就作一個新的上去,

也請你們給我一些寶貴的意見。Blush.gif


這次示範的這個表情是從上一篇 - 我收到神秘禮物

里面的其中一個插圖來的,可以用在臉紅、害羞、

丟臉等場合,或是跟小寶寶玩“遮臉躲貓貓”游戲!

多謝格友小物提供的意見。

索尼斯剛剛提供了一個用法,撞倒鼻子很痛XD)


最近很多人問我有關GIF動畫的制作方法,

與其一個一個回答不如發一篇文,

貼出簡單的過程給大家參考一下吧!


我慣用的軟體是Adobe Photoshop CS4

GIFtutorial01.JPG  

新開一個檔案來畫草稿,我喜歡一開始畫板解像度調高一點,

輸出的時候再縮小來用,這樣可以作的比較精細。

 

GIFtutorial02.JPG 

記得去上面的視窗工具選單打開“動畫”功能,

畫板下方會多出一條影格欄位。


GIFtutorial02-1.JPG 

每個影格配合圖層的開啟、關閉就可以創造出動畫的效果!


GIFtutorial03.JPG 

按下秒數旁邊的黑色箭頭可以自定每個畫面的停留秒數,


GIFTutorial04.gif 

一開始先大略畫出草稿,潦草一點沒關系,

記得每個動作分成不同的圖層,

畫完以后連起來播放看看離不流暢。


GIFtutorial05.JPG 

再來開新的圖層,把草圖描成線稿,

記得選一個無柔邊的筆刷,這樣做成GIF才不會有“白邊”。


 GIFtutorial06.JPG 

描線搞或是畫草圖的時候,可以利用圖層的透明度功能,

把上一個畫好的圖層調成半透明,

這樣可以作為畫下個動作的參考。

GIFtutorial07.JPG


畫好線稿,記得再串起來播放一次,

看看有沒有不順或是需要修改的地方。

GIFTutorial08.gif 


然后就是涂顏色啦~

開一個新圖層來上色才不會影響到線稿,畫錯也比較好修改。

GIFtutorial10.JPG


顏色盡量不要太復雜,

表情符號這麼小,畫得復雜反而會看不清楚。

GIFtutorial09.JPG 

我省略了很多漸層、陰影、反光、衣服皺褶等,

這樣畫起來容易,效果又比較好。


GIFtutorial11.JPG

每個圖層的顏色上好以后開一個新的檔案,

表情符號的尺寸是50*50,網路用的解析度是72像素/英寸...


把畫好的圖層都拉到新畫布上,然后按Ctrl+Alt+T,

把圖縮小到畫布範圍里面。

GIFtutorial11-5.JPG 


因為解析度低,畫質一定會變差,

但不用擔心,縮小后看不太出來的。

GIFtutorial12.JPG 


重新設定好新的檔案的影格后,準備最后步奏,

輸出成GIF影象,按下左上角的檔案,

然后選擇“儲存為網頁與裝置用”。

GIFtutorial13.JPG


這里有一大堆參數需要設定,

我把最重要的幾個列出來以供參考。

GIFtutorial14JPG.JPG

最后按下確定儲存,你的自制動畫就完成啦~!

 

對新手來說,Photoshop其實不是一個容易上手的軟體,

我省略了很多小細節,不然這篇文章打到明天還打不完,

如果還有什麼不懂得地方可以留言來問我,我盡力幫你解答,

希望大家都可以做出有趣的表情符號哦wave.gif 


*后記*大家可以來設計嵐家看他的教學,

可以補足我沒寫好的地方哦!

 

 


分享和推文

 ↑這是個萬能推文、分享、轉貼工具,它可以讓你把此篇文章分享,轉貼或訂閱到各大流行社群,還可以讓你推薦此篇文章,到例如FunP里面哦!如果你沒看到你要分享的社群,請你直接按它,它會列出更多社群選項。你可以直接在上面空白欄位里打出社群名字,它會幫你尋找出來,而以后它也會記住你搜尋的社群,把它優先顯示出來給你用哦!

創作者介紹

+噴你飯的古堡+

噴你飯 發表在 痞客邦 PIXNET 留言(52) 人氣()


留言列表 (52)

發表留言
  • 阿玻
  • 喔喔喔~超級仔細的教學~~~辛苦男爵了XD
  • 哈哈,阿玻也是達人,知道我偷懶
    省略很多步奏X_X,原來寫教學、示範文
    這麼累啊~~

    噴你飯 於 2010/08/24 17:42 回覆

  • 夢哩
  • 那影格要畫好多好多唷XDDD
  • 有幾張只有動動手而已啦,
    用拷貝的做局部修改就好了,
    設計的巧妙的話只要3-4張就可以串得很流暢了。

    噴你飯 於 2010/08/24 17:43 回覆

  • 幾米力
  • 好厲害啊,繪畫畫真好,什麼都可以做的出來
  • 也就只有用畫的我才可以實現多數的東西啊,
    不過也有人批評這不實際,是虛擬(假)的。

    噴你飯 於 2010/08/26 07:19 回覆

  • 史提夫
  • 好用心的教學唷~ (推)
    我是真心覺得做動畫好累~
    好佩服你連續好多篇都畫動畫唷 XDD
  • 我反而覺得作動畫容易呢,最近都懶得畫漫畫..
    其實我是希望漫畫再畫好一點的T_T

    噴你飯 於 2010/08/26 07:20 回覆

  • Urda Glimhild
  • 好可愛又好用心的教學
    等到電腦拿回來我要來試試看!!
  • 加油~做好記得叫我去看哦!

    噴你飯 於 2010/08/26 07:20 回覆

  • 小咪
  • 哇哇~~
    還附教學耶
    好用心喔!!~
  • 沒有啦,我真的寫得不好,
    要有一定基礎的人才看得懂...

    噴你飯 於 2010/08/26 07:21 回覆

  • mozaiyang
  • 黑默:可是我用ai耶
    >/3/<被飛踢…來找碴~哈
  • 看在你大喜的份上..
    不跟你計較了XD

    噴你飯 於 2010/08/26 07:22 回覆

  • 設計嵐
  • 搶飯碗!!我不依我不依~~

    飯團搶我飯碗..><...我不依我不依~而且人家用PS製作GIF動畫人家有發過教學文了...飯糰學人精..><..學人精!....
    開玩笑的...寫得真好真詳細!比我寫得好多了..ccc.讚!!!
  • 都說不是教學了~哈哈,是公開制作過程XD,
    你寫得比較user friendly,我后面加了你的連結給
    看不懂的人參考了~耶~合作!!

    噴你飯 於 2010/08/26 07:23 回覆

  • mashmoro980727
  • 噢!實在要叫你第一名啦.厲害.
  • 不敢不敢,小弟我也是最近才
    自己摸索出來的,所以解釋得很
    詞不達意..

    噴你飯 於 2010/08/26 07:24 回覆

  • 小物
  • 好可愛喔>////<
    一個小動畫就這麼費工阿
    辛苦飯糰哩!!
  • 是很費工,不過看到人物動起來就是開心啦!

    噴你飯 於 2010/08/26 07:32 回覆

  • 亞希斯.雷
  • 辛苦做出來的...
    真的很受大家歡迎耶~~

    飯團真厲害^~^~
  • 對啊,出乎意料呢!
    本來以為網路已經充斥著
    很多表情符號了,應該沒人會稀罕XDD

    噴你飯 於 2010/08/26 07:34 回覆

  • 想a♥
  • 昨天模賤熊才問說…
    哇!噴你飯的動畫質感很好也…
    不知道是什麼作的…
    結果你今天就發教學文了XDDDD
    PS:表情超可愛的♥我愛轉圈那個XDDDD
  • 不敢啦~其實放大來看還是有很多瑕疵的,
    我只是在唬弄大家的眼睛XDD

    噴你飯 於 2010/08/26 07:36 回覆

  • FIONA
  • 給你拍拍手~真的太棒了

    沒想到PHOTOSHOP 也可以做動畫耶

    帥!!!
  • 之前是要用ps配合Image Ready來做的,
    所以很不方便,現在CS4整合在一起了,
    可是功能太多大家反而不好上手:p

    噴你飯 於 2010/08/26 07:37 回覆

  • 阿湯哥
  • 真是太厲害了
    會畫插畫又會做動畫~佩服
    還有這麼用心的教學
    推一個~
  • 謝謝~
    只是得了不畫畫就會死的病啦~
    不畫畫就周身不自在。

    噴你飯 於 2010/08/26 07:44 回覆

  • 歐迪
  • 好讚的教學…非常的詳細…感謝再感謝…辛苦了…
  • 其實真的沒有很詳細,
    自己看了都汗顏..
    會adobe系列的人才比較看得懂。

    噴你飯 於 2010/08/26 07:46 回覆

  • 米菲
  • 真的蠻可愛的耶
    感覺飯團很用心製做 XD
  • 很好玩,我畫什麼表情,
    我自己的臉就一直做那個表情,
    做到臉都抽筋了XD。

    噴你飯 於 2010/08/26 07:47 回覆

  • noodle258
  • 我還是拿來用就好了^^
  • 拿去拿去~
    隨便用^^

    噴你飯 於 2010/08/26 07:49 回覆

  • 大頭
  • 我是用PHOTOPIMPACT...><
    PHOTOSHOP之前看書過@~@
    感覺好像筆IMPACT好用XD
  • Impact比較簡單,可是
    做出來的效果好像沒那麼好,
    很多東西無法達到想要的效果。
    設計來說還是adobe厲害(Corel差一點)

    噴你飯 於 2010/08/26 07:50 回覆

  • ya-shuan焰狼
  • 動畫果然很難
    我現在msn聊天都用男爵的表情符號喔XDDD
    (讚)
  • 哈哈!多謝啦~頭號粉絲。

    噴你飯 於 2010/08/26 07:52 回覆

  • Invisible
  • 原來男爵大人是用類似imageready的軟件製作gif喔?
    (很抱歉我目前還是用CS版本OTL|||||)
    說開所有繪圖軟件,對我來說直到目前還是Photoshop最熟用XD
  • 好象到CS3還是CS4開始
    Imageready被整合進去photoshop了,
    趕快去dow*lo*d(小聲)新的版本吧!

    噴你飯 於 2010/08/26 07:55 回覆

  • 寒武紀。
  • 高手~這我學不來啦~ㄏㄏ
  • 我教得太爛啦~~
    是我的錯,是我的錯~~

    噴你飯 於 2010/08/26 07:55 回覆

  • 小女王
  • 還有教學耶~
    不錯哦~ ^^
  • 小女王,留言又變成廣告了~
    幸好我發現。

    噴你飯 於 2010/08/26 07:56 回覆

  • 我要當愚人
  • 教得真棒
    我只會用flash做動畫
    但是我不會畫畫 ><
    那也沒輒
  • 不會畫畫也可以用貝茲曲線啊~
    會flash很厲害呢,我只略知皮毛。

    噴你飯 於 2010/08/26 07:57 回覆

  • 豬女
  • 哈哈,終於認真起來喔。很好呀 ^ ^
    我還是很懶做。偶然文章加插動畫也還不錯.

    等你做一系列記得給我整套收藏喔。
  • 沒問題~到時候打包給妳,
    你的“殺短短”動畫就做得很好啊~

    噴你飯 於 2010/08/26 07:58 回覆

  • man哥/女王
  • 感謝你的細心教學!
    總覺得作動畫好難喔!
    下次也來試試!
  • 是麻煩,但是其實不難啦~
    加油!

    噴你飯 於 2010/08/26 07:58 回覆

  • 程程媽咪
  • 男爵的表情圖都好可愛呀!
    我欣賞現成的動畫就好~
    目前好像沒時間可以研究這個@@
  • 哈哈,時間都給程程了!
    妳可以連拍他的表情然后做成動畫啊!

    噴你飯 於 2010/08/26 07:59 回覆

  • YangMi
  • 推你的用心~
    後面那張PUSH圖超可愛的XDDDD
  • 謝謝~離你這個高手還差得遠了~
    加油!

    噴你飯 於 2010/08/26 08:01 回覆

  • Tuffy兔妃
  • (拍拍手)
    原來動畫是這樣做出來的丫~= v =
  • 其實動畫應該是
    要做成影像檔再加聲音的,
    可是我一直懶得研究。

    噴你飯 於 2010/08/26 08:02 回覆

  • MimiFire
  • 好詳細^^ 感謝飯團男爵大人
    我會做了^^
  • 加油~期待你的新作品!

    噴你飯 於 2010/08/26 08:28 回覆

  • jingxuan
  • 你說到了重點...
    當初學photoshop 真是痛苦極了
    到現在還是不太會使用 @.@
  • 哈哈,我做這行的photoshop是每天都要打開的,
    慢慢的變成沒有他不行了。

    噴你飯 於 2010/08/26 08:29 回覆

  • Tina
  • 雖然知道你用photoshop處理gif動畫以及你真的真的做得很棒,不過不知你是否會用adobe flash軟體? 只是好奇問一下
  • flash我只會皮毛,一直沒有動力去研究它..
    不過adobe creative suit的其它軟體我幾乎都會,
    工作需要沒辦法。

    噴你飯 於 2010/08/26 08:31 回覆

  • willie
  • 真的好厲害啊~~
    我拿來用囉~~謝謝^^
  • 歡迎拿去用~
    不過現在的表情還太少了,
    我會努力的!

    噴你飯 於 2010/08/26 08:32 回覆

  • 小巴
  • 我覺得做動畫本身就是一件煩人的事
    但~~
    飯糰居然又弄了這詳細教學~~
    我真是佩服~~!!!!
  • 我越來越能體會到當中樂趣了!

    噴你飯 於 2010/08/26 08:33 回覆

  • davidmac
  • 讚!!
    很讚的教學分享,找時間也來試試^^
  • 哇~大師要出手了!!!
    期待ing。

    噴你飯 於 2010/08/26 08:34 回覆

  • more
  • 我改天來玩玩~ㄎㄎ
  • 做個摩爾哈煙的表情動畫嗎?

    噴你飯 於 2010/08/26 08:35 回覆

  • 凡子
  • 我覺得大家在用圖層增加影格那邊一定會錯亂~XD
    如果對PS不太熟的話啦~呵呵!
  • 對啊,我寫得不好,
    要有基礎的人才看得懂....
    所以請不懂的人去設計嵐家看他的教學,
    比較能補足我沒寫到的地方。

    噴你飯 於 2010/08/26 08:36 回覆

  • 販頭
  • 真精彩的教學..
    想必花了不少時間吧
    販頭改天閒閒的時候也要來試試...XD
  • 嗯,想怎麼寫比作動畫還累....呼~

    噴你飯 於 2010/08/26 08:37 回覆

  • 設計嵐
  • You are so sweet~~^//^

    哈~~我來你這邊亂吵你還幫我+連結@@?...人真好~~來~~我啾一個...^3^...謝謝啦~~不過你公開的過程可是很專業很實務上的應用哩~~這對很多人的幫助很大!!!
  • 哈哈,不會啦~
    挺小學堂的同學是天經地義的事,
    何況我們的文真的很能互補啊!

    噴你飯 於 2010/08/27 08:04 回覆

  • 凡子
  • 我不是說寫的不好的意思啦~哈!
    是那邊本來就容易錯亂~
    男爵教的也很清楚阿~~>_0
  • 哈哈,不是說妳說我寫得不好啦,
    是說我自己覺得寫得不好,
    可惜時間不夠多,不過我也不是當老師的命..

    噴你飯 於 2010/08/27 08:14 回覆

  • 悄悄話
  • 想想魚
  • 太厲害了!!每一個表情都要花很多時間吧>"<
  • 是啊,大約畫3小時(復雜的那些)
    可是很好玩呢!

    噴你飯 於 2010/08/27 08:24 回覆

  • 悄悄話
  • davidmac
  • 大...大師的稱呼太惶恐了(汗)
    不過這種小動畫動起來真的好可愛說~
    等工作較空時再一步一步的來學^^
  • 真的啦~你的畫超有風格的,
    好羨慕啊~我都畫不出來。

    噴你飯 於 2010/08/27 08:32 回覆

  • 模賤熊
  • 太實用了~~~
    感謝你的教學~~~

    但是..........我的是CS3耶 ......囧?
  • 趕快去做那件D開頭,D結尾的壞事吧^^
    CS3好像也可以,還是要配image ready?

    噴你飯 於 2010/08/27 08:34 回覆

  • 悄悄話
  • 悄悄話
  • 路人
  • 好棒~回去試試
  • 有聲明哦~
    照著做肚子痛不要來找我-_-

    噴你飯 於 2010/08/29 08:44 回覆

  • 小熊
  • 哈~這教學好棒XD
    不過我還在跟手寫版努力變熟中Q_Q
  • 加油啊~
    手寫板超好用的,
    我電腦已經沒有滑鼠了,
    做什麼都靠手寫板。

    噴你飯 於 2010/08/29 08:48 回覆

  • Pencil
  • 很棒的分享耶!
    我一直想嘗試看看
    可是卻一直偷懶中~XD
  • 有家累的人,難怪啦~

    噴你飯 於 2010/08/31 13:33 回覆

  • 川
  • 恩嗯!原來是這樣的作法~~俺都不會用這些技巧~
    很厲害耶!!!
  • 沒有啦~
    就亂入試出來的,
    大家交流交流。

    噴你飯 於 2010/09/05 13:29 回覆

  • 悄悄話
  • 悄悄話