分享此网站可得100G教程,联系小洁领取点击这里给我发消息

ps制作简单的动画效果——播动的按钮

APP设计 学UI设计 637次浏览 0个评论

希望大家看教程的时候,多考虑下为什么这里这么做,以后工作中遇到类似的问题就可以解决了。

1.新建画布800*600px的画布

在画布中新建464px*232px的圆角矩形并命名为“底”。添加图层样式-颜色叠加#4bed90,复制这一图层,命名为“按钮”,填充颜色#ffffff,4px ¥dadbda的描边。都转换为智能对象。如图所示;

ps制作简单的动画效果——播动的按钮

2.做动效

在ps中打开窗口-时间轴-创建视频时间轴。

在圆的变换和底的样式00帧处打上关键帧,移动时间轴线(红色线)于两秒处打上关键帧。且改变圆移动至左边之后的效果。如图所示;为了效果好看,我们在起始帧和结束帧中间,透明度插入一个关键帧,调整按钮的透明度为50。

ps制作简单的动画效果——播动的按钮

那么这样第一步最初的一个动作实现了,接下来就是考虑如何让圆移动至左边后再自己移动至右边且按钮颜色发生变化。

起始这一步也是很简单的,复制前面所做的关键帧粘贴,这里有一个注意的地方是,时间轴线必须移动至在前面所做的关键帧后面。这样就是一个完整的动画效果。如图所示;

ps制作简单的动画效果——播动的按钮

接下来剪切掉多余的时间,如图;

ps制作简单的动画效果——播动的按钮

现在可以播放看一看了,但有一个问题是,不循环播放。那么可以点击播放按钮后面的设置按钮,设置为循环播放。如图;

ps制作简单的动画效果——播动的按钮

现在基本的都做完了,就是怎么导出的问题。

同时按住ctrl+shift+alt+s,存储为web所用格式。预设为GIF格式,循环选项为永远。如图;

ps制作简单的动画效果——播动的按钮

这个播放按钮的动画教程就结束啦!大家可以去练习下吧。如果你很爱学习,可以学一下AE,比ps实现的效果要好一些。

ps制作简单的动画效果——播动的按钮谢谢大家!

 


推荐:查看最受欢迎的设计导航网站 → http://www.xueuisheji.com

交流:结交更多有才华的设计师?请加入UI设计QQ群 ,与设计师交流设计。

喜欢 (0)
[关注:设计军团]
分享 (0)
关于作者:
学UI设计网专业的UI设计师交流、学习与展示的平台。我们将打造中国最专业的UI设计交流平台,为UI设计师做最好的职业生涯一站式服务,提高UI设计乃至互联网设计的行业价值!