Photoshop结合AE解析GIF动图制作基本流程
如果不坚持,何必当初那么努力
帖子145494&缘分币541720 Y&阅读权限255&注册时间&
17:41 
Photoshop结合AE解析GIF动图制作基本流程
版本：当然是越新越好，推荐CC。注意Windows下只有64位系统才能安装AE CC，如果你是32位系统只能用CS4版本了。
以下以Windows版AE CC、PS CC作为例子，其他版本大同小异，用MAC的同学自己转换一下快捷键哈，由于我习惯用英文版AE，大家可能用中文版比较多，我尽量都照顾。中文翻译以AE CC官方中文版为准。
1、使用软件：Adobe Photoshop、Adobe After Effect
2、关于GIF动图
GIF会动，是因为它是由很多单张的图片打包在一起播放，因而体积会很大，动辄好几兆，要发网上播放容易卡壳儿影响效果。当然适当的优化可以减小体积，更重要的是在做之前要心里有个数，在保证效果的前提下尽量避免会造成臃肿的情况。
那么什么参数会影响GIF图的体积呢?
①尺寸②动画时长③帧率④颜色数
尺寸、动画时长很容易理解;
帧率说的是每秒播放多少张图，帧数越大动画越流畅，代价就是体积变大，一般超过超过30就没意义了;
颜色数是很多人忽略也很重要的一个关键影响因素，颜色数越少体积越小，同时画质越差，但是很多动画本身就没用几种颜色，这里头的压缩空间就很可观了，所以那种有复杂写实背景的GIF通常要么体积巨大要么画质很渣。
尺寸我建议用dribbble的400x300像素，长度控制在10秒内，帧率25，颜色数根据动画的不同尽量用128以下的吧。
3、“动”之前的准备
除非已经很熟练了，不然那种一拍脑子就想三下五除二做一个好看的动图出来的行为常常事倍功半甚至一事无成。这里我强烈建议大家拿出笔和纸，画一画分解图，理清一下思路。分镜图不是什么高深的东西，只要能把关键的几个画面简单画出来，简单描述素材怎么运动就好，关键是自己边做的时候不会忘了要做啥，提高效率。下图就是第一次分享时一位学员画的分镜草图，一个很简单的天气图标动画，她用一个下午的时间就完成了自己的GIF处女作。
然后就是在PS里画了，大家都是玩UI的应该都很熟悉了。这里要注意的是要根据之前分镜设计的动作把素材分离好，分组、图层命名越清晰越好(或者你自己能记住哪个图层是什么东西也行)，图层样式保留着别栅格化了，最后存储成PSD文件。
4、将PSD文件导入AE
终于要到AE了!!!激动了有木有!!!先别急，导入PSD文件这一步很重要，很多新手卡在这儿了。
启动AE，文件→导入→文件，或者直接快捷键CTRL+I，选择要导入的PSD文件：
注意了，先别急着按导入，在“导入为(Import As)”下拉菜单选择“合成 - 保持图层大小(Composition - Retine Layer Sizes)”，再按导入，这样就能保持图层的独立性了。
另外两个选项，Footage(素材)就是将这个PSD当成一张图导入，而Composition(合成)则和我们的选择很像只不过导入的每一张图层都是等同画布大小，中心点也是一样的。
然后AE会问你是否保留图层样式(Editable Layer Styles)，当然留着了!
点确定，然后就在项目列表里看到了我们的合成(Composition)，以后我们就要在这个合成里完成各种酷炫狂拽吊炸天的动画了——不过在此之前我们还得设置好才行。在合成上右键→合成设置(Composition Settings)
长宽都自动继承了PSD文件画布的设置，像素长宽比(Pixel Aspect Ratio)选方形像素(Square Pixel)，帧率(Frame Rate)设为25，时长(Duration)设为10秒，其他默认就好了，然后点确定。
合成设置也可以在这里找到：
然后就开始我们的动画之旅吧!别忘了存盘哦(Ctrl+S)!
5、在AE里制作动画
将PSD文件正确导入AE之后，我们就可以开始动画的制作了，介于本篇教程是基础篇，具体的动画内容、技巧等不作太多赘述，计划在以后的教程里做展开。这里只聊聊AE的基本操作。
首先我们看下AE的界面：
双击打开PSD文件同名的合成(例：未标题-1)
项目面板——所有素材、合成都在这里哦。
这个面板显示打开的合成里的各个层，注意到在PS里分好的组是以合成的形式存在的，双击之可进入“组1”、“组2”。
预览面板，可以看懂我们的小图图了连参考线也能导入哦。其实AE可以把PS里的路径、图层样式、参考线、分组统统导进来，果然是Adobe自家兄弟!
时间轴，大概是UI设计师们比较陌生的东西了，别怕，西西带你玩转它!
万事开头难，下面我们先来做个最简单的动画，本例是一个钟，那就让指针转一圈。把时间轴上的指针移到0秒，找到指针所在图层(组4)，点开小三角，点Transform-&Rotation(变换-&旋转)旁边的小秒表，这样我们就在0秒处添加了一个关键帧，如图：
然后将指针移到10秒处，将旋转数值设为360°(会自动变成1x+0.0°)，意思是转了一圈。好，按下空格播放可以看到旋转的效果。
如何做炫目的效果不是本篇教程的目的，成功动起来了咱就翻篇吧~
再次提醒：一定要记得随时存盘!
6、输出动画，生成GIF
动画做再屌，输不出来也白搭。AE虽然是专业影视动画软件，但它的输出选项其实少的可怜(当然配合自家的MediaEncoder能输出更多格式，不过这不在本教程讨论范围了)，反正是没有GIF直接输出的选项了，我们只能曲线救国。
方法一：输出视频转GIF
确保我们的“未标题-1”合成处在被选中状态(边框变黄色)，
被选中 未选中
按下快捷键Ctrl+M，合成就被加入到渲染队列(Render Queue)了。
“渲染(Render)”就是把动画生成动画文件的过程，下面我们来做些设置：单击那个Lossless(无损)那个黄字(不是小三角哦)。
弹出的对话框格式(Format)里选Quicktime：
点开旁边的格式选项(Format Option)，视频编码(Video Codec)选
择PNG，质量(Quality)选100，这样就能几乎画质无损地输出。
如果找不到Quicktime选项请先安装Quicktime，苹果官网上可以找到
好，其他选项保持默认，点两次确定之后回到渲染队列，点击输出到(Output to)小黄字(不是小三角哦)，设置生成的文件路径以及文件名，这里我还是保持默认的“未标题-1.mov”吧，然后别忘了点渲染(Render)按钮，等进度条跑完后，我们又要回熟悉的PS了~
将我们生成的“未标题-1.mov”直接拖进PS，会看到多了一个时间轴，
其实PS是可以简单制作视频的，不过我也不太会用，有时间再研究研究。好，现在点击文件→存储为web所用格式：
终于到最后一步了，这里有很多的优化选项，说实话我也没研究透。左下角能看到输出的大概大小(本图是381.1k)，右下角可以播放查看动画，注意这里有个循环选项记得把“一次”改为“永远”不然它就只播放一次就停了。
右上的这些参数才是优化的重点，大家可以自己调整试试看什么参数能调的又小又不失真，最后点“存储为”输出，就大功告成了!
这种方法的好处是生成文件少，直观方便管理，且中间生成的视频文件也可作为展示资料用。
方法二：输出图像序列( 序列帧)
有时候因为一些原因AE输出视频失败或者PS无法导入，这时就可以试试图像序列。
在AE里，渲染设置的时候选择PNG 序列(PNG Sequence)
然后输出路径指定一个文件夹存放输出的图像序列，这样点渲染后就会生成一组带序号的PNG文件。
然后打开PS，如果是PS CC及以上版本，直接可以文件 -& 打开 ，然后选中图像序列其中的一张图，勾上“图像序列”选项
然后帧率选25
之后的步骤参照方法一就行。
如果你的PS是CC以前的版本就稍微有点繁琐了，主要是导入序列帧比较麻烦。打开PS，文件 -& 脚本-&将文件载入堆栈
弹出的面板选择 浏览
然后选中所有序列帧
然后就耐心等待图像载入到PS图层里(如果你的图像序列很多，会载入相当长一段时间)
点击 创建帧动画，时间轴变成这样(有时候载入图层后你的时间轴直接是下图这样，就不用点创建帧动画那一步骤)：
然后点击时间轴右上角的选项菜单，选择 从图层建立帧：
这样终于把动画导进来了，可以先点下面的播放按钮播放一下，看看播放顺序是否正确
如果发现反了(多数情况如此)，点击刚才的小菜单，选择 反向帧 来修正：
然后，选择时间轴上的所有帧，点击下面的“0秒”，在弹出来的菜单选择 其他时间 ，用以设置每帧存在时间：
弹出来的面板输入0.04，这个值是根据我们动画设置的25帧/秒来计算的(大家想想如果动画设置了30帧/秒或者其他值这里该填多少?)，
确定之后的步骤和之前相同了，点击文件→存储为web所用格式：
来源：站酷& & 作者：bigxixi
如果您在做图或者看教程（PHOTOSHOP方面），遇到任何问题请到问题交流区提问，地址：；我们会在第一时间帮助您解决问题，如果在教程后面跟帖，一律不给予解决！~
UID1&精华&积分266552&威望21880 F&回复币50107 B&警告0 次&贡献2117557 &金币2 个&学分0 点&性别男&来自上海&最后登录&
帖子10&缘分币8 Y&阅读权限10&注册时间&
给力，支持一下，一定要戳进去看一下
帖子17&缘分币4 Y&阅读权限10&注册时间&
用AE来做GIF略高大上哈，不过之前我都是导出AVI然后在UGA的gif软件里编辑gif的，感觉比ps方便
[ 本帖最后由 sum2boy 于
15:57 编辑 ]
UID1344893&精华&积分17&威望0 F&回复币40 B&警告0 次&贡献0 &金币0 个&学分0 点&性别男&最后登录&
帖子49&缘分币43 Y&阅读权限10&注册时间&
非常好的教程，一定要试一试
帖子154&缘分币44 Y&阅读权限10&注册时间&
感觉UGA和PS制作GIF的比较简单。AE的感觉好复杂啊。。
当前时区 GMT+8, 现在时间是Artlantis入门教程_图文_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
文档贡献者
评价文档：
Artlantis入门教程
大小：11.34MB
登录百度文库，专享文档复制特权，财富值每天免费拿！
你可能喜欢为什么AE只能输出PSD格式文件，不能输出AVI文件？_百度知道
avi？是ai格式吧，我觉得这是个很简单的道理，AE里面得图层也是针对像素组成的，生成静帧图片的话应该也是位图，不能生成矢量图的ai格式了…
输出组件有问题吧，多机序列的意思是多机同时渲染一部分图像，肯定只能出单帧图
你这是保存单帧吧
其他类似问题
为您推荐：
psd格式的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁中文字幕翻译教程
09-2109-2309-2305-1409-2302-2707-1306-2105-1103-0109-2209-23
《3dsmax输出PSD软件3.2版本》Cebas psd-manager 3.2 for 3ds Max 9 2013 XFORCE
3dsmax输出PSD软件3.2版本
Cebas psd-manager 3.2 for 3ds Max 9 2013 XFORCE
Cebas psd-manager
迅雷地址+FTP地址+备份地址
3dsMax_psdmanager_PSD.jpg (22.95 KB, 下载次数: 33)
08:36 上传
Cebas已经推出了更新的PSD-Manager，是3ds Max的PSD输出口。可以解决将ID分配到目标物体的乏味工作。
根据这款产品的介绍，PSD-Manager 3.0可以通过将它的新MatteShooter亚光绘画萃取技术和以PSD图层的形式输出场景层相结合，从而在没有ID的情况下制作mask。
该系统因采用了Render Cut-Outs输出模式而更显完美。可以“通过对象、ID对象、ID材料或者3ds Max图层将渲染出来的图像切成片”。
新版本的其他功能还包括支持32-bit (HDR)文件，对V-Ray和finalRender的渲染预设以及对3ds Max 2012的支持。
_0.jpg (29.98 KB, 下载次数: 7)
08:37 上传
Cebas psd-manager 3.2 for 3ds Max 9 2013 XFORCE
psd-manager&# is the first and most advanced PSD file exporter for 3ds Max and 3ds Max Design available on the market. Now, for the first time you can readjust nearly everything in the rendering with Adobe® Photoshop® or any another application that supports PSD files. psd-manager is the tool to help you save time and money by integrating the tools you best know and like.
游客，如果您要查看本帖隐藏内容请
<p id="rate_346" onmouseover="showTip(this)" tip="非常感谢&CG币 + 1 枚
" class="mtn mbn">
<p id="rate_076" onmouseover="showTip(this)" tip="赞一个&CG币 + 1 枚
" class="mtn mbn">
人人素材社区 - 严正声明1、禁止发布任何违法违规的言论；
2、本贴所有内容纯属发帖者个人意见，与本社区立场无关；
3、本社区仅提供学习交流平台，但不对本帖真实性和权益负责；
4、如本帖侵犯到任何第三方权益，请立即邮件告知本社区，社区将及时予与删除。
width:100%">
激动人心，无法言表！
width:100%">
真是难得给力的帖子啊。
width:100%">
楼主加油，我们都看好你哦。
width:100%">
真是难得给力的帖子啊。
width:100%">
&&能不能写个帖子，告诉我怎么样用啊？？？
width:100%">
多谢分享，谢谢！！！
width:100%">
感恩无私的分享与奉献
width:100%">
强烈支持楼主ing……这款软件不错啊
width:100%">
激动人心，无法言表！
width:100%">
强烈支持楼主ing……
width:100%">
无回帖，不论坛，这才是人道。
width:100%">
感恩无私的分享与奉献
width:100%">
这个必须顶
width:100%">
width:100%">
楼主加油，我们都看好你哦。
width:100%">
好帖必须顶！！！！！！！！！！！！！
width:100%">
密码密码密码密码密码
width:100%">
强烈支持楼主,太好了，实用的东西,支持楼主，辛苦了
width:100%">
强烈支持楼主ing……
width:100%">
09-2109-2309-2305-1409-2302-2707-1306-2105-1103-01
07-0204-1808-1509-2911-0407-0404-1001-0908-2812-28
站长推荐 /3
大家好！人人素材网第49期中文字幕翻译教程来啦！
教程简介：
通过本课程你将学会怎样拍摄视频镜头，加工提炼你的故事，以及怎样剪辑能让你的视频更具有吸引力。本课程的最终目的是通过作者拍摄经历来告诉你怎样用视频讲好一个故事。在本课程中，数字媒体制作人，前电视新闻记者Jeff Sengstack使用自己亲自拍摄的三个案例来告诉你如何使用视频来创造引人关注的故事。他会告诉你在拍摄前期的注意事项，例如他和他的客户选取他们的故事信息，以及拍摄计划的制定。在拍摄视频时先查看拍摄现场，以及通过现场的采访来突出故事的主题。然后Jeff Sengstack会告诉你一些故事脚本的编写技巧。这些技巧能让能极大地提升你的视频品质。最后，在视频制作阶段，Jeff Sengstack会告诉你Pemirer的一些视频剪辑技巧。
大家好！人人素材网第50期中文字幕翻译教程来啦！
教程简介：
这次我们教大家做水彩画的AE特效，也就是使用简单的遮罩工具，来展现文字和插画，然后与水彩特效有机融合在一起。同时还会学习到遮罩与自定义明度蒙版的配合、水滴洇开的吸收效果、颜料溅落的动画，以及提高工作效率的技巧。听起来好像需要很多绘画技巧，实际上并非如此，简单的AE技巧就能够做到复杂的绚丽画面。最后我们进行特效合成，添加摄像机做动画，学习摄像机动画平滑运动的技巧，深入剖析不同的关键帧插值方式，做到知其然，知其所以然。
大家好！人人素材网第51期中文字幕翻译教程来啦！
教程简介：
婚礼中结婚照片是必不可少的，但还要对照片进行精加工处理，要将最美的照片呈现给大家。在本期课程中，我们的教师，同时也是一位作家兼职业摄影师——Chris Orwig将使用他亲自拍摄的婚纱照片给我们讲授“Photoshop婚纱摄影新娘肖像修饰”视频课程。在课程中，Chris Orwig老师将告诉我们如何使用Photoshop的强大功能将婚纱照片处理得真实，自然，美仑美奂。我们将学习如何调色，消除照片中的污点，增加眼睛的神采，牙齿美白，增加高光，以及如何将彩色照片制作成精美的黑白照等一系列非常实用的技巧。
Powered by熊氏切图法--一键导出App icon[更新]
作品分类：
发布时间：
版权信息：
熊氏切图法--一键导出App icon[更新]
还在为切不同大小的app icon感到苦恼嘛？看完本文，你也许能找到答案，熊式切图法，你值得拥有
11月30日更新附件中提供的模板使用方法：双击图层缩略图，将你的的icon放入智能对象中，保存后模板中就会全部更新为你的新icon了，其实用本文提到的方法只用一个图层就可以导出各种尺寸的文件了，做成这样是为了方便大家预览所有尺寸的效果，尤其是小尺寸的icon另外新做了一版用二次线性算法缩放的psb智能对象，这样就不用垫底色了，边缘是完美的硬边~更新还包括了iphone6+专用的60x60@3x.png（180x180）更新补充：感谢@&提醒，其实还有有一种十分简单残暴的方法可以将一个图层导出成为若干个不同尺寸的文件（无需转换为智能对象），只需要用到生成器：将图层或组命名为“1024.jpg,50% 512.png,200% 2048.jpg”，这样就可以生成1024.jpg、 512.png、2048.jpg三张图片，图层名中的逗号用来分割文件名，百分比表示在当前图层或组的基础上缩放的比值，真正做到“一键生成”多种尺寸，当然这个方法也有缺点，跟第一种方式一样，被缩小的图像会因为算法的问题导致边缘虚掉，且无法用添加底层的方法弥补，如果输出的图像多的话，图层名称会非常的长...感受一下4个图像时的效果：--------------------------更新的分割线--------------------------做App设计的小伙伴有没有遇到这种情况呢，同一个icon要输出N种尺寸，用传统的方法批处理调整图片大小比较繁琐，不方便同时整体预览，如果后续修改了设计，又要重复一次这个批处理的过程，有没有一键输出所有尺寸的方法呢？本熊这就给大家推荐一种强大的技巧：智能对象+生成图像资源，是的，本熊不要脸的将其命名为“熊氏切图法”总的思路就是设计好最大的尺寸（1024px*1024px）后，将对应的所有层转换为智能对象，再缩放至各种不同的小尺寸，然后重命名图层，最后通过文件 & 生成 & 图像资源，自动生成不同尺寸的icon文件。智能对象已经诞生很久啦，想必大家都不陌生，我就不废话了，相关的资料早就有酷友分享过，另外这个“生成图像资源”是从adobe&cc后才有的新功能，它的横空出世让UI设计师们终于脱离了手动切图的苦海，这个功能默认是关闭状态，每次都需要手动开启（文件&&&生成&&&图像资源），它的原理是识别图层名称中有无“.jpg”".png"之类的扩展名，将拥有扩展名的图层或组自动保存为单独的对应格式的图片（保存的时机是在你保存psd文件的同时），存放在psd同级目录的“-assets”文件夹中；当你需要修改icon或者导出其他项目的icon时，只需要打开任意一个智能对象，将新设计替换进去，保存智能对象和psd后，所有小尺寸的icon也更新为修改后的版本，assets文件夹中的文件也会更新。原理明白了，实际操作中会遇到一些具体的问题，以下就是本熊根据上述方法发展出的三种方案he和一些心得体会，与大家分享，希望能抛砖引玉方案1：psb智能对象转换为智能对象的图层，实际上是被转换成了“psb”格式的文件保存在“psd”文件中（很拗口有木有？）双击智能对象图层的缩略图即可编辑，我称之为psb智能对象（说句题外话，将图层转换为智能对象默认是没有快捷键的，而“转换色彩模式”这么不常用的功能居然有快捷键，而且还是ctrl+Y，ctrl+T自由变换的时候很容易误操作有木有？饿逗比太反人类了，所以建议把ctrl+Y改成转换为智能对象~）优点：所有效果都在ps中实现，无需切换软件，像素级精细缺点：智能对象如果是psb图层的话，缩小后最边缘的一圈1px的范围会发虚，变成半透明的状态（这个无法避免，跟缩放的算法有关），我的解决方案是：在智能对象下建立一个大小一致的矢量图层，放在同一文件夹之下，文件夹名称改为“生成图像”的命名规则（如image@2x.png），如下图：关闭边缘填充图层的小眼睛，放大看看icon边缘有啥不同？方案2：ai智能对象在ai中复制的对象，粘贴到ps中时会询问粘贴为：如选择智能对象，那么之后双击缩略图就会在ai中打开，我称之为ai智能对象优点：在ai中利用尺规作图绘制复杂的曲线十分便捷（再说句题外话，顺手推荐神器：SubScribe，请自行谷歌），缩放后不会出现上边psb智能对象的边缘透明问题，所以文件层级结构简单，给智能对象改名即可缺点：元素不要超出这个画布的范围，否则保存后回到ps里边缘可能会虚（把超出的图层隐藏掉也没用）；除非开启像素预览+像素对齐，否则ai中的锚点和曲线坐标可能出现小数点导致边缘发虚对比下psb的版本，不需要填补边缘的透明色，层级简单多了方案3：纯ai文件其实ai本身有2个很强大的特性：符号和画板，可以方便的实现同一个元素的不同尺寸输出：将任意图形拖动到符号面板里即可转换为“符号”，这个符号就等于是一个智能对象啦，然后将它复制若干份调整为不同的大小，再用“画板工具”点击每个符号生成多个画板，记得重命名画板最后用“导出”命令，勾选“使用画板”，就能生成一系列不同尺寸的图片，文件名是ai文件名+画板名。举个栗子：把画板的名称修改为image@2x，ai文件名是App icon，那么导出的png图片就是App&icon_image@2x.png，如觉得ai文件名多余，可用批量重命名工具去掉“_”之前的ai文件名以上就是全部三种方法啦，其实这个方法不止限于App icon，同样适用于生成手机壁纸等需要输出各种尺寸的场合，大家可以发挥一下想象~顺手附上：好啦，最后是福利，附件中是我制作的三种方法对应的源文件，大家可以下载下来研究下（使用mac打包的，win系统的话请用最新版winRAR解压，否则文件名可能会有乱码）本熊比较懒，附件里没有做retina HD 的@3x尺寸，需要的朋友可以自己动手做做看，另外附上文件太大所以只提供链接，里边包含了iphone6&plus对应的icon尺寸。
打开微信“扫一扫”，将本文章分享到朋友圈
前身为。国内最专业的UI设计平台!
七年来一直为UI设计师做最好的服务而不断努力着!