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只动画一次就不动了),最后点击“存储”保存即可。
到此为止,动画已经制作完毕了,可以看看效果:点击查看