• 打造屬于你自己的微信表情

    2016-9-28    用心設計

    如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里

    來源:UI中國


    關(guān)于微信表情制作的一些經(jīng)驗分享

    Image title

    Image title



           在 微信里,每個人都離不開表情,似乎表情已經(jīng)離不開我們的生活。最初接觸的表情應該是QQ中的emoji表情了,表情不僅能形象生動的表達在聊天壞境中難以 言喻的情緒表達,也能緩解文字聊天過程中出現(xiàn)的“詞窮”的尷尬。當然,現(xiàn)在的表情也隨著互聯(lián)網(wǎng)的發(fā)展,尺度也越來越“污了”。- =(當然我覺得今后也是表情設計的一種趨勢和方向,內(nèi)心的小婊砸已經(jīng)開始翻騰。)

    Image title

            在 做第一套表情的時候,我查了很多網(wǎng)上資料,并沒有找到關(guān)于表情制作的相關(guān)教程。對于一個沒有動畫經(jīng)驗的設計師來說,做一個gif表情(當然微信表情也支持 靜態(tài)表情)真的讓我費勁了心思,走了不少彎路。慢慢的,自己也摸索出一套做表情的小方法和技巧,在這里供大家參考和交流。


        

    設計工具的選擇



    那言歸正傳,工欲善其事,必先利其器。起初,我試過AE和FLASH(半桶水),遇到了各種問題(繪制、導入、圖層、動效、文件大小等等),最終由于學藝不精而放棄。

    以下2個軟件對于設計師來說肯定不陌生, AI是我最喜歡的設計工具。前者用來繪制表情形象,后者用來合成動效gif。


    Image title



    繪制形象




    我這里以我家的小豹仔為例,繪制形象的過程在這里就不多說啦,我用到的方法很簡單,都是用基本的幾何形狀拼接而成。之前也出過我繪制插畫的小方法http://www.ui.cn/detail/95287.html。



    Image title


    逐幀動畫


    逐幀動畫是一種常見的動畫形式(Frame By Frame),其原理是在“連續(xù)的關(guān)鍵幀”中分解動畫動作,也就是在時間軸的每幀上逐幀繪制不同的內(nèi)容,使其連續(xù)播放而成動畫。

    那 么問題來了,我們需要繪制不同的幀畫面,而且是連續(xù)的。AI的優(yōu)勢在于多畫板而且繪制的圖形是矢量的圖層也是分開的,這也是最終選擇 AI的原因。多畫板能確保你繪制的圖形是連續(xù)的。巧用ctrl+c,ctrl+f能確保一個畫板的元素完好的復制到另一個畫板。畫板大小為 240*240(這是微信表情規(guī)定的制作尺寸)


    Image title


    對于我們這種非專業(yè)動畫設計師來說,需要對簡單的動畫知識稍微做一些功課。比如關(guān)節(jié)的運動,身體的運動等。當然,一些簡單的動畫也會有很好的效果。

    通過旋轉(zhuǎn),縮放,移動等改變關(guān)鍵部位的狀態(tài)(多圖層,直接選擇圖層多好處)。同時 AI的妙處在于使用直接選擇工具,移動物體形狀的錨點,從而改變位移和形狀而達到過度幀的效果。


    Image title



    同樣的方法繪制下一個畫板,從而不斷的增加動作連續(xù)的過渡幀。



    Image title



    這 樣連續(xù)的關(guān)鍵幀就制作好了。但是gif一般是連續(xù)循環(huán)的。第一幀和最后一針過渡也非常重要。我通常把幀數(shù)控制在4、8左右,這里用數(shù)字表示下規(guī)律為:1、 2、3、2和1、2、3、4、5、4、3、2,這樣首尾就連續(xù)起來了。當然特殊情況也可以定義其他數(shù)量的幀,原則是一樣的。


    Image title


    這解決了連貫性和重復繪制出現(xiàn)的誤差。接著用同樣的方法,可以改變其他部位的形狀和位移,如下:



    Image title

    接著就是導出了序列幀,ai的導出功能非常方便,文件>導出png(勾選畫板,全部)  就可以了:而且給你序列的順序都命名好了,是不是很贊~~

    Image title

    接著就該PS登場了,新建畫布240*240px,分辨率72。把上面4個序列幀文件直接拖入ps就好,然后窗口>時間軸,打開時間軸,創(chuàng)建時間軸,然后轉(zhuǎn)換為幀動畫,由于微信表情規(guī)范需添加2像素的白色外描邊,需先給圖片添加描邊效果。


    Image title

    新建幀,第一幀對應的是豹仔-01.png,以此類推。每幀對應顯示相應的圖片。按空格預覽,不斷的調(diào)整參數(shù)(這里就不多說明了)。


    Image title


    最后,文件 >導出》儲存為web所用格式,選擇導出文件為gif,循環(huán)次數(shù)設置為永遠。一個簡單的表情效果制作完成,預覽如下:


    Image title

    教程做了一個很簡單的例子,適合新手或第一次想嘗試制作表情的設計師們。我想,設計原理都是一樣的,更復雜的表情需要設計師自己的開動自己的腦瓜?!侗欣怖病繁砬榘褪腔谶@個思路制作完成的,已在微信表情商店上架,喜歡的可以去看看~~


    Image title





    Image title

    Image title


    Image title


    Image title


    Image title


    Image title


    Image title


    Image title


    Image title


    Image title


    Image title


    Image title


    Image title


    Image title


    Image title




    對 于如何做好一個表情,什么表情會成為爆款呢?微信官網(wǎng)推出的一個文章《如何做一套好的表情》http://software.it168.com /a2015/1029/1772/000001772876.shtml 我覺得寫的非常棒,對于表情設計的思路和原則做出了一些總結(jié),推薦大家去好好看下。

    也歡迎大家一起討論和交流表情制作的技巧,互相學習,一起成長。






    Image title

    藍藍設計sillybuy.com )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務


    日歷

    鏈接

    個人資料

    藍藍設計的小編 http://sillybuy.com

    存檔