程序猿
讲互联网的故事

如何用Photoshop制作简单的gif动画 替代Flash

Safari、Chrome、Firfox,每次打开有flash的网页都显示几个大空白(手动允许flash操作才能正常显示),实在让人无奈,而且随着Adobe公司的战略部署,flash从我们的视野中逐步淘汰已成定局,在网站制作过程中偶尔需要一些动态的banner图和网站头图,利用Photoshop快速制作可以完美代替flash的动画是个不错的选择。本文以mac系统下Photoshop CC 2018版本为例简单记录下制作gif动画的步骤(其他老版本大同小异):

1、启动PS软件,把相关的图层、文字创建好(就是动画里要用的那些素材)

本例中,我想做一个背景横向滚动的效果,从网上下载了一个banner背景,然后复制一份,和之前的那个背景图层横向拼接起来,合并图层后就是一个2倍宽度的背景,另外还写了两段文字装饰在背景上。

2、点击“窗口”菜单,把“时间轴”的选项打上对勾(老版本中好像叫做“动画”), 底部就显示出“时间轴”的控制面板,可以创建“帧动画”和“视频”,我们选择创建“视频”动画(显示效果如下图)。

3、从上图可知,我们在Photoshop里制作的图层被显示到“时间轴的窗口”,每个图层最左侧都有一个大于号”>”,点开它可以看到“位置”、“不透明度”、“样式”三个处理条件。

首先:看到红色那条线了吗?默认是在时间轴的开始位置,我们先让他在那里呆着。

接下来:点击背景图层左侧的大于号展开选项,依次点击“位置”前的时钟图标和菱形图标(相当于在时间轴开始位置创建了一个关键帧)。

然后:把那条红线移动到时间轴结尾处。

再然后:依次点击“位置”前的时钟图标和菱形图标(相当于在时间轴结束位置也创建了一个关键帧)。

最后:把之前左对齐的背景(就是2倍画布宽度的那个背景)图层移动到最右端右对齐。(相当于创建了一个flash里的传统补间动画)

到此为止,简单的让背景平移的gif动画就已经做好了,点击时间轴左上方的播放按钮就能看效果。还可以像flash里调整帧速率那样调整速度,值越小,速度越快,点击时间轴右上方的图标展开菜单就能看到调整速率的地方。

最后,我们要导出(保存)这个gif,在低版本的Photoshop里,文件菜单里有一个“存储为Web所用格式”,直接点击即可,在Photoshop CC 2018里,这个选项被移入到“文件”下的“导出”菜单里(如下图)

点击“存储为Web所有格式”后弹出一个窗口,右上方选择保存为gif格式,右下方选择永久循环(不然gif只动画一次就不动了),最后点击“存储”保存即可。

到此为止,动画已经制作完毕了,可以看看效果:点击查看

打赏一下

评论 抢沙发

觉得文章有用就打赏一下博客作者

支付宝扫一扫打赏

微信扫一扫打赏