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