APP展示图，教你把Gif动效图嵌入到手机模版
来源：优设网
作者：Jaret_杰瑞特
前天介绍了《》，今天教大家怎么把Gif动效图嵌入到手机上，十分简单，只要几步就能做出来。
很多设计师可以做出动效Gif，但不知道如何嵌入到模版里如下图这样展示：
昨天有个设计妹子问我这个问题，既然是妹子那我就花五分钟教你嵌入Gif到模板。
1. 首先利用Hype 或者Pixate做出一张动态的Gif 图如下：
（注：AE 可以保存成.Mp4 ，Pixate 可以录屏，Hype可以直接转换成Gif，视频格式可以通过软件或Photoshop转换成Gif ，总之就是做出你想要的动效Gif）
2. 用Photoshop打开Gif 图片，窗口-时间轴面板，单击选择将帧拼合到图层，这样就把所有的帧转换为了图层：
3. 继续单击转换为视频时间轴（注：视频时间轴才可以一个图层进行动画）
4. 选择图层面板中所有图层右键转换为智能对象：
5. 将智能对象拖到事先准备好的模板里面，通过嵌套的智能对象放入手机模板或者通过Command+T改变透视关系，然后创建视频时间轴，播放看一下效果。最后保存web所用格式。（注：保存web格式时可以通过右下角的百分比调整文件大小。）
6. 看一下整体效果：
7. 以上动效是用Pixate制作的，源文件下载：/s/1mg0DFtu全教程完,学完记得交作业。如果本教程对您有所帮助，请推荐给你的朋友。
打开ps，跟着教程做一遍，做完的图要到这里交作业：
教程有看不懂的地方，可以到论坛发帖提问：
加官方微信，随时随地，想学就能学：ps_bbs，或扫右侧二维码！
关注我们微博：
想学更多的同学，可以订阅我们邮件，每天都有新教程发给你：
看完教程希望大家来这
欢迎投稿原创或转载教程：
旧一篇： 新一篇：
免责声明：本站文章均由网友原创投稿或由网友转载自第三方，其版权归原作者所有，如出现资料错误或侵权，请通过邮箱联系修正或删除："如何在图片上加文字"的糗事
你可能感兴趣:
糗事百科为大家收集了很多的如何在图片上加文字的糗事，各种关于如何在图片上加文字的爆笑经历、尴尬时刻和开心视频，想持续关注如何在图片上加文字的糗事就收藏本页吧.you have been blockedPS教程！教你轻松6步把Gif动效图嵌入到手机模版
优秀网页设计联盟-SDC-网页设计师交流平台-听讲座，聊设计，找素材，尽在优设网
& / & & / & 正文
Hi,我是优设小编
PS教程！教你轻松6步把Gif动效图嵌入到手机模版
编者按：前天介绍了如何用PS打造高大上APP效果展示图，今天出个进阶版， 来教同学们把Gif动效图嵌入到手机模板上，高大上的效果实操起来非常简单，轻松6步搞定，来收！
上期教程：
很多设计师可以做出动效Gif，但不知道如何嵌入到模版里如下图这样展示：
昨天有个设计妹子问我这个问题，既然是妹子那我就花五分钟教你嵌入Gif到模板。
1. 首先利用Hype 或者Pixate做出一张动态的Gif 图如下：
（注：AE 可以保存成.Mp4 ，Pixate 可以录屏，Hype可以直接转换成Gif，视频格式可以通过软件或Photoshop转换成Gif ，总之就是做出你想要的动效Gif）
2. 用Photoshop打开Gif 图片，窗口-时间轴面板，单击选择将帧拼合到图层，这样就把所有的帧转换为了图层：
3. 继续单击转换为视频时间轴（注：视频时间轴才可以一个图层进行动画）
4. 选择图层面板中所有图层右键转换为智能对象：
5. 将智能对象拖到事先准备好的模板里面，通过嵌套的智能对象放入手机模板或者通过Command+T改变透视关系，然后创建视频时间轴，播放看一下效果。最后保存web所用格式。（注：保存web格式时可以通过右下角的百分比调整文件大小。）
6. 看一下整体效果：
7. 以上动效是用Pixate制作的，源文件下载：
欢迎关注作者的微信公众号哟：
【动效神器Hype零基础入门教程系列】
先聊一下这个软件的强大功能，附上简单教程！
台湾设计师叫你用Hype做原型过场！
美丫姐手把手教你用Hype做Path菜单动画！
【优设网 原创文章 投稿邮箱：】
================关于优设网================
“优设网“是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：。
设计微博：拥有粉丝量104万的人气微博 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：
我们的团队
大家在关注}