GIF图片制作模板.ppt

入门级GIF表情设计 Oba肥鸡style 主讲人 倪大挫欢迎关注 优秀网页设计上期回顾 卡通漫画角色设计 从獠麝鸡谈起 自我介绍 新浪微博 倪大挫漫画爱好者 目前供职于一家房地产媒体新版SDC吉祥物 獠麝鸡 作者 引入 这些都是GIF 4 课程介绍 从零开始学习GIF表情制作主角 SDC吉祥物獠麝鸡 概念解释 帧 动画的基本单位 一张静态画面为一帧延迟时间 从某一帧播放到下一帧之间的间隔时间关键帧 相对 过渡帧 而言 指角色或者物体运动或变化中的关键动作所处的那一帧过渡帧 起始关键帧和结束关键帧之间的帧为过渡帧帧速 动态画面每秒钟展现的帧数 单位为帧 秒 fps 1秒 s 1000毫秒 ms 动画中计时单位常用1 100秒 制作工具 软件 截图软件 SAI 绘图 Photoshop 调整 GIFMovieGear 拼凑 FLASH亦可 软件的选择并不重要 能杀猪就是好刀硬件 数位板 WacomBambooFunCTH 661 制作工具 GMG GMG GIFMovieGear 的特点可逐帧调整延迟时间可融合多个GIF文件后期处理功能有限 但已足够使用 设计思路 设计要求 搞笑酷 忠实于 江南style 原型忠实于獠麝鸡原型首尾衔接完美 能无限循环 设计思路 参考对象 江南style MV獠麝鸡原型 设计思路 思路整合 鸟叔的骑马舞动作关键 脚和手的跳跃和摆动辅助 撅嘴的表情 墨镜问题 獠麝鸡的脚过于细小 动作表现力度有限解决方案 着重表现手部动作和表情加上鸡冠的摆动增加动作力度脚部动作尽可能表现 但不作为重点 制作过程 截图 挑取循环 分析动作规律 逐帧绘画 从关键帧开始 整合 反复修改 加背景 搞掂 绘画过程 截图 截图逐帧截下MV中的目标动作 至少包括一个循环 绘画过程 挑取循环 挑取循环把所有截图排好顺序拉进GMG 调整到合适大小并裁剪掉多余部分 绘画过程 挑取循环 挑取循环观察并挑取一个顺畅的循环 删除其他多余的帧鸟叔的舞步一个循环原本为 左右左左右左右右 此处简化为 左右 左右 左右 左右 即以 左右 为一个循环 绘画过程 挑取循环 挑取循环播放GIF调试 所有帧延时 调整节奏注意 网络传播中GIF的帧速最好不大于10fps 20帧 所有帧延时 10 注 此处所有帧延时单位为1 100秒 绘画过程 挑取循环 挑取循环可通过 减少帧数 改变帧数与帧速的关系 20帧 所有帧延时 10 10帧 所有帧延时 10 绘画过程 分析动作规律 分析动作规律绘画之前 先想清楚怎么画 不急着动笔把整体拆分为多个部件思考躯体为一部件 手为一部件 脚为另一部件 还要添加鸡冠为另一部件反复观察动作 各部件的运动规律要心中有数头和躯体只有整体位移手 脚 鸡冠 有各自的动作变化规律绘画时各个部件要独立出来 绘画过程 逐帧绘画 逐帧绘画先确定关键帧如脚抬到最高位置的一帧为一关键帧 脚位于最低位置的一帧为另一关键帧 考虑到左右之分 共有4个关键帧没有动作变化的部分可重复使用躯体和头只有位移 没有动作 可作为固定部分在各帧中刚重复使用 调整到合适即可 固定部分 变化部分 绘画过程 逐帧绘画 逐帧绘画绘画顺序是草稿 线稿 基本色 简单分色区绘画技巧详见上期教程 此处略过纯色填充 不带渐变 草稿 线稿 基本色 简单分色区 绘画过程 逐帧绘画 逐帧绘画画出关键帧后 再根据动作变化规律补充完关键帧之间的过渡帧将前一帧或后一帧半透明化 在此基础上画新的一帧最难画的地方是首末缝合处 需同时观察前后两帧 关键帧 关键帧 关键帧 关键帧 绘画过程 逐帧绘画 逐帧绘画画出关键帧后 再根据动作变化规律补充完关键帧之间的过渡帧将前一帧或后一帧半透明化 在此基础上画新的一帧最难画的地方是首末缝合处 需同时观察前后两帧 关键帧 关键帧 关键帧 关键帧 绘画过程 整合成GIF 整合依次输出各帧图像 拉进GMG 设定好参数 检测GIF是否顺畅 10帧 所有帧延时 10 4帧 所有帧延时 12 绘画过程 整合成GIF 整合不合格 推翻重来 不断修改 直到拿得出手 绘画过程 添加背景 添加背景背景直接用MV中的图片PS而来 移花接木 背景2帧 獠麝鸡10帧 最小公倍数10 即10帧可实现背景和肥鸡同时形成循环 绘画过程 添加背景 添加背景背景直接用MV中的图片PS而来 移花接木 背景2帧 獠麝鸡10帧 最小公倍数10 即10帧可实现背景和肥鸡同时形成循环 绘画过程 Done 完成 练习方法 从简单的动作和脸部表情开始 动作参考火柴人 脸部表情参考QQ自带默认表情把收集到的GIF拉近GMG 逐帧观察 临摹进阶学习可参考 动画师生存手册 多思考 多分享 你的作品别人能比你更快发现问题 杰克逊鸡草图 创作心得 把想法随时用草图记录下来统一所有帧延时可调整整体节奏 但每一帧均可单独设定不同的延迟时间把固定部分和变化部分划分在不同的组 固定部分重复使用 适当节省工作量画新的一帧时先将已有的前一帧或后一帧半透明化 在此基础上新建图层描绘填充颜色尽量用纯色 避免使用渐变 一是在GIF中渐变会走样 二是渐变在动画中容易前后不衔接 FLASH矢量动画是另外一回事 提问时间 欢迎探讨 不要客气 欢迎关注 倪大挫 结束 感谢各位的聆听 特别鸣谢 感谢Luz大人在背后默默支持 感谢优设哥 多贝网提供分享平台 优秀网页设计优设群 79321884