&& 文章内容
PS修改GIF图片文字仍然保持GIF动态效果教程
[日期：] & 来源：IT部落窝& 作者：谢梦 & 阅读：35355次[字体：
内容提要：针对修改GIF图片文字问题,教程通过详细的一个小案例来描述修改GIF图片文字仍然保留动画效果的方法和思路.
　　首先，呈现初始的GIF图片，如下：
　　疑问：我们想在上面跳动的gif图片上将文字：&王刚专用&，修改为其余朋友的姓名，如我的名字&谢梦专用&。在修改GIF图片文字的同时，我们需要保留图像自身的动态效果。
　　思路：在PS里面打开gif图片，使用修复类工具将每一帧的文字去除，再打上新的文字。
修改GIF图片文字操作步骤
　　第一，我们在photoshop里面打开初始的GIF图像观察
　　观察图层和时间轴面板，得到如下一些信息：
　　图像面板：本文的GIF图片其实就是由三个隐藏和显示的图层构成。
　　时间轴面板：上面三个图层的隐藏和显示，也分别体现在三个帧上面。
　　我们单击第1帧，再观察图层面板，只有图层1是显示的，图层2、图层3都是隐藏的。
　　再单击第2帧观察，图层2是显示的，图层1、图层3是隐藏的。
　　同样的，单击第3观察，发现图层3是显示的，图层1、图层2是隐藏的。
　　第二，消除GIF图片文字
　　观察完之后，动手操作。单击时间轴的第1帧，切换到第1帧。由于文字所在的区域是打底是白色，因此很容易修正。
　　谢梦在此直接使用矩形选框工具将矩形框的区域用选区框选出来，如下图所示。
　　执行&编辑&&填充&，或者使用快捷键SHIFT+F5，打开填充对话框，填充白色。
　　按下CTRL+D，将选区取消。此时选框里面的文字已经消失，被填充上白色。
　　说明：使用此方法，将图层2、图层3上面的文字都去掉。另外，不同的GIF图片不同，去字的方法会不有所不同。方法视具体图像而定。
　　第三，增加修改GIF图片文字
　　我们此时只需要在白色背景上输入文字，并绘制一个矩形框即可。
　　1.&选择工具箱中的文字工具，输入文字，并调整好文字的字体、字号、颜色。
　　2.&在文字图层上面新建一个空白图层，使用矩形选框工具绘制出一个比文字稍微大一点的选区。并执行&编辑&&描边&，描上和文字相同颜色的边。
　　下图就是增加修改GIF图片文字之后的效果：
　　第四，修订GIF帧和图层隐藏显示关系
　　1.调整图层顺序如下，将文字和描边图层放在三个背景层的上方。
　　2．单击时间轴面板第1帧，隐藏图层2、图层3.
　　　 单击时间轴面板第2帧，隐藏图层1、图层3.
　　　 单击时间轴面板第3帧，隐藏图层1、图层2.
　　3.执行&文件&&存储为WEB所用格式&，将制作好的图像另存为GIF图像输出保存。同时咱们又有了PSD源文件，之后需要再将此GIF图片修改为其余朋友的名字，就方便多了，直接选中文字图层的文字修改文字即可。
　　如果亲对最后一步存储为GIF步骤不熟悉，请参考
　　滦聪麓私坛蹋Ｍ杂行枨蟮呐笥延兴镏詈蠼宋氖褂玫PSD源文件共享到PS交流群：共享，如果您需要，可以直接下载即可。
photoshop教程
平面设计教程photoshop教程子分类& 全新:如何用Photoshop做动画(图文版)
发布成功！
扫描二维码，下载手机客户端躺着也能逛圈子，发帖回帖更方便
辰辰&&8个月5天小男生
上一篇日记写的没有准备,所以好多妈妈都看不懂,说实话,连我自己都糊涂了,今天可是做足了准备才写的,再搞不懂辰妈我是真的没有办法啦!!!能力有限,请多包涵呀!!!
&1,点&文件&----&打开&你想编辑的图片
2,再打开另一幅图片
3,按&CTRL&+&A&键选取第二次打开的图片,然后点&编辑&---&拷贝&将第二幅图粘贴在第一幅图里
4,在第一次打开的那幅图里建立两个图层
5,把两个图层的图片调整一样大小后,点击&文件&---&在IMAGEREADY中编辑&
6,会进入&Adobe ImageReady&界面
7,点击&窗口&---&动画&
8,会出现下图这个对话框
9,点击对话框下的一个小图标,鼠标移在上面会出现&复制当前帧&
10,复制出一幅图
11,在每幅图下方&<font color="#秒&旁的小三角点一下是调动画时间的
12,在电脑右下角的图层对话框里,有两个图层,关闭一只眼睛
13,动画对话框里的图片将出现两张画面
14,点&播放&看效果
15,完成,点&文件&---&存储优化结果&就可以了!!!
阅读(74294)APP动画演示制作
动态已成趋势，相比静态，更直观，更能展示产品效果。本教程将教你用PS制作动态演示GIF教程，本教程使用了PS
CC，但是CS5和CS6依然能够支持本教程。然后您还需要下载手机Mock UP效果模板和一些图库照片。
来源：UICN& &作者：MohammadJeprie
1、静态设计
步骤1：新建画布
步骤2：视图&新建参考线，垂直，间隔15px，左面4条，右面4条；视图&新建参考线，水平，在40px,128px,220px处设置水平参考线，完成后效果如下图。
步骤3：在画布上添加状态栏，也就是第一条水平参考线上方40px处，状态栏各位可以从源文件里面直接复制获取。
或者参考IFEC翻译的这篇文章：
下一步，创建新图层，然后在40px和128px之间创建选区，填充颜色#2c3137.
步骤4：在标题栏添加应用的标题和Logo
步骤5：画一个放大镜icon，圆形结合圆角矩形即可，颜色和App Logo相同。再画一个选项icon，圆角矩形即可，颜色和App
Logo相同。
步骤6：在128和220px水平参考线之间的区域创建选区，填充颜色和上一选区颜色一样。然后在两个区域之间添加2px，不透明度80%的亮色的分割线。
步骤7：选择文字工具，添加分类；为了暗示所选中的分类，所选中的分类要用粗体、亮色；其他用普通粗细，暗色。
然后“杂志”复制一份，使用粗体+亮色，然后不透明度设置为0%，暂时隐藏，“首页复制一份”，常规体+暗色，不透明度设置为0%，暂时隐藏
步骤8：在菜单项的左右添加箭头，使用圆角矩形即可。
步骤9：背景填充为标题栏和菜单栏的颜色，确保背景图层处于GUI元素下方。
步骤10：在主题区域中，划出如下图选区，填充颜色#3f464e
添加图层样式，描边，内阴影，外发光。具体参数如下。
步骤11：在形状上方画一个白色圆角矩形，我们会在这个区域放置图像。
设置图层样式内发光，图层样式若不满意可不设置。
步骤12：添加图像，然后创建剪贴蒙版
然后添加文本图层，利用尺寸，颜色，粗细，来营造清晰的阅读层级，最后添加几个按钮图标。
步骤13：其他几个矩形同理
步骤14：先把主要区域的矩形图层全部隐藏，然后构建一个较大的矩形区域，这将应用到选择具体卡片后的细节界面，做完后，此图层组不透明度设置为0%
2.、触控点
步骤1：创建新图层，命名为“Tap”，画一个白色形状，不透明度70%
步骤2：复制这个圆形，扩大，去掉填充，描边设置为3pt白色，继续复制，扩大，描边2pt，完事后居中对齐
隐藏tap图层组，因为刚加载完界面是不会显示触控点的，但是当选择元素产生转场时会出现。
3.、滚动效果
步骤1：现在，终于开始做UI动态演示效果了，打开时间轴面板，创建帧动画，按下图那个红色划线按钮，创建新帧
步骤2：显示Tap图层组，隐藏两个描边圆，用来代表滚动手势。当开始滚动时，两个描边圈也出现，涟漪效果能够突出滚动手势。
步骤3：第一帧1s，第二帧开始帧延迟设置为0.2s
步骤4：添加帧
步骤5：显示Tap图层组所有突出。使用移动工具，来上移Tap图层组和主要内容图层组
步骤6：为了让滚动效果更流畅，选中当前帧和前一帧，点击时间轴面板中得选项，选择过渡，设置如下：
现在，便有稍微流畅的效果了。
步骤7：如果感觉动效有点慢，想让它快点，那么可以将帧延迟设置为0.1s
播放一下，不要忘记循环次数选择永远，更好地观摩效果以便调试
步骤8：现在我们想让界面滚动回来，我们需要复制第二帧到最后一帧；拷贝单帧，选择粘贴单帧，将其移动到最后一帧。
步骤9：同步骤7，选择过渡
添加新帧，隐藏Tap图层组。
效果演示：
4、点击菜单分类项效果
步骤1：现在想要设置点击菜单项后的效果。首先，创建新的帧0.5s，然后再创建一个帧，在这个帧里面，将首页加(粗版)不透明度设置为0%，常规从0%-&100%；杂志(粗版)不透明度设置为100%。常规从100%-&0%
步骤2：激活Tap图层组，将其移动到杂志选项附近，然后将帧延迟设置成0.2s
步骤3：创建新帧，延迟0.1s，隐藏tap图层组中最细的描边
步骤4：再添加一帧，再隐藏剩下的那个描边
步骤5：添加新帧，隐藏tap圆
步骤6：创建新帧，将和杂志无关的内容项不透明度设置为0%，这里修改了最后一个作品。
步骤7：依旧在这一帧中，将和杂志相关项上移
步骤8：在当前帧和上一帧直接选择过渡，为了加速动效，要添加的帧数选择3
步骤9：最后一帧设置延迟1s
效果展示：
5.、点击具体项效果
步骤1：创建关键帧，延迟0.2s,显示Tap图层组(移动到具体项位置)
步骤2：添加新帧，延迟0.1s,隐藏最细的描边；再添加新帧，隐藏次细描边。
步骤3：添加帧，隐藏Tap圆图层。添加帧，将具体项大图不透明度设置为100%，将图中的小项不透明度设置为0%
步骤4：在当前帧和前一帧添加过渡，要添加的帧数5，效果：
6.、嵌入到手机模板里
步骤1：时间轴面板，选择将帧数拼合到图层
每一帧都变成了图层
步骤2：在图层面板中选择所有帧，转换为智能对象，然后点击转换为视频时间轴
步骤3：将智能对象复制到模板PSD里面
步骤4：选择智能对象，按cmd+(Control-T)，按住CMD/Control来调整每个点。
步骤5：保存为web所用格式，ok成功。如果对效果不满意，可以导出城视频，然后导入到AE中合成。
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。}