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