Photoshop简单6步把Gif动效图嵌入到手机模版

2016-02-15 20:32 83 1 收藏

最近很多朋友喜欢上PS,但是大家却不知道如何去做,别担心有图老师给你解答,史上最全最棒的详细解说让你一看就懂。

【 tulaoshi.com - PS 】

前天介绍了如何用PS打造高大上APP效果展示图,今天出个进阶版,Payshare来教同学们把Gif动效图嵌入到手机模板上,高大上的效果实操起来非常简单,喜欢的朋友一起来学习吧。

很多设计师可以做出动效Gif,但不知道如何嵌入到模版里如下图这样展示:

Photoshop简单6步把Gif动效图嵌入到手机模版,PS教程,图老师教程网

昨天有个设计妹子问我这个问题,既然是妹子那我就花五分钟教你嵌入Gif到模板。

1. 首先利用Hype 或者Pixate做出一张动态的Gif 图如下:

(注:AE 可以保存成.Mp4 ,Pixate 可以录屏,Hype可以直接转换成Gif,视频格式可以通过软件或Photoshop转换成Gif ,总之就是做出你想要的动效Gif)

Photoshop简单6步把Gif动效图嵌入到手机模版,PS教程,图老师教程网

2. 用Photoshop打开Gif 图片,窗口-时间轴面板,单击选择将帧拼合到图层,这样就把所有的帧转换为了图层:

Photoshop简单6步把Gif动效图嵌入到手机模版,PS教程,图老师教程网

3. 继续单击转换为视频时间轴(注:视频时间轴才可以一个图层进行动画)

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/ps/)

Photoshop简单6步把Gif动效图嵌入到手机模版,PS教程,图老师教程网

4. 选择图层面板中所有图层右键转换为智能对象:

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/ps/)

Photoshop简单6步把Gif动效图嵌入到手机模版,PS教程,图老师教程网

5. 将智能对象拖到事先准备好的模板里面,通过嵌套的智能对象放入手机模板或者通过Command+T改变透视关系,然后创建视频时间轴,播放看一下效果。最后保存web所用格式。(注:保存web格式时可以通过右下角的百分比调整文件大小。)

Photoshop简单6步把Gif动效图嵌入到手机模版,PS教程,图老师教程网

6. 看一下整体效果:

Photoshop简单6步把Gif动效图嵌入到手机模版,PS教程,图老师教程网

7. 以上动效是用Pixate制作的。

来源:http://www.tulaoshi.com/n/20160215/1563634.html

延伸阅读
标签: PS PS基础
效果图: 第一步:新建600*600的画布,白色填充,执行【滤镜-杂色-添加杂色】,效果如下 执行【滤镜-模糊-动感模糊】,效果如下 执行【滤镜-模糊-极坐标-扭曲】,效果如下 第二步,给该图层添加渐变叠加,设置如下: 效果如下: 第三步,调整色阶,设置如下: 效果如下: 第四步,渐变映射,设置如下: ...
标签: PS PS教程
最终效果:   一、打开原图,用仿制图章工具将文字周围部分文字去掉 二、多变形套索工具勾选要保留的人物主体反选、羽化3~5像素,然后DEL删除 三、打开素材图复制过来,适当调整大小和位置 四、如果素材图有空白地方,可以从原图上复制一部分过来补充满整个画布大小 [next] 五、调整好图像图层相对位置如左图,原图...
AE制作超炫路径动效教程   这篇教程教AE特效学习者们,和APP界面动画制作学习者们使用AE制作超炫路径动效教程,教程非常实用。在APP的动效中算是非常酷炫的效果了,推荐过来和飞特网的朋友们一起分享一起学习,希望大家喜欢这篇教程,我们先来看看最终的效果图吧: 首先,准备素材,我采用直接在手机截屏的方法,获取所需图片...
标签: 宝宝 小孩
简单6步 快速处理宝宝烫伤 宝宝在成长过程中,尤其是学会爬、坐、走之后,烫伤是非常容易发生的。那么宝宝烫伤后应该怎么处理呢?教你简单6步,快速处理宝宝烫伤。 宝宝烫伤后的应急处理 当宝宝不慎被烫伤时,父母一定要保持镇定,第一时间进行必要的应急处理,以使烫伤所造成的伤害降到最低程度。具体步骤如...
iphone6s使用技巧动图演示教学   国外网友分享的一系列iPhone6s和最新系统的那些新功能和技巧们!!新机已经到手或在路上的壕们都可以收了。 1、按住屏幕拉开,就不需要按HOME键也可以切换app了。 2、可以吧LOVE照片设置为桌面,按住的时候你的桌面就可以动了。 3、按住键盘,就可以控制指标,让鼠标滑动。 ...

经验教程

410

收藏

59
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部