PS设计教程网欢迎你!

Photoshop制作网页加载动画教程(3)

文章来源于 SDC翻茄匠,感谢作者 TAT.sheran 给我们带来经精彩的文章!
设计教程/PS教程/动画教程2013-02-18
注:其中投影的样式是默认的样式,无需修改 12、 给shape1图层添加的样式属性和shape图层完全相同的样式,但是外发光样式除外(这里shape1图层不需要添加外发光样式) 13、对图层shape2的修改如下: 14、对shape3的修

注:其中投影的样式是默认的样式,无需修改

12、 给shape1图层添加的样式属性和shape图层完全相同的样式,但是外发光样式除外(这里shape1图层不需要添加外发光样式)

13、对图层shape2的修改如下:

Photoshop制作网页加载动画教程

Photoshop制作网页加载动画教程

14、对shape3的修改如下:

Photoshop制作网页加载动画教程

Photoshop制作网页加载动画教程

15、最后结果如下

Photoshop制作网页加载动画教程

,这里样式可以自由发挥,仅供参考

16、按照以下左图把下面5个图层合成组(ctrl+G),然后复制整个组再按ctrl+T让其旋转45°,后面复制同理(注意,tirck3是在复制 tirck2的基础上再旋转的45°,以此类推)

Photoshop制作网页加载动画教程

Photoshop制作网页加载动画教程

17、最后做成动画,步骤如下:

1> 选择动画属性:

Photoshop制作网页加载动画教程

2> 创建新图层:

Photoshop制作网页加载动画教程

,这里每帧对应需显示的组,其它组则需隐藏。

例如下图所示:第2帧对应下面显示了trik2的组,但是其它组都需要隐藏,以此类推

Photoshop制作网页加载动画教程

18、最后保存:文件——

Photoshop制作网页加载动画教程

最终结果如下所示

Photoshop制作网页加载动画教程

总结:知道gif动画的初步制作原理后,以后为我们制作逐帧动画也奠定了一定基础!

进入论坛交作业:http://www.missyuan.com/viewthread.php?tid=630639

版权所有PS设计教程网公安备案:苏公网安备 32058302001023号工信部备案:沪ICP备09005587号
aaa