在微信里，每個(gè)人都離不開表情，似乎表情已經(jīng)離不開我們的生活。最初接觸的表情應(yīng)該是QQ中的emoji表情了，表情不僅能形象生動(dòng)的表達(dá)在聊天壞境中難以言喻的情緒表達(dá)，也能緩解文字聊天過程中出現(xiàn)的“詞窮”的尷尬。當(dāng)然，現(xiàn)在的表情也隨著互聯(lián)網(wǎng)的發(fā)展，尺度也越來(lái)越“污了”。下面小編就為大家分享Illustrator結(jié)合PS設(shè)計(jì)屬于自己的微信動(dòng)態(tài)表情方法，一起來(lái)看看吧！

當(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ì)師來(lái)說，做一個(gè)gif表情(當(dāng)然微信表情也支持靜態(tài)表情)真的讓我費(fèi)勁了心思，走了不少?gòu)澛?。慢慢的，自己也摸索出一套做表情的小方法和技巧，在這里供大家參考和交流。

設(shè)計(jì)工具的選擇

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

以下2個(gè)軟件對(duì)于設(shè)計(jì)師來(lái)說肯定不陌生， AI是我最喜歡的設(shè)計(jì)工具。前者用來(lái)繪制表情形象，后者用來(lái)合成動(dòng)效gif。

繪制形象

我這里以我家的小豹仔為例，繪制形象的過程在這里就不多說啦，我用到的方法很簡(jiǎn)單，都是用基本的幾何形狀拼接而成。

逐幀動(dòng)畫

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

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

對(duì)于我們這種非專業(yè)動(dòng)畫設(shè)計(jì)師來(lái)說，需要對(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ù)起來(lái)了。當(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è)思路制作完成的，已在微信表情商店上架，喜歡的可以去看看～～

以上就是Illustrator結(jié)合PS設(shè)計(jì)屬于自己的微信動(dòng)態(tài)表情教程，大家學(xué)會(huì)了嗎？希望這篇文章能對(duì)大家有一定的幫助！

最新評(píng)論