当前位置:首页>ps入门教程>动图教程>动画教程>教程内容

ps加载动画图片

来源:SDC翻茄匠 作者:TAT.sheran 学习:18599人次

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

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

先看效果图:

Photoshop制作网页加载动画教程,PS教程,16xx8.com教程网

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

Photoshop制作网页加载动画教程,PS教程,16xx8.com教程网

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

Photoshop制作网页加载动画教程,PS教程,16xx8.com教程网

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

同时选中这两个浮层:

Photoshop制作网页加载动画教程,PS教程,16xx8.com教程网

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

Photoshop制作网页加载动画教程,PS教程,16xx8.com教程网

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

Photoshop制作网页加载动画教程,PS教程,16xx8.com教程网

Photoshop制作网页加载动画教程,PS教程,16xx8.com教程网

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

Photoshop制作网页加载动画教程,PS教程,16xx8.com教程网

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

Photoshop制作网页加载动画教程,PS教程,16xx8.com教程网

学习 · 提示

  • 一定要打开PS,跟着教程做一遍,做完的图到这交作业:提交作业
  • 建议练习时,大家自己找素材,尽量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到论坛发帖提问:新手求助
  • 加官方微信,随时随地,想学就能学:ps_bbs,或扫右侧二维码!
  • 关注我们学更多,每天都有新教程:新浪微博 抖音视频 微信小程序
- 发评论 | 交作业 -
最新评论
小蚂蚁_SM-G9008V2018-05-11 06:46
很不错
一只帅羊羊2016-11-21 10:17
一只帅羊羊2016-11-21 10:11
4966547462016-03-17 10:07
加载中.....
4966547462016-03-17 10:03
加载中.....
曉嫻君2013-02-20 08:46
好东西,谢谢分享
中华长城永不倒2013-02-20 08:15
很想学习
描述反向2013-02-20 06:06
想来学习,新手上路
私奔花火2013-02-20 01:39
看得云里雾里
有时候可是我2013-02-20 06:33
谢老师分享!!!!!!

关注大神微博加入>>

网友求助,请回答!