微信表情来袭!打造属于你自己的微信表情

分享到:更多 ()

Image title

Image title

在微信里,每个人都离不开表情,似乎表情已经离不开我们的生活。最初接触的表情应该是QQ中的emoji表情了,表情不仅能形象生动的表达在聊天坏境中难以言喻的情绪表达,也能缓解文字聊天过程中出现的“词穷”的尴尬。当然,现在的表情也随着互联网的发展,尺度也越来越“污了”。- =(当然我觉得今后也是表情设计的一种趋势和方向,内心的小婊砸已经开始翻腾。)

Image title

在做第一套表情的时候,我查了很多网上资料,并没有找到关于表情制作的相关教程。对于一个没有动画经验的设计师来说,做一个gif表情(当然微信表情也支持静态表情)真的让我费劲了心思,走了不少弯路。慢慢的,自己也摸索出一套做表情的小方法和技巧,在这里供大家参考和交流。

 

设计工具的选择

那言归正传,工欲善其事,必先利其器。起初,我试过AE和FLASH(半桶水),遇到了各种问题(绘制、导入、图层、动效、文件大小等等),最终由于学艺不精而放弃。

以下2个软件对于设计师来说肯定不陌生, AI是我最喜欢的设计工具。前者用来绘制表情形象,后者用来合成动效gif。

Image title

绘制形象

我这里以我家的小豹仔为例,绘制形象的过程在这里就不多说啦,我用到的方法很简单,都是用基本的几何形状拼接而成。之前也出过我绘制插画的小方法http://www.ui.cn/detail/95287.html。

Image title

逐帧动画

逐帧动画是一种常见的动画形式(Frame By Frame),其原理是在“连续的关键帧”中分解动画动作,也就是在时间轴的每帧上逐帧绘制不同的内容,使其连续播放而成动画。

那么问题来了,我们需要绘制不同的帧画面,而且是连续的。AI的优势在于多画板而且绘制的图形是矢量的图层也是分开的,这也是最终选择 AI的原因。多画板能确保你绘制的图形是连续的。巧用ctrl+c,ctrl+f能确保一个画板的元素完好的复制到另一个画板。画板大小为240*240(这是微信表情规定的制作尺寸)

Image title

对于我们这种非专业动画设计师来说,需要对简单的动画知识稍微做一些功课。比如关节的运动,身体的运动等。当然,一些简单的动画也会有很好的效果。

通过旋转,缩放,移动等改变关键部位的状态(多图层,直接选择图层多好处)。同时 AI的妙处在于使用直接选择工具,移动物体形状的锚点,从而改变位移和形状而达到过度帧的效果。

Image title

同样的方法绘制下一个画板,从而不断的增加动作连续的过渡帧。

Image title

这样连续的关键帧就制作好了。但是gif一般是连续循环的。第一帧和最后一针过渡也非常重要。我通常把帧数控制在4、8左右,这里用数字表示下规律为:1、2、3、2和1、2、3、4、5、4、3、2,这样首尾就连续起来了。当然特殊情况也可以定义其他数量的帧,原则是一样的。

Image title

这解决了连贯性和重复绘制出现的误差。接着用同样的方法,可以改变其他部位的形状和位移,如下:

Image title

接着就是导出了序列帧,ai的导出功能非常方便,文件>导出png(勾选画板,全部)  就可以了:而且给你序列的顺序都命名好了,是不是很赞~~

Image title

接着就该PS登场了,新建画布240*240px,分辨率72。把上面4个序列帧文件直接拖入ps就好,然后窗口>时间轴,打开时间轴,创建时间轴,然后转换为帧动画,由于微信表情规范需添加2像素的白色外描边,需先给图片添加描边效果。

Image title

新建帧,第一帧对应的是豹仔-01.png,以此类推。每帧对应显示相应的图片。按空格预览,不断的调整参数(这里就不多说明了)。

Image title

最后,文件 >导出》储存为web所用格式,选择导出文件为gif,循环次数设置为永远。一个简单的表情效果制作完成,预览如下:

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

Image title

对于如何做好一个表情,什么表情会成为爆款呢?微信官网推出的一个文章《如何做一套好的表情》http://software.it168.com/a2015/1029/1772/000001772876.shtml 我觉得写的非常棒,对于表情设计的思路和原则做出了一些总结,推荐大家去好好看下。

也欢迎大家一起讨论和交流表情制作的技巧,互相学习,一起成长。

来源:UI中国

最美UI|学ui设计联盟|一起努力学设计!

最美UI zuimeiui.com 学ui设计最值得关注的UI学习教程交流平台! 每天发布高质量的设计教程和分享设计经验,帮助喜欢UI设计的初学同学快速转型,我们给大家提供更多免费学习ui的机会,想成为设计师的你赶快加入吧! 给最美UI点个赞!有你的支持是我们前进的动力! 猛点这里 >>

最美ui微信公众号zuimeiui要养成关注干货好习惯哦!

[ 最美特色栏目推荐 ]
设计导航:全球顶尖设计网站推荐,设计师必备导航! → 猛戳这里
设计欣赏:收集海量精选APP截图,让你设计灵感小宇宙大爆发!! → 猛戳这里
设计师:三人行必有我师。在这里可以交到良师益友哦!还不赶紧加入? → 猛戳这里

【最美UI 原创文章 投稿邮箱:tougao@zuimeiui.com | 期待您的投稿!我们将一一答复!】

未经允许不得转载:最美ui » 微信表情来袭!打造属于你自己的微信表情

0
分享到:更多 ()