勋章教程 帧动画模式 与 时间轴模式详解 一帖全

cxm13

勋章教程

作者：游侠网  cxm13 出处：http://game.ali213.net/thread-4862551-1-1.html 转载请注明出处 谢谢

勋章的制作规范与奖励

（一）勋章中心出售的勋章均由论坛工作组与热心会员原创制作，游侠论坛工作组按照内部选拔途径进行相关审定工作，热心会员制作的原创勋章，可以在指定投送帖（http://game.ali213.net/thread-4792231-1-1.html）内发布申请，论坛管理层会及时回复，并择优发布。 　　（二）勋章制作的要求：容量40KB内、固定尺寸35x35像素、gif格式。勋章内容必须和游戏、动漫相关，不得含有任何涉嫌政治、黄 色、侮辱等违反论坛总版规的内容。 　　（三）勋章制作的奖励：每套勋章不能少于7款，每枚勋章奖励100LTB 、每套1荣誉。 　　（四）所有工作组及热心会员投稿原创作品，均视作原作者授权游侠论坛能够使用其作品，并由论坛决定勋章发售形式。勋章使用后，原作者不得以侵权或其他理由，要求游侠论坛做出包括但不限于勋章下架、收回已有勋章、支付实物报酬等行为。 关于勋章更多详情请查阅 游侠论坛勋章商城管理条例

整体介绍

本教程使用PhotoShop CS6 Extended 进行讲解，因版本不同在操作上或许会有所出入。 这里主要介绍了PS中两种制作动画的模式 一种是帧动画 另外一种是时间轴动画。 帧动画过去用的人比较多，所以我放在前面，而时间轴作为新出的功能我放在后面，也属于重点介绍的部分。 各位可以按自己的兴趣自行选择。

目录

帧动画模式介绍 ├ 扫光制作 ├ 星星制作 └ 物体旋转制作 时间轴模式介绍 ├ 扫光制作 ├ 星星制作 ├ 物体旋转制作 ├ 流星制作 ├ 蒙版的使用 └ 图层样式的使用

cxm13

帧动画模式介绍

帧动画就是一帧一帧的 跟动画片的原理类似 需要你去设置动画里的每一帧 这个也是我们PS里一般使用的模式。 而在 CS6 Extended 扩展版中 引入了 新的时间轴模式 这种模式如果你熟悉Flash动画制作的话 应该非常容易上手 就是关键帧动画的形式 . 个人觉得在制作效率上比 帧动画要好不少。当然了 作为 CS6 Extended 版的功能 本身价格就贵很多。 这里我们先介绍下 帧动画的一些常用方法 后面的我们再讲解一些时间轴动画的使用方法。 首先在CS6 中调用帧动画 是在  菜单栏上 选择 窗口    一般来说 我们只要使用默认的基本功能 就会有动画的面板  其实帧动画与时间轴是放在一起的 所以窗口那边把时间轴勾上 一样可以出现。    创建动画 有两种模式 一种是 时间轴 （需要 Extended  版本） 另外一种就是 帧动画 这次我们先将帧动画。    我们点击创建帧动画    在动画面板中我们可以看到这些设置 这里的小图片就是每一帧的预览画面 下面有一排操作按钮 左下角的 是转换为时间轴模式 注意这个是不可逆的操作 然后是 一次 这个是预览动画的播放次数 我一般都是设置为永久 也就是不停的循环播放。 接着是一些类似 播放器的按钮 跟放电影的类似 后退 后退一帧 播放 快进等 过渡帧按钮:这个主要提供 位置在起始帧和结束帧之间均匀地改变图层内容在新帧中的位置。 不透明度在起始帧和结束帧之间均匀地改变新帧的不透明度。 效果均匀改变起始帧和结束帧之间的图层效果的参数设置。这三种不同的过渡效果 很有用的一个功能 下面我会讲到的。 创建帧按钮 这个可以创建新的帧 也可以对已有的帧进行复制（先选中帧 然后点击按钮即可）    在 动画面板 右边还有一些扩展的菜单 功能挺多的 自己摸索下吧 这里就不多介绍了。

cxm13

帧动画模式 扫光制作

这里介绍 勋章的帧模式 制作光条 下面是完整的操作过程 大家可以先看看 有疑问的 我下面会详细介绍

详细介绍

论坛的勋章格式为 35 × 35 像素的大小 我们这里按这个大小创建一个新的文档 记得底色要透明的 可以按上图所示创建    这里主要是演示光条的制作 我直接拖入一个已有素材 这里用 mio吧 节省大家时间    图片有点小 可以按着 Ctrl 键的同时 点击 小键盘上的 + 号 放大图片    点击图层的右下角 创建新的图层按钮    这里使用选区矩形工具 画一个长方形的选区    使用填充工具 填充选区为白色    这里按 Ctrl + D 快捷键 取消选区    按着Ctrl键 使用鼠标点击图层面板中的 mio图层 这样可以快速的选中可视部分。 这里我们需要给光条添加蒙版 加蒙版的目的是让光条只在 mio的头像上显示 不会干扰到其他部分。    选中光条图层 点击图层面板下的添加蒙版    这里记得把蒙版与图层之间的连接去掉 因为我们是想保持光条只在头像上移动 不取消的话 蒙版会跟着一起动  效果会很乱    添加好面板后 我们按着 Ctrl + T 自由变换图层 这里增加高度为 200%  同时旋转为 45度 这个度数看大家喜欢吧    光条弄好了 但你会发现光条很硬 不太和谐 我们可以选择使用滤镜 高斯模糊 来柔化光条。    如果觉得光条太亮的话 可以调整不透明度    弄得差不多后 我们可以开始创建帧动画。    先把光条挪动到左上角    我们点击动画面板中的复制帧 拷贝一个新帧出来    选中新帧 将光条沿着对角线移动到右下角 这里可以注意 鼠标上的数值 X 与Y相等的话 就是沿对角线移动的。 同时选中两帧 点击动画面板上的过渡帧    如图所示设置 这里创建8帧 主要是考虑到 每秒 10帧 如果需要更加平滑的效果 可以选择更多帧数 同时图片也会越大。 创建好后 我们调整下每帧的时间 这里建议每帧0.1秒 这样兼容性最好。

cxm13

帧动画模式 星星制作

这里使用帧动画的模式 画个闪闪发光的星星 大家可以先看动画 后面我会详细介绍

详细介绍

这里我们使用铅笔工具 画一个 十字    这里就随便整个 十字吧 这时你会发现有点单调 我们需要添加一些过渡 在中间加几个点    这样的星星有点样子了 但你会发现这种形象很生硬 给人的感觉不太好 我们可以使用橡皮工具对其进行擦除，这里我们只用降低不透明度 别那么显眼就可以了 所以我们的橡皮要20 -50%左右的不透明度 同时橡皮的画笔要软，自己调整下软硬吧。    星星画得差不多了 开始创建帧动画 复制几个帧 我们设定星星的渐变 从 0 到 50% 到100% 的不透明度 慢慢变化    这里设置 0 50% 100% 这样的一个逐渐变量的星星    消失也是 100%  50% 0 这样变化 设置一下每帧的时间

cxm13

帧动画模式 物体旋转制作

使用帧动画模式制作旋转的效果 其实原理很简单 就是复制多个图层 然后不停的旋转图层即可了 大家先看看下面的过程吧 关键的地方我会列出来的。

详细介绍

这次我随便选择了一个图形 原来都是类似的 主要是演示效果 这种帧的旋转说吧就是复制多个图层 然后旋转而已 下面开始操作吧 我们选中图层1后 使用快捷键 Ctrl + J 复制图层    这时 你会发现下面的图层1 有点碍事 把它的可见性取消。    我们开始做旋转 按下快捷键 Ctrl + T 自由变换    逆时针的话 是 30 度 30度 这样的设定 一圈下来是需要 12帧 也就是我们需要重复12次的操作。 如果你需要顺时针旋转 就设定为 -30 这样的旋转吧 下面我们需要拷贝12次图层 和重复刚才旋转的操作 有点无聊 所以上面的动画 我加快了速度 当然这种重复的事情 你们自己可以创建一个专门的动作来 重复使用 时间关系 咱这里就不演示了 把需要的图层设定好后 我们开始创建帧 先把图层的可见性都拿掉吧 （除了第一帧）    点击动画区域的 创建帧按钮    我们选择好需要显示的图层 第二帧应该显示的是图层1 副本 同时把图层1 给隐藏掉。    后面又是重复操作了 不多说 自己看动画    完成后点击播放动画 看效果

cxm13

时间轴模式介绍

时间轴模式是 PhotoShop CS6 Extended 版中引入的新功能，一般版本的CS6 只有普通的帧动画模式，其实这种模式说白了就是关键帧的动画制作， 对于熟悉Flash动画的童鞋 应该不会感到陌生。 而作为 扩展版中才拥有的功能 无聊是效率还是功能上都不是普通的帧动画模式可以比拟的，个人是比较推崇这种模式来制作勋章，当然你需要一个 CS6 Extended 时间轴模式与帧动画模式的创建模式类似，我们可以通过动画面板下面的     按钮进行帧动画模式与时间轴模式之间的切换。 但需要注意的是 这种操作是不可逆的 万一误操作了 可以通过历史记录进行还原。

cxm13

时间轴模式 扫光制作

使用时间轴创建一条简单的扫光效果 思路跟帧动画的差不多 先做好光条 然后设置关键帧与时间。下面就开始吧

详细介绍

我们先创建一条光条吧 方法与帧动画那节差不多的，先用矩形选择工具 选出一个矩形来。    然后我们使用填充工具 （G） 在选区上填充白色    按着 Ctrl 键点击菲特的头像图层  可以快速的选中区域。 给光条添加模板 让光条只在菲特头像上显示 不会影响到别的区域。这里要注意将光条与蒙版之间的关联拿掉 否则蒙版会跟着光条一起动。 点击光条与蒙版之间的小按钮 取消关联    我们对光条进行自由变换  对其高度进行 200%的变化 以及顺时针旋转45度。    对光条使用高斯模糊 让光条更加的柔和    这时候我们可以开始创建时间轴动画了 点击创建时间轴动画按钮。    我们开始之前 需要先设置下 动画的帧数      由于很多浏览器的最小时间为 0.1秒 为了更好的兼容性 我们这里设置为 10fps    时间轴有点小比较难操作 我们这时可以点击下面的缩放按钮 对时间轴进行缩放操作。    这里咱多弄了一个组 有点碍事 点开就好 大家看情况吧    默认是5秒的长度  对于勋章来说太长了 这里为了测试 我一直弄1秒就好了。    我们开始准备创建关键帧了 这时我们将光条移动到左上角上。 光条位置设置好后 我们点击时间轴面板上面的图层 这里有设置位置的关键帧 我们只需要点击一下 就会设置好对应的关键帧。 将时间拖动到1秒的位置上。    我们拖动光条的位置到右下角 然后松开鼠标 在时间轴上他们就会自动创建一个位置的关键帧。       这时候我们点击播放按钮看看效果    就这样 时间轴的扫光动画就做好了

cxm13

时间轴模式 星星制作

这次我们使用 时间轴来制作几颗闪烁的星星 这里大家就可以发现时间轴的优势在哪里了 还是直接看动画吧

详细介绍

这次为了节省时间 我直接在上面的基础上来讲吧 我们新建一个图层 。    新建图层后 需要调整时间（咱很烦这个设定…………）    画星星 其实与上面的 帧动画做星星的类似  使用铅笔工具 画出星星的轮廓 我们再使用橡皮进行修改即可了。 这次画一个 7×7 像素的十字 并使用橡皮进行微调 使得星星 更和谐 好看    这里我选择将图层转换为智能对象，其实这个也是新增的功能 主要就是防止 改图层被修改后无法返回 这里暂时用不到什么特殊的效果 不过咱习惯了而已 大家也可以选择不转换 具体的功能下面会有介绍。    我们需要星星闪烁的效果 其实就是 不透明度的控制 展开星星图层 可以看到动画面板上有不透明度关键帧的设置项。 这次我在1秒中的时间点上 设置了一个不透明度为0的关键帧。    这里我拖动时间轴大概0.1秒的样子 设置不透明度为 100%      然后我再拖动时间轴 0.2秒 设置不透明度为0 这样闪烁的效果就出来了 闪烁的时间长度大家根据自己的喜好吧 时间轴模式调整这类的东西十分的方便 我们可以拖动时间轴看看星星的效果如何再做一些修改。 一个星星 感觉有点少 我这里直接将星星图层进行复制 注意这里不能使用快捷键 Ctrl + J 因为使用快捷键动画上的信息不会拷贝到新图层上 必须手动拖到复制按钮上才有 有点神奇。    复制过来后我们再设置 关键帧 我们需要将星星闪烁的时间往后一点与前面一颗星星区分开。 这里我们需要现在关键帧附近点击一下鼠标 这样会松开对关键帧的锁定 为啥要松开 ？ 上一个图层的关键帧也是保持锁定的 如果你直接操作会影响到上一个星星的设置。 松开后我们按着 Ctrl 键对关键帧进行选择 然后往后挪动一些    我们挪动时间轴到100%透明度的关键帧上 这样我们可以看清楚星星的样子 使用选择工具 将星星移动到别的区域    如果有需要 我们可以继续重复这个步骤 例子

cxm13

时间轴模式 物体旋转制作

还记得我吗上面使用帧动画模式制作的旋转吗？这里我使用时间轴模式再制作一次 你们会发现真的方便好多。 继续看教程动画吧

详细介绍

这里我创建了一个五叶草的形状  对于一般的图层我们发现只有 位置、不透明、样式 三种时间轴模式 如果我需要变换的话 那么这里就需要将图层转换为智能对象。 点击图层 右键专为智能对象 这里我们就发现原来的位置更改为 变换了 然后我们就可以进行下一步的操作。 在一秒左右的位置 我们按 Ctrl + T 对图层进行自由变换 设置旋转的角度为180度 也就是半圈 然后我们把时间轴拖到最后 再一次旋转 180度 这样这个形状就完成了 360度 也就是一圈的旋转。 当然你需要逆时针转的话 上面的参数调整为-180度即可 这里需要注意的 需要把关键帧拖到最后 否则会有停顿 最后看看效果 是不是比帧模式简单很多

cxm13

时间轴模式 流星效果制作

简单的思路 转为智能对象 然后使用变换关键帧 移动位置 并且旋转的复合效果 还可以添加一些渐变的效果

详细介绍

转为智能对象    设置关键帧    移动到左下角 并设置好旋转的角度    有点单调 我们再弄一个渐变的功能吧 设置下 不透明度的关键帧 大家可以看效果灵活的调整

cxm13

时间轴模式 蒙版的使用

一般我们使用蒙版是用来设置编辑的区域 而这里使用时间轴的蒙版关键帧 我们可以制作出 逐步显示消失的效果 这里我只是简单的做演示 原理理解了 大家可以尽情的发挥想象力去制作精美的勋章

详细介绍

我这里使用油漆桶 制作了一个全黑的蒙版（全黑即不显示） 后面我再设置一些移动的关键帧 就可以让图层逐步的显示了。    整体来说很简单 我就不罗嗦了

cxm13

时间轴模式 图层样式的使用

时间轴还可以设置图层样式的变化效果 这个做得好可以给我们带来很多丰富漂亮的特效 例如旋转光 彩虹变化 等等 具体的发挥自己的想象力 我这里只是简单的给一个例子 大家掌握门路后再自己发挥吧 这次演示的是一个渐变叠加的样式变化 主要是做旋转特效    内容很简单 大家看图即可 最后出来的就是这么一个效果

  

cxm13

预留楼层 备用

cxm13

预留楼层 备用

cxm13

预留楼层 备用

cxm13

有兴趣做勋章的同学可以一起交流 除了提高自己技术外 做勋章奖励还很丰厚

xialei_026

支持一下原创教程！

椛朶朶

好腻害

~天~

好強大 支持13姨 {:45:}

hua0114

13姨好腻害