Photoshop时间轴动画开发与应用

Photoshop时间轴动画的开发与应用
摘要：本文主要研究的是photoshop时间轴动画，通过本文的学习，可使初学photoshop的朋友快速的掌握photoshop动画制作基本功能，以及在photoshop中如何使用时间轴功能编辑gif动画的基本技巧。

关键词：网幅广告；banner；photoshop；时间轴动画
中图分类号：tp317.4文献标识码：a文章编号：1007-9599 （2013）06-0000-02
banner广告是网站赢利的一种形式，banner是位于网页顶部，中部，底部任意一处，但是横向贯穿整个或者大半个页面的广告条。

是互联网广告中最基本的广告形式，尺寸是480*60像素，一般是使用gif格式的图像文件，可以使用静态图形，也可用多帧图像拼接为动画图像。

banner一般翻译为网幅广告、旗帜广告、横幅广告等。

gif格式的图像文件是在网页上常常看到的一种动画形式，画面活泼生动，引人注目！不仅可以吸引浏览者，还可以增加关注点击率。

gif文件的动画原理是，在特定的时间内显示特定画面内容，不同画面连续交替显示，产生了动态画面效果。

gif图形文件，也就是一个包含两张以上独立gif图形文件或frame（帧）的文件。

每一帧均设定了画面播放时间与播放次数。

一般情况下，banner的大小不要超过30kb，否则会增加网络负担。

banner广告效果：
制作过程分析：
1画面1的准备
1.1新建468px×60px，白色画布
通常情况下banner的尺寸是：
468*60全尺寸banner；
392*72全尺寸带导航条banner；
234*60 半尺寸banner。

1.2拖入素材“标志”，如图1-1所示。

1.3设置前景色#00ff60，选择“自定义形状工具”中的“花1边框”，绘制如下图所示形状，并设置图层样式投影（默认参数），如图1-2所示。

图1-1拖入“标志”图片图1-2花边框效果
1.4设置前景色#d47802，选择“圆角矩形工具”，绘制如下图所示形状，点选择样式面板中的“雕刻天空”，隐藏样式中的渐变叠加样式，如图1-3所示。

1.5输入白色，“微软综艺体”的文字“新用户即赠券”，设置前景色为黑色，再次输入相同的文字，将该层文字向上向左一次，将二个文字图层及形状合并，如图1-4所示。

图1-3形状效果图图1-4添加文字
1.6导入素材文件“宣传”、“鞋1”、“鞋2”，如图1-5所示。

2画面2的准备
2.1隐藏“鞋1”、“鞋2”层，设置前景色# eaf47a，选择“矩形
工具”绘制如图2-1所示。

图1-5效果图图2-1矩形形状
2.2选择文字工具，输入“春夏新品女鞋”、“满298送80”，设置图层样式描边，如图2-2所示。

图2-2文字效果
3动画制作
3.1选择【窗口∕动画】，在动画面板中点选右下角的“时间轴”按钮。

3.2点击“时间轴”面板的右上角按钮，在弹出的菜单中选择“文档设置”，设置持续时间7秒。

3.3在图层中显示“背景”、“标志”、“花边框”、“新用户即赠券”图层，其他图层隐藏，在“时间轴”打开“新用户即赠券”点选不透明度，在起始位置添加关键帧，设置图层不透明度0%，将时间指针移到01：00f设置图层的不透明度为100%，交替在02：00f、03：00f、04：00f、05：00f添加关键帧，变化图层的不透明度。

注意在这里点击某个项目的秒表按钮后，该项目就会在时间标杆处建立一个关键帧，并自动跟踪该项目在其他时间范围中的变化。

这就意味着如果将时间标杆移动到一个新位置，并对图层的该项目上做出了更改后，将会自动在当时标杆处建立一个新帧。

3.4显示“新疯抢”图层，点开时间轴上的“新疯抢”，选择“位置”在“00”上添加关键帧，在图层中将“新疯抢”图像向上移动到看不到它，移动时间指针到“05：00f”添加关键帧，并将“新
疯抢”图像向下移动到合适的位置。

3.5显示“鞋1”层，如上面的原理，我们把此图像在“00：00到03：00”这个范围内设置成“从右向左”移动，“05：00到05：15f”这个范围设置不透明度从100%到0%，如图3-1。

图3-1图层效果
3.6显示“鞋2”层，如上面的原理，我们把此图像在“03：00到05：00”这个范围内设置成“从右向左”移动，“05：00到05：15f”这个范围设置不透明度从100%到0%，如图3-2。

图3-2图层效果
3.7显示“形状4”层，如上面的原理，我们把此图像在“05：00到07：00”这个范围内改变不透明度，从0%到100%。

3.8显示“春夏新品女鞋”、“满298送80”图层，我们把此图像在“05：00到07：00”这个范围内改变不透明度，从0%到100%。

3.9选择[文件∕存储为web及设备所用格式]，我们可以预览一下，通过帧速率调整动画的快慢，比如本例中，我们可把帧速率改为10fps，如图3-3所示。

然后生成“网幅广告.gif”。

图3-3“文档时间轴”设置
帧速率是什么呢？它起到什么作用呢？
帧速率也称为fps（frames per second）的缩写——帧/秒。

是指每秒钟刷新的图片的帧数，也可以理解为图形处理器每秒钟能够刷新几次。

对影片内容而言，帧速率指每秒所显示的静止帧格数。

要生成平滑连贯的动画效果，帧速率一般不小于8；而电影的帧速
率为24fps。

捕捉动态视频内容时，此数字愈高愈好。

利用时间轴来制作动画，这种方式直观简便，时间轴式动画的基本特性就是将各个动画项目独立出来，对其中一个项目的修改并不会影响其他项目。

比如我们在修改“透明度”的时候就不需要去考虑早先设定好的“位置”。

另外就是各项目的关键帧设定允许不相同，不必为了统一关键帧数量再花费心思。

时间轴方式不仅制作速度快，且修改极为便利。

参考文献：
[1]杨华.photoshop cs5创意实训教程[m].北京：科学技术文献出版社，2012.
[2]刘国兰，胡惠娟.高职photoshop课程教学方法的改革与实践[j].计算机教育，2010，4.
[作者简介]杨华（1973.3-），女，汉族，牡丹江人，黑龙江林业职业技术学院，教师，副教授，研究方向：平面设计与动漫。