您好,欢迎来到飞天资源论坛!登录立即注册QQ登录

飞天资源论坛



坑坑大人 发表于 2013-6-24 11:47:15 | 显示全部楼层 |阅读模式
教程发布
教程来源: 源自网络
教程作者: 坑坑大人
教程格式: 图文教程
版权归属:
下载地址:
下面就step by step 教大家如何设计一个loading.gif的加载动画图:
先看效果图: PS教程,教你用Photoshop创建自己的loading.gif动画 ps动画/文字/滤镜教程 ,预览图1
1、创建一个图层100×100 PX,背景颜色#2d2d2d
PS教程,教你用Photoshop创建自己的loading.gif动画 ps动画/文字/滤镜教程 ,预览图2
2 、在背景文件上用直线工具绘制一条1px的白色纵线:
PS教程,教你用Photoshop创建自己的loading.gif动画 ps动画/文字/滤镜教程 ,预览图3
注意,这条直线要水平居中对齐,具体方法如下:
同时选中这两个浮层:
PS教程,教你用Photoshop创建自己的loading.gif动画 ps动画/文字/滤镜教程 ,预览图4
点击排列方式中的‘水平居中对齐‘图标:
PS教程,教你用Photoshop创建自己的loading.gif动画 ps动画/文字/滤镜教程 ,预览图5 3、选择直线图层,用命令行Control+ T对直线旋转45°
PS教程,教你用Photoshop创建自己的loading.gif动画 ps动画/文字/滤镜教程 ,预览图6 PS教程,教你用Photoshop创建自己的loading.gif动画 ps动画/文字/滤镜教程 ,预览图7
4 、选中变换后的直线浮层,用快捷键Control + Alt + Shift + T复制旋转该直线到如下效果:
PS教程,教你用Photoshop创建自己的loading.gif动画 ps动画/文字/滤镜教程 ,预览图8
5 、创建一个1px半径的圆角矩形,如下图所示,这里加上参考线是为了更好的让圆角矩形与直线都水平居中
PS教程,教你用Photoshop创建自己的loading.gif动画 ps动画/文字/滤镜教程 ,预览图9
6、对圆角矩形进行变形,如下所示:
PS教程,教你用Photoshop创建自己的loading.gif动画 ps动画/文字/滤镜教程 ,预览图10
这里变形方法是先对圆角矩形Control  + T,到变形状态后,然后点击鼠标右键,出现下图所示的菜单,然后选择’斜切’属性,
即可变换左下和右下两个点
PS教程,教你用Photoshop创建自己的loading.gif动画 ps动画/文字/滤镜教程 ,预览图11
7、移动中心点,具体如下:
把中心点移到如下位置PS教程,教你用Photoshop创建自己的loading.gif动画 ps动画/文字/滤镜教程 ,预览图12
如果中心点直接移不动,试试这样把中间的小黑点PS教程,教你用Photoshop创建自己的loading.gif动画 ps动画/文字/滤镜教程 ,预览图13移动到PS教程,教你用Photoshop创建自己的loading.gif动画 ps动画/文字/滤镜教程 ,预览图14 下面,那么中心点就可以随意移动了
8、选中7步变形后的圆角矩形用快捷键,Control + Alt + Shift + T,使其形式如下:
PS教程,教你用Photoshop创建自己的loading.gif动画 ps动画/文字/滤镜教程 ,预览图15
目前整个图层的布局形式如下:
PS教程,教你用Photoshop创建自己的loading.gif动画 ps动画/文字/滤镜教程 ,预览图16
9、给‘形状2’增加一些样式,打开图层——图层样式:
这里的颜色值是:#242424
PS教程,教你用Photoshop创建自己的loading.gif动画 ps动画/文字/滤镜教程 ,预览图17
最后的效果要如下:
PS教程,教你用Photoshop创建自己的loading.gif动画 ps动画/文字/滤镜教程 ,预览图18
10、 复制上图,然后删除一些叶片,使其如下所示:
PS教程,教你用Photoshop创建自己的loading.gif动画 ps动画/文字/滤镜教程 ,预览图19
删除叶片的方法:
PS教程,教你用Photoshop创建自己的loading.gif动画 ps动画/文字/滤镜教程 ,预览图20
用删除苗点工具
11、给shape浮层加如下所示样式
PS教程,教你用Photoshop创建自己的loading.gif动画 ps动画/文字/滤镜教程 ,预览图21
PS教程,教你用Photoshop创建自己的loading.gif动画 ps动画/文字/滤镜教程 ,预览图22
PS教程,教你用Photoshop创建自己的loading.gif动画 ps动画/文字/滤镜教程 ,预览图23
注:其中投影的样式是默认的样式,无需修改
12、 给shape1图层添加的样式属性和shape图层完全相同的样式,但是外发光样式除外(这里shape1图层不需要添加外发光样式)
13、对图层shape2的修改如下:
PS教程,教你用Photoshop创建自己的loading.gif动画 ps动画/文字/滤镜教程 ,预览图24
PS教程,教你用Photoshop创建自己的loading.gif动画 ps动画/文字/滤镜教程 ,预览图25
14、对shape3的修改如下:
PS教程,教你用Photoshop创建自己的loading.gif动画 ps动画/文字/滤镜教程 ,预览图26
PS教程,教你用Photoshop创建自己的loading.gif动画 ps动画/文字/滤镜教程 ,预览图27
15、最后结果如下
PS教程,教你用Photoshop创建自己的loading.gif动画 ps动画/文字/滤镜教程 ,预览图28
,这里样式可以自由发挥,仅供参考
16、按照以下左图把下面5个图层合成组(ctrl+G),然后复制整个组再按ctrl+T让其旋转45°,后面复制同理(注意,tirck3是在复制 tirck2的基础上再旋转的45°,以此类推)
PS教程,教你用Photoshop创建自己的loading.gif动画 ps动画/文字/滤镜教程 ,预览图29
PS教程,教你用Photoshop创建自己的loading.gif动画 ps动画/文字/滤镜教程 ,预览图30
17、最后做成动画,步骤如下:
1> 选择动画属性:
PS教程,教你用Photoshop创建自己的loading.gif动画 ps动画/文字/滤镜教程 ,预览图31
2> 创建新图层:
PS教程,教你用Photoshop创建自己的loading.gif动画 ps动画/文字/滤镜教程 ,预览图32
,这里每帧对应需显示的组,其它组则需隐藏。
例如下图所示:第2帧对应下面显示了trik2的组,但是其它组都需要隐藏,以此类推
PS教程,教你用Photoshop创建自己的loading.gif动画 ps动画/文字/滤镜教程 ,预览图33
18、最后保存:文件——PS教程,教你用Photoshop创建自己的loading.gif动画 ps动画/文字/滤镜教程 ,预览图34
最终结果如下所示PS教程,教你用Photoshop创建自己的loading.gif动画 ps动画/文字/滤镜教程 ,预览图35
总结:知道gif动画的初步制作原理后,以后为我们制作逐帧动画也奠定了一定基础!如有表述不对是我地方可以给我留言哦~\(^o^)/~

飞天资源论坛 - 温馨提示
1.为保证您的问题能够及时解决,如有任何问题,请直接到【问题互助 】平台提问,切勿在发布帖提问,因为有时候会看不了那么多回复;
2.论坛压缩包请用WinRAR5.2以上版本解压,本站默认解压密码为 http://feitianwu7.com 或者 feitianwu7.com 复制粘贴时前后不能有空格!
3.您的真诚回复是对楼主最大的支持与鼓励,也方便我们了解您所喜欢的资源类型;严禁灌水式的毫无意义的内容,否则直接禁言;
------------------------------------DMCA-版权申明------------------------ 》资源下载链接由会员自发搜集于网络,仅供学习与参考,不得以任何方式用于商业用途,如需商用请联系版权拥者取得商业授权!
》论坛非常重视知识产权,如有侵犯任何第三方权益,请及时联系(Email:[email protected]),我们将及时予与删除。

相关帖子

lcy_50 发表于 2013-6-24 11:54:07 | 显示全部楼层
教程不错,不过一般我保存成现成的图像用Flash自己做。
‘ヅ♡冷殇♡ゞ 发表于 2013-6-24 12:10:29 | 显示全部楼层
还可以哦,呵呵
竹子1975 发表于 2013-6-24 18:32:30 | 显示全部楼层
好教程,坑坑大人辛苦了
听雨轩/彩颖 发表于 2013-6-25 00:06:41 | 显示全部楼层
不错的教程哦~
白云松涛/pp 发表于 2013-6-26 00:19:54 | 显示全部楼层
好教程,分享辛苦了
兰花草 发表于 2014-2-12 17:00:16 | 显示全部楼层
谢谢老师,老师新年好。
雨璇 发表于 2014-2-18 12:52:48 | 显示全部楼层
老师的教程很详细,有时间慢慢学PS教程, ps动画/文字/滤镜教程 ,预览图36
清风送涟漪 发表于 2014-3-30 16:19:43 | 显示全部楼层
好强大啊,在后排看看
苍.狼 发表于 2014-10-3 11:28:53 | 显示全部楼层
交作业:
PS教程, loading.gifps动画/文字/滤镜教程 ,预览图37

快速发帖

 懒?不想打字?点击右侧快捷回复(注意:禁止一贴回复两次,否则直接禁言) 
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

 
 
咨询求助
插件安装
失效举报
VIP办理
工作时间:
8:00-24:00

飞天官方微信

手机版| 飞天资源论坛 ( 桂ICP备11007138号|网站地图

桂公网安备 45092102000116号

GMT+8, 2019-9-20 21:55 , Processed in 1.383700 second(s), 16 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2

© 2011-2017 飞天资源论坛

快速回复 返回顶部 返回列表