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.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务