前端设计人员必会技能 - gif动画图片制作
一、flash与gif动画图片制作
flash君，搞咩纳塞，冷落你这么久，今天终于可以护你一回了。
双击flash，圣光乍现，亮瞎双眼……
flash软件适合制作有规律的运动轨迹动画效果，如果gif动画就是几个静态帧——转photoshop吧，没必要高射炮打蚊子——大材小用。一般而言，web中的gif效果都是比较简单的，一般都是使用PS搞定，因此，这里的介绍比较简单（我就偷懒少截两个图啦~~）
比方说制作那个logo超级马里奥跳啊跳的效果。//zxx: 需要一定flash基础，没有接触者直接一下段
我表示我没有那几个logo的素材，我去自己项目中找了找，有银行们的logo，就代替演示吧！
1、导入（拖入或文件→导入到舞台或库）
2、舞台大小限定（右键空白舞台→文档属性→舞台大小 截图偷懒），这一步也可以最后执行
3、四张图片转换成元件（右键舞台图片→转换成元件→任意命名的影片剪辑 截图偷懒）
4、再新建3个层，四个元件分散到四个层中
5、排排好，底对齐（全选→对齐面板→底对齐等）
6、动画搞起（新建关键帧，创建传统补间什么的），时间轴面板截图如下：
7、大功告成，导出就可以哈！（文件→导出→导出影片→选择gif动画）
效果预览：
最后导出的gif动画效果就是下图：
fla源文件右键这里下载：logo-jump.fla
二、photoshop制作gif动画
本例子以那个会动的箭头示意。
1、打开一定版本的photoshop。
2、箭头图片拖进去，带背景色——因为有投影效果。
3、一定PS处理，将动画部分与背景色分离，如下截图：
4、分析动画，总共有5个停顿点，右上→左下→右上→左下→恢复右上。于是我们啪啪啪啪再复制四个图层，将图层按照移到对应的左下角或右上角，如下截图：
5、此时，打开动画（时间轴）面板，会看到对应的几个图层：
6、确定工作区域，也就是一个动画循环所用的时候。因为1秒30帧，大致我们这个gif一个循环1.5秒，因此，我们拖动下图所示（默认从工作区最右侧拖出来）的位置：
7、现在对每个图层时间轴的起始位置进行控制。拖动每个图层条条的起始与终止位置。
一直到类似下面效果，不必太精准：
8、由于当前gif动画时间总长短，间隔也很短，因此，为了精确控制，我们需要增加显示比例，拖下图所示的条条，放大时间轴比例：
缩放比例为刚才工作区域结束位置正好在时间轴面板的结束位置为准。现在我们可以精确拖动，确保每个时间段的宽度是一样的！
9、我们可以点击左下的▶模样的按钮预览，如果OK，文件→存储为web所用格式，然后设置动画循环为永远（面板右下位置），如下图示意：
其他就是平常web图片的常规设置，你随意。
10、保存，结束！
上面演示的最终效果就是下面这个：
PSD源文件下载点击这里：attention.psd
前端设计人员必会技能 - gif动画图片制作相关推荐
- Enfocus PitStop Pro 2019 19.0.0.1007180 特别版 Mac 印前设计人员必装三大PDF插件
Enfocus PitStop Pro 是一款非常强大的Acrobat 插件,PDFToolbox.Quite Imposing以及Enfocus PitStop Pro 基本上是每个印前设计人员必装 ...
- 10个前端开发人员必须知道的CSS框架
对于UI / UX设计人员而言,要制作一个在每个浏览器上都看起来不错的漂亮网站不是一件容易的事.在创建网站布局并使其美观时,开发人员必须考虑所有Web浏览器和移动视图. 恐惧始终存在于内部,如果设计在 ...
- 淘宝美工设计初学必会技能之PSD分层模板
零基础要学美工必须要会的技能:套模板.这些东西只针对零基础新手,老司机请绕路.这里 只是教一些入门知识,能简单应付一个店铺日常用图,真要学好美工,可没那么简单.要学的 东西很多.一般一个牛逼的美工都是 ...
- 颜色的搭配 色彩标准卡 各行各业设计人员必看
-色彩标准卡--设计必备- (2011-01-07 15:23:07) (转) 配色方案浅析:一.红色的色感温暖,性格刚烈而外向,是一种对人刺激性很强的色.红色容易引起人的注意,也容易使人兴奋.激动. ...
- 前端开发人员必学的VUE脚手架搭建
提示:vue脚手架的作用是用来自动一键生成vue+webpack的项目模版,包括依赖库,免去你手动安装各种插件,寻找各种cdn并一个个引入的麻烦. 文章目录 一.cmd命令操作符如何打开? 1.win ...
- 前端架构师需要具备的技能_成为前端开发人员需要具备的最高技能
前端架构师需要具备的技能 With reference to Web Development, Front end development is mainly client-side developm ...
- Web前端开发的五大核心技能
Web前端开发的五大核心技能 1. 开发语言 htmL发展历史有二十多年,历经多次版本更新,htmL5和css3的出现又是一次革新,有些人认为前端开发要掌握的技能简单,不就是制作网页嘛,其实不然,we ...
- 前端开发人员所必备的十大技能
2019独角兽企业重金招聘Python工程师标准>>> 前端开发的工作是要如何将自己的设计应用在网络上.它不同于网页设计,更关注于该网站将如何交互和浏览.前端开发布局,按钮和主要界面 ...
- 数字 IC 笔试面试必考点（3）数字 IC 前端设计 + 后端实现
前言 该资源是博主花了十多天自己整理的,IC 前端设计流程在文中给出,IC 后端设计流程除了在文中给出之外还附加了总共六十页的 PDF 详细流程文档,简直是满满的爱啊,完整展示了 IC ...
最新文章
- Store Kit Guide(In App Purchase)翻译
- git reset和git revert
- 不用中间变量交换两个变量的值
- PMcaff 2015上半年干货精选，不容错过哦~
- java数据结构排序实验报告_java数据结构与算法之插入排序详解
- 深度学习之基于卷积神经网络实现服装图像识别
- checkboxlist与数组结合用的技
- 冯诺依曼原理中计算机包括功能部件,水泥越细,强度发展越快,对混凝土性能也越好...
- java tostring 库_java重寫toString()方法
- c语言第4份实验报告,C语言实验报告04.doc
- JavaEE基础(03)：Http请求详解，握手挥手流程简介
- 技术岗的职业规划_数控工程系召开数控技术、数控维修专业建设指导委员会会议...
- iOS类别(Category)和扩展(Extension，匿名类)
- 《Java安全编码标准》一2.9 IDS08-J净化传递给正则表达式的非受信数据
- 如何c语言读取文件中的内容,急急急！！！如何读取文件中的相关内容
- C# 调用控制台应用程序及传参
- 数学基础（1）线性代数总结
- Java对大文件MD5解密详解
- unity添加android res资源,Unity3d常用两种加载资源方案：Resources.Load和AssetBundle
- 疫情下，数字化转型成功的“光明”