教你用Photoshop创建自己的loading.gif动画

标签: PS教程 PS 教程 & 设计文章 loading动画 loading.gif | 发表时间:2013-02-17 22:20 | 作者:kingtent
出处:http://www.uisdc.com

教你用Photoshop创建自己的loading.gif动画

作者:TAT.sheran :“作为一个混迹互联网的IT人士,如果想各方面都了解点得话,那么设计gif动画也是个不错的学习方向哦!”

下面就step by step 教大家如何设计一个loading.gif的加载动画图:
先看效果图:

1、创建一个图层100×100 PX,背景颜色#2d2d2d

2 、在背景文件上用直线工具绘制一条1px的白色纵线:

注意,这条直线要水平居中对齐,具体方法如下:

同时选中这两个浮层:

点击排列方式中的‘水平居中对齐‘图标:

3、选择直线图层,用命令行Control+ T对直线旋转45°

4 、选中变换后的直线浮层,用快捷键Control + Alt + Shift + T复制旋转该直线到如下效果:

5 、创建一个1px半径的圆角矩形,如下图所示,这里加上参考线是为了更好的让圆角矩形与直线都水平居中

6、对圆角矩形进行变形,如下所示:

这里变形方法是先对圆角矩形Control  + T,到变形状态后,然后点击鼠标右键,出现下图所示的菜单,然后选择’斜切’属性,

即可变换左下和右下两个点

7、移动中心点,具体如下:

把中心点移到如下位置

如果中心点直接移不动,试试这样把中间的小黑点

移动到

下面,那么中心点就可以随意移动了

8、选中7步变形后的圆角矩形用快捷键,Control + Alt + Shift + T,使其形式如下:

目前整个图层的布局形式如下:

9、给‘形状2’增加一些样式,打开图层——图层样式:

这里的颜色值是:#242424

gif-8

最后的效果要如下:

10、 复制上图,然后删除一些叶片,使其如下所示:

变化9

删除叶片的方法:

删除描点工具10

用删除苗点工具

11、给shape浮层加如下所示样式

gif 11

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

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

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

14、对shape3的修改如下:

15、最后结果如下

最后12

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

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

负责8层13

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

1> 选择动画属性:

窗口动画13

2> 创建新图层:

新建一层14

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

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

新建一层的对应15

18、最后保存:文件—— 存储为web16

最终结果如下所示

总结:知道gif动画的初步制作原理后,以后为我们制作逐帧动画也奠定了一定基础!如有表述不对是我地方可以给我留言哦~\(^o^)/~

原文: http://www.alloyteam.com/

优设哥向您推荐:

photoshop常用技巧

photoshop快捷键大全

25个完美的Adobe Photoshop教程

【文字特效篇】50个最优秀的Photoshop实例教程

750+免费Photoshop图层样式下载+安装教程
无觅

相关 [photoshop loading gif] 推荐:

Loading Data into Hive - Pentaho Big Data - Pentaho Wiki

- -
Using the external option, you could define a Hive table that simply uses the HDFS directory that contains the parsed file. For this how-to, we chose not to use the external option so that you can see the ease with which files can be added to non-external Hive tables..

【GIF】 Davidope超炫的GIF作品

- 浩 - 廉清波
这些让人看了头晕的 GIF 动画出自设计师 Davidope之手. dvdp 是两家设计工作室的创意总监以及老板,他说自己喜欢生活在危险中,因为他一天要喝掉两公升的可乐并抽掉两包烟,进来看看,一起头晕吧. 新鲜提示:如果你喜欢连战的这篇文章,请点击文章底部的 “推荐” 或 “引用” 按钮把文章收藏到自己的博客.

GIF vs APNG vs WebP

- - JayXon
GIF 是一个非常古老的格式,1987 年诞生,最后一个版本是 1989 年. (这就是为什么 GIF 文件头的 magic number 是 GIF89a). APNG 相对新一些,是 Mozilla 在 2004 年推出的,十几年的科技进步是不容小觑的,所以 APNG相对于 GIF 的优势十分明显,后面会分析.

Photoshop 技能167个

- nemo - 草榴社區
学PS基础:Photoshop 技能167个­经典的Photoshop技巧大全,如果你是初级阶段的水平,熟读此文并掌握,马上进阶为中级水平. 常见技巧 经典的Photoshop技巧大全,如果你是初级阶段的水平,熟读此文并掌握,马上进阶为中级水平.   双击Photoshop的背景空白处(默认为灰色显示区域)即可打开选择文件的浏览窗口.

各种打不开,属于局域网时代的“Loading”T恤

- Vendi - 理想生活实验室
虽然各种主流媒体一直宣传“我们大力发展网络事业”乱七八糟的,事实上大家都知道,中国不仅网速在全球排名后段班,而且各种和谐啊打不开的事情也比比皆是,因此经常我们就只能看到不断的“Loading”、“Loading”……但网站就是打不开. 这下我们至少有个发泄的渠道了,把“Loading”图样做到衣服上,让衣服代替我们时而想摔鼠标的冲动.

周末gif福利08.27

- Leo - 热豆腐
欢迎光临热豆腐的小店,每月图片合集只要1块钱. 猛击查看原文:http://www.redoufu.com/2011/08/27/weekly-gifs-2/. 热豆腐Copyright © 2009-2010 每天的视觉盛宴. 严重期待趣图爱好者加入热豆腐交流群: 120026949 ,欢迎来搞,分享欢乐.

周末gif福利08.28

- Leo - 热豆腐
欢迎光临热豆腐的小店,每月图片合集只要1块钱. 猛击查看原文:http://www.redoufu.com/2011/08/28/weekly-gifs-3/. 热豆腐Copyright © 2009-2010 每天的视觉盛宴. 严重期待趣图爱好者加入热豆腐交流群: 120026949 ,欢迎来搞,分享欢乐.

每周GIF福利08.21

- Kindy - FeedzShare
来自: 热豆腐 - FeedzShare  . 发布时间:2011年08月21日,  已有 2 人推荐. 热豆腐计划推出周末福利计划,将会挑选一些好玩的动态gif图分享给大家. 由于动态图比较大,加载可能有点慢,可以先打开然后干点别的,一会儿再过来看,很欢乐的哦~. 猛击查看原文:http://www.redoufu.com/2011/08/21/weekly-gifs/.

周末gif福利09.11

- Lionheart - 热豆腐
09年6月~10年1月图宴礼包(new!). 猛击查看原文:http://www.redoufu.com/2011/09/11/gif-collection-3/. 热豆腐Copyright © 2009-2010 每天的视觉盛宴. 严重期待趣图爱好者加入热豆腐交流群: 120026949 ,欢迎来搞,分享欢乐.