恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
教你用PS做一张简单的GIF图片
0.0°
2016-03-21 原创文章 教程 举报 6058 60 51 2

简单的GIF图片,网页上面简单的动图,闪动的小图标

Image title

先放上效果图

现在我们来开始一步一步的制作

----------------------------------------------------------

首先,你要以最终成型的图作为参考,先绘制初始状态下的图,具体画法大家可以随意画一些喜欢的样子,如下:


第二步,把图层一拉到新建图层处复制一层,命名为图层2在原有的位置上面继续添加第二状态下的图片

         

效果如下,关闭图层1前面的小眼睛,隐藏图层1:


第三步以相同的方法进行图层3的绘制,一直到所有图层都绘制完成后,按住ALT键鼠标点击图层1前面的眼睛,就可以只显示图层1,其他图层全部都隐藏起来

          

然后选择      窗口--时间轴,于是你的PS界面地下就会出现时间轴的功能,跟flash差不多,其它动图软件没有用过,就用过flash而已


点击创建视频时间轴右边的小三角,有一个创建视频时间轴和创建帧动画两个选项,选择创建帧动画


将一次改为永远,设置延迟时间为0.1秒

           

接下来就跟PS的新建图层一样的了,点击新建一个图层


之所以在之前先设置好了循环状态和延迟时间,是因为后面新建的时候会默认都跟第一动画一样,后面就不用再设置了。

当你新建完成后,就回到PS的图层分层界面,点小眼睛隐藏图层1,点开图层2,依此类推



接下来只要点击播放的按钮,图片就会按照这个顺序动起来了,当然,thank you写完后需要一会的停顿,只要选择最后一张图片将时间改为2秒,就完成了,不信你也可以试试看,附上源文件。

------------------------------------------------------------

关于保存

一个简单的小动画就做成了,gif的用法在很多时候都是随处可见的,对于那些只会用PS的小伙伴来说,这个方法还是很错的,就是没有动画软件来得方便,最后就是怎么存储你做好的这张图了

文件---存储为web所用格式,或者直接三键加S,也是保存为web所用格式


再这里选择GIF格式,存储就OK了。

会了这个简单的方法后,很多简单的动图图你就可以做了,第一次发教程,中间有什么疑问可以评论,看到会立刻回复的。


更新:2016-03-21

下载
收藏

60人已收藏

  • 22

    作品

  • 81

    粉丝

  • 15

    关注

  • soul:可以被陌生人关心的APP
  • 系统开发设计从零到有的成长历程
  • PS如何画网页banner的立体插画
  • 2018网页作品集
相关标签
ps教程图标设计

    猜你喜欢

      2016-03-21 原创文章 教程 举报 6058 60 51 2

      教你用PS做一张简单的GIF图片

      0.0°

      你确定要举报教你用PS做一张简单的GIF图片

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2016年03月21日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      51
      60
      2

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录