2016-9-28 用心設(shè)計
如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里
來源:UI中國
關(guān)于微信表情制作的一些經(jīng)驗分享
在 微信里,每個人都離不開表情,似乎表情已經(jīng)離不開我們的生活。最初接觸的表情應(yīng)該是QQ中的emoji表情了,表情不僅能形象生動的表達在聊天壞境中難以 言喻的情緒表達,也能緩解文字聊天過程中出現(xiàn)的“詞窮”的尷尬。當然,現(xiàn)在的表情也隨著互聯(lián)網(wǎng)的發(fā)展,尺度也越來越“污了”。- =(當然我覺得今后也是表情設(shè)計的一種趨勢和方向,內(nèi)心的小婊砸已經(jīng)開始翻騰。)
在 做第一套表情的時候,我查了很多網(wǎng)上資料,并沒有找到關(guān)于表情制作的相關(guān)教程。對于一個沒有動畫經(jīng)驗的設(shè)計師來說,做一個gif表情(當然微信表情也支持 靜態(tài)表情)真的讓我費勁了心思,走了不少彎路。慢慢的,自己也摸索出一套做表情的小方法和技巧,在這里供大家參考和交流。
設(shè)計工具的選擇
那言歸正傳,工欲善其事,必先利其器。起初,我試過AE和FLASH(半桶水),遇到了各種問題(繪制、導(dǎo)入、圖層、動效、文件大小等等),最終由于學(xué)藝不精而放棄。
以下2個軟件對于設(shè)計師來說肯定不陌生, AI是我最喜歡的設(shè)計工具。前者用來繪制表情形象,后者用來合成動效gif。
繪制形象
我這里以我家的小豹仔為例,繪制形象的過程在這里就不多說啦,我用到的方法很簡單,都是用基本的幾何形狀拼接而成。之前也出過我繪制插畫的小方法http://www.ui.cn/detail/95287.html。
逐幀動畫
逐幀動畫是一種常見的動畫形式(Frame By Frame),其原理是在“連續(xù)的關(guān)鍵幀”中分解動畫動作,也就是在時間軸的每幀上逐幀繪制不同的內(nèi)容,使其連續(xù)播放而成動畫。
那 么問題來了,我們需要繪制不同的幀畫面,而且是連續(xù)的。AI的優(yōu)勢在于多畫板而且繪制的圖形是矢量的圖層也是分開的,這也是最終選擇 AI的原因。多畫板能確保你繪制的圖形是連續(xù)的。巧用ctrl+c,ctrl+f能確保一個畫板的元素完好的復(fù)制到另一個畫板。畫板大小為 240*240(這是微信表情規(guī)定的制作尺寸)
對于我們這種非專業(yè)動畫設(shè)計師來說,需要對簡單的動畫知識稍微做一些功課。比如關(guān)節(jié)的運動,身體的運動等。當然,一些簡單的動畫也會有很好的效果。
通過旋轉(zhuǎn),縮放,移動等改變關(guān)鍵部位的狀態(tài)(多圖層,直接選擇圖層多好處)。同時 AI的妙處在于使用直接選擇工具,移動物體形狀的錨點,從而改變位移和形狀而達到過度幀的效果。
同樣的方法繪制下一個畫板,從而不斷的增加動作連續(xù)的過渡幀。
這 樣連續(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ù)量的幀,原則是一樣的。
這解決了連貫性和重復(fù)繪制出現(xiàn)的誤差。接著用同樣的方法,可以改變其他部位的形狀和位移,如下:
接著就是導(dǎo)出了序列幀,ai的導(dǎo)出功能非常方便,文件>導(dǎo)出png(勾選畫板,全部) 就可以了:而且給你序列的順序都命名好了,是不是很贊~~
接著就該PS登場了,新建畫布240*240px,分辨率72。把上面4個序列幀文件直接拖入ps就好,然后窗口>時間軸,打開時間軸,創(chuàng)建時間軸,然后轉(zhuǎn)換為幀動畫,由于微信表情規(guī)范需添加2像素的白色外描邊,需先給圖片添加描邊效果。
新建幀,第一幀對應(yīng)的是豹仔-01.png,以此類推。每幀對應(yīng)顯示相應(yīng)的圖片。按空格預(yù)覽,不斷的調(diào)整參數(shù)(這里就不多說明了)。
最后,文件 >導(dǎo)出》儲存為web所用格式,選擇導(dǎo)出文件為gif,循環(huán)次數(shù)設(shè)置為永遠。一個簡單的表情效果制作完成,預(yù)覽如下:
教程做了一個很簡單的例子,適合新手或第一次想嘗試制作表情的設(shè)計師們。我想,設(shè)計原理都是一樣的,更復(fù)雜的表情需要設(shè)計師自己的開動自己的腦瓜?!侗欣怖病繁砬榘褪腔谶@個思路制作完成的,已在微信表情商店上架,喜歡的可以去看看~~
對 于如何做好一個表情,什么表情會成為爆款呢?微信官網(wǎng)推出的一個文章《如何做一套好的表情》http://software.it168.com /a2015/1029/1772/000001772876.shtml 我覺得寫的非常棒,對于表情設(shè)計的思路和原則做出了一些總結(jié),推薦大家去好好看下。
也歡迎大家一起討論和交流表情制作的技巧,互相學(xué)習,一起成長。
藍藍設(shè)計( m.miumiuwan.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍藍設(shè)計的小編 http://m.miumiuwan.com