【新手向基础教程】利用PS视频时间轴制作动图

假面君 · 发表于 2016-2-2 16:38:47

鉴于最近徽章板块略显冷清，加上论坛刚刚重新调整完毕，我想是时候写个教程来让更多的人跳坑一起制作徽章了


本教程为使用Photoshop中的视频时间轴功能来制作gif的基础入门级教程，主要用于介绍制作gif的最最基础的方法，适合想做徽章又苦于不会制作动图的小伙伴。看完本教程你会学会视频时间轴的基本操作，然而想要做出精美好看的徽章，还是需要研究一下其中的细节。进阶的某些效果如果大家感兴趣假面君有时间可以再开个帖子把我会的教给大家。

其实ps制作gif主要有两种方式：帧动画与视频时间轴，之所以选择视频时间轴是因为假面君觉得它真的很方便~~以及我不会用帧动画！~~


首先，制作徽章需要的材料：
1.Photoshop CC
（Photoshop的其他版本应该也有视频时间轴功能，因为我用的是CC版本，所以其他版本的情况不太了解，总之带视频时间轴功能的PS就可以啦）

2.制作徽章的素材图片
（需要大家自己去搜集，如果自带大触属性就更完美了）

3.关于徽章动态的创意

打开PS之后我们先来看一下界面
黄色框框的区域是主界面，也就是我们修改素材图片的地方
红色框框的区域是视频时间轴区域，导入图片后这里就会显示为时间轴了
蓝色框框的区域主要是操作区，个人习惯把历史记录和图层显示在这里
左侧未框选部分为工具区，实际上只是修改动图的话，工具用的并不多，所以就先不介绍了。
进入PS后默认的界面是没有下方的视频时间轴区域的，需要点击右上角的下拉菜单，选择【动感】，才会有显示。

然后用PS打开要编辑的素材图片，这里我就随便选了一个图片作为示范。

由于我们的徽章大小限制为宽*高=40*43，所以在左上方先新建一个40*43大小的文件，将素材图片拖动过去。

拖动结束新建文件应该是酱婶儿的↓

因为原图太大，我们的徽章大小显示不全，所以要先缩放一下。
使用快捷键Ctrl+T可以使用自由变换功能，即随意改变图层的大小。
你会发现多出来一个框框，拖动框框四角或者边界就可以修改图片大小。
这里记得按住Shift再进行拖拽，可以保持图片原比例缩放。
另外Ctrl加+或者- 可以缩放图片视图大小。如果你觉得40*43的像素太小无法看清，请记得缩放视图。

缩放完成的图片就变成了酱婶儿的↓，因为将原本的图片放大了很多倍，所以现在满屏幕都是马赛克。不过不要紧！等我们全修改完成图片还会是美美哒！

基本素材修改完毕我们就可以开始创建视频时间轴了，注意从现在开始要进入制作动画环节。
现在下方应该是一片空白，只有一个按钮，没错那就点下去。

创建完成的视频时间轴是酱婶儿的↓
其中的基佬紫部分代表整个动画的长♂度，当然长度越长动画帧数就越多，占用空间就越大。一般做我们徽章用不了这么长的进度条，基本上把它缩到1/3就够用了。
每一条时间轴代表了一个图层，你的所有修改只会反映在当前选中的图层上。

太♂长了我们论坛君会被玩坏的，所以大概这么长就够了。
箭头指向的地方可以拖动显示比例，也就是它还是这么♂长，但是给你个放大镜让你去看的清楚点

视频时间轴的左侧是每个图层可以修改的菜单选项，点击图层名旁边的三角形可以将其展开

此处我们可以看到三个可修改选项，位置，不透明度，样式，这三个选项是最简单也是最常用的动画进行方式。

介绍他们之前我们要先说一下动画的基础。

相信大家大学的计算机课都学过，帧动画是由关键帧和过渡帧组成的。

关键帧就是图片改变最关键的节点，其他帧都是过渡帧。

虽然视频时间轴与帧动画看起来形式完全不同，实际上它们都一样是在我们修改关键帧的基础上，由PS自动完成过渡帧的填充的。

所以其实我们的任务就是把动画变化的关键节点标出来，其他的教给PS完成就好啦。

要让图片动起来，首先我们要先想好它开头结尾应该是什么样子的，然后给它的开头结尾分别添加上关键帧之后修改就可以了。

点击位置旁边的空心时钟，点击之后会变成实心的，这代表修改位置相关的关键帧功能已经启用。
点击左侧的黄色按钮，你会发现在时间轴上红线的位置多出来一个黄色标记，这就是这个动画起始的关键帧，也就是说，现在你的素材图片什么样，你最后的动画开始就什么样子。

同理在结尾处再添加一个关键帧，现在你的动画就有了开头和结尾。虽然现在它的开头结尾是完全一样的，不过一会就不一样了。

那么首先我们来试一下修改位置。
起始的关键帧不变，选中结尾的黄色标记，并把红线进度条拖到此处，代表这一帧是目前被激活的帧。
仍然使用拖拽工具将图片随便拖到一个其他位置，然后点击播放。

你的图片应该已经动起来了，很简单吧。
修改位置，顾名思义，一般用于制作物体的平移，抖动，摇晃等效果。

来看第二个选项不透明度。

同样在开头结尾添加两个关键帧，这次要修改的是不透明度。不透明度100%代表图片完全显示，0%代表图片完全消失。所以把结尾处的不透明度修改为0%，开头为100%，就会出现一个渐渐消失的效果了。

图层的不透明度在这里修改

完成的效果就是酱婶儿的↓
我的两个关键帧间隔比较短，所以看起来像是个闪烁的效果。将关键帧之间的距离拉长将会产生不同的效果。

第三个选项是样式。PS的样式就姑且理解为图层的一些特效吧，因为我也不造怎么解释。

样式的菜单在右下角

点击这个fx按钮会出来一个下拉菜单，里面有很多的样式，每一个还有很多可调节的选项。至于每一个样式有什么效果大家有时间可以慢慢研究。

这里就先选择外发光作为范例。

仍然在结尾处的关键帧选择外发光，又会出来一堆选项，不过现在你已经可以看到图片效果的变化了。外发光是给图层外侧添加一圈类似发光的效果，顾名思义，制作发光的物体动态就可以使用它了。

如果有兴趣可以尝试修改一下发光颜色和大小，之后点击确定。
点击播放后你的图片大概是这么个效果。

这就是PS视频时间轴制作的三种最基础的变化，当然在实际徽章的制作过程中可能要同时用到它们的组合形式，这样可以创作出更加复杂的效果，比如一边飞行一边消失之类的。

另外视频时间轴还可以制作更复杂一点的变化，也就是缩放和旋转。

首先在时间轴上单击鼠标右键，你会看见这样一个菜单。

选择下拉菜单中的缩放，你会看见视频时间轴变成了这样。

下方的【调整大小以填充画布】记得不要勾选！

原本【位置】的位置变成了【变换】，时间轴下方也出现了一条红色的进度条。这代表着时间轴已经从原本的基础形态进化为了更加智能的高级形态！连关键帧标记都变成了红色，感觉很厉害的样子呢。

总之现在我们可以进行旋转和缩放的变化了。由于【变换】是一种高级形态，所以它包含了原本的【位置】，也就是说，在【变换】状态下，你可以同时修改图片的位置，大小，旋转角度等等状态。所以其实刚刚的菜单选择【缩放】还是【旋转】还是【平移+旋转】都是一样一样的。

仍然在开头结尾创建两个关键帧，点击结尾处的关键帧进行修改。

还记得Ctrl+T自由变换吗，它可以任意改变图层的大小，位置，旋转角度。真是好用得不要不要的。

在这里自由变换下的框框是酱紫的

把它随便调节一下，换个位置，转个角度等等，之后点击播放，你会看到大概酱婶儿的效果↓



啊，真是一个调皮的素材。

以上就是Photoshop视频时间轴制作动图的基本操作了。设定好你的动画，然后加上适当的背景，一个徽章就出来了。当然如何用这些基础的功能完成你想要的效果就需要动一番脑筋了。

徽章制作结束之后记得要保存。点击左上方的【文件】选项，选择下拉菜单中的【储存为web所用格式】

储存gif的界面是酱婶儿的。其他的都不用看，只有红框处一定记得修改为【永久】，不然你的动画播放一次就停止噜。

好了，本次教程到此结束。欢迎大家一起来讨论学习~~最好再教我点黑科技~~。徽章板块等着大家来投稿哟

来自群组: GameMale管理部门