当前位置:首页 > PS教程 > 网页设计

PS网页GIF动画广告设计

  • 2022-12-24 19:35:09
  • 来源/作者:互联网/佚名
  • 己被围观

ps教程新春大礼包——18章巨献 作者:薛欣姚辉 12.3精彩实例 12.3.1网页GIF动画设计 下面我们就来通过一个实例讲解一下GIF动画的制作过程。 1.首先我们启动ps,选择【文件】,【新建】如图12-3-1所示。再弹出的【新建】对话框中,我们输入它的名称以及画布的宽和高。如

7.那这时的图像仍然是不会动的,现在我们通过对图层的隐藏为其添加动画效果。我们先来选中第一帧,然后在图层面板中点击图层前面的小眼睛按钮将图层1、2隐藏,如图12-3-8。

PS教程大礼包-第12章网页设计中的应用(三)

图12-3-8

8.然后我们选中第2个以及第3个动画帧,对其进行同样的操作。完成后,我们点播放进行一下预览,那这样一个简单的帧切换动画我们就创建好了。我们还可以在图层之间添加一些渐变的效果,我们选中第1帧(要注意的是我们要为第一帧添加渐变,在图层中我们也要选中第1帧所对应的图层)。单击PS教程大礼包-第12章网页设计中的应用(三)过渡动画帧按钮,出现了过度的对话框,如图12-3-9所示。

PS教程大礼包-第12章网页设计中的应用(三)

图12-3-9

9.这里我们可以对其进行过度的设置,比如:过度的方式、需要过度的帧数等等。我们点确定。这样第1帧的过度动画我们就添加成功了,我们可以选中其中一个帧看下过度的效果,如图12-3-10所示。

PS教程大礼包-第12章网页设计中的应用(三)

图12-3-10

10.同样对于其他2帧我们也可以使用同样的操作。设置完后,我们再新建2个图层填充为粉红色和白色,如图12-3-11所示。新建图层的同时我们也要再动画面板中为其添加动画帧。如图12-3-12所示。

PS教程大礼包-第12章网页设计中的应用(三)

图12-3-11

PS教程大礼包-第12章网页设计中的应用(三)

图12-3-12

11.我们对14和13帧进行复制,如图12-3-13所示。那么这一步的目的是使两个不同颜色的图层进行互相切换,起到一个闪烁的效果。

PS教程大礼包-第12章网页设计中的应用(三)

图12-3-13

12.闪烁效果设置完以后,我们将图层2对应的动画帧拖到最后最为动画结束帧。最后我们设置动画的延迟时间以及播放的次数,如图12-3-14所示。我们设置成0.2秒,闪烁部分我们设置成0.1,最后结束帧我们设置为1。

PS教程大礼包-第12章网页设计中的应用(三)
图12-3-14

13.完成后,我们就可以预览了。预览无误,我们就可以进行最后的输出了。选择【文件】,【存储为web和设备所用格式】,弹出对话框如图12-3-15所示。

PS教程大礼包-第12章网页设计中的应用(三)

图12-3-15

14.我们对预设进行一下设置,各参数设置如图12-3-16所示。

PS教程大礼包-第12章网页设计中的应用(三)

图12-3-16

点【存储】,选择文件保存路径,选择【保存】,这样一个网页中GIF的动画就制作完成了。

最终效果:

*PSjia.COM 倾力出品,转载请注明来自PS家园网(www.psjia.com)

更多精彩内容

  • APP展示图,教你怎么用PS制作APP的界面图片 APP展示图,教你怎么用PS制作APP的界面图片
  • 用ps制作大拇指胜利手势logo 用ps制作大拇指胜利手势logo
  • 用ps制作金属质感徽章 用ps制作金属质感徽章
  • 用ps制作绿色环保Logo 用ps制作绿色环保Logo
  • 用ps制作放大缩小logo 用ps制作放大缩小logo
  • ps cs6设计火箭UI图标 ps cs6设计火箭UI图标
  • 教你用PS打造网页效果图全过程 教你用PS打造网页效果图全过程
  • 进度条,设计一个彩色进度条 进度条,设计一个彩色进度条