超碰av在线|无码精品一区二区三区在线|伊人色色日韩一级片内射视频群批_欧美丰满少妇人妻HD高清在线_亚洲一区二区中文_亚洲无码动漫专区

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

2016-9-28    用心設(shè)計

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

來源:UI中國


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

Image title

Image title



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

Image title

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


    

設(shè)計工具的選擇



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

以下2個軟件對于設(shè)計師來說肯定不陌生, AI是我最喜歡的設(shè)計工具。前者用來繪制表情形象,后者用來合成動效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能確保一個畫板的元素完好的復(fù)制到另一個畫板。畫板大小為 240*240(這是微信表情規(guī)定的制作尺寸)


Image title


對于我們這種非專業(yè)動畫設(shè)計師來說,需要對簡單的動畫知識稍微做一些功課。比如關(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


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



Image title

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

Image title

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


Image title

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


Image title


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


Image title

教程做了一個很簡單的例子,適合新手或第一次想嘗試制作表情的設(shè)計師們。我想,設(shè)計原理都是一樣的,更復(fù)雜的表情需要設(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




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

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






Image title

藍藍設(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

存檔