打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
GIF动图全攻略!新媒体运营进阶技能(文案匠实操分享)

文章配图的GIF动图怎么做?

已经记不清有多少匠友

在后台和留言区问过这个问题

我也答应了你们要出教程

然后

……

……

……

……

今天终于有时间兑现!

掩面哭泣

挖了很久的坑,终于把它填上


©所用工具:Photoshop

今天的教程非常详细,一步一步详细解析,所用到的软件就是我们非常熟悉和常用的PS,文案匠实操分享(连文案都会,可想有多简单了吧~)智商80以上看完就会,看完不会……纳尼?不应该啊!

根据后台留言反馈,很多人急需对动态二维码的处理,那么我们就以动态二维码作为案例来一一操作。

动图有很多方式,为方便使用,我把最常见最常用的GIF分成三种,每种有不同的教程,进行详细操作。好辣,下面我们就开始吧~

常见GIF

第一种:已有GIF素材+文字/二维码

找到一张非常贴合自己需求的GIF图片,但是想加文字怎么办?想放自己的二维码怎么办?比如下面的图片:

第二种:静态图片素材变成GIF动图

想把几张静态图片变成GIF格式动图怎么办?比如这张:

第三种:Cinemagraph式

即在一张静态照片中有某一个细微的地方在细微运动,而照片中其他地方保持不动。这种方式备受广告设计青睐,不少品牌流出这种海报。

第一种

GIF+··


 ·GIF+二维码 

第一步:准备好GIF素材,及需要叠加的二维码(或者其他任何jpg都是可以的)

第二步:将原始素材图片分别拖进Photoshop中

此时GIF图片在Photoshop中,图层会显示成这样:


第三步:在最上方一排菜单栏找到【窗口】并点击展开,找到【时间轴】:


点击【时间轴】后,界面如下:

第四步:选择二维码图片界面,Ctrl+A选择,Ctrl+C复制

第五步:回到GIF图界面时间轴状态下,选择第一帧(如图红框)

(点击图片可看大图)

然后,在右侧的图层界面,选择置顶的图层(如图),Ctrl+V粘贴二维码

第六步:全选时间轴,Ctrl+T调整二维码位置及大小

Tips:如果需要再次调整二维码大小,最好先全选时间轴后,再进行调整哦,否则二维码可能在不同的地方跳动。

第七步:时间轴上,选择运动方式,“永远”(如图红框),点击播放(最下方的播放键►)预览效

(点击图片可看大图)

第八步:如果第七步确认无误,则点击菜单栏【文件】> 【导出】>【web版式】>存储为GIF,即大功告成

做出来的效果图如下:

 ·GIF+文字/二维码 

也许在使用的过程中,你们会发现一个问题:很多GIF图很美,但没有合适的位置可以加文字或二维码。

那么,想使用这张GIF图片,又想加上二维码和文字,该怎么做呢?

同上,第一步至第三步保持不变;最主要的变化为第四步和第五步

第四步:全选时间轴,然后英文输入法状态下,快捷键C,选择裁剪工具,点击画面,拉伸出合适的空间,点击确定。

第五步:在界面右侧看到图层,定位到图层1,新建图层(如图红色方框内按钮新建),填充自己喜欢的颜色,然后将该新建图层,置入图层最底层。

(点击图片可看大图)

之后,重复上面教程的第四步至第八步即可。

Tips:为GIF图加上文字,和进阶教程步骤一样,选择文字工具,在合适的位置输入文字,然后,置入底部背景图层上一层即可。

调整文字大小及位置,仍需要全选时间轴后进行哦

加底板和文字之后,成品如图: 

第二种

JPG变GIF

无论是公司新闻、产品上新、大促展示还是攻略步骤等分阶段又彼此有联系的图片,如果看腻了jpg,现在,你可以把它变成GIF啦!相信我,这次依然很简单,文案匠实操分享,下面就进入操作部分咯~

 ·JPG制作GIF

*下面教程所用图片源自美国著名时尚摄影师ERIK MADIGAN HECK,很时尚的摄影作品。

第一步:将需要做成GIF的静态图片素材拖入Photoshop(我选的是6张摄影作品)

第二步:以其中一张图片为背景,用昨天分享的方法:Ctrl+A全选图层,Ctrl+C复制,Ctrl+V粘贴,依次将其他5张图片,粘贴进背景图片的图层中,并Ctrl+T调整图片大小至一致(如图红框所示)

第三步:和昨天一样,在上面菜单栏依次点击【窗口】>【时间轴】,会得到下图,选择创建帧动画(红框正中下拉菜单),并点击(如下图红框所示)

第四步:点击之后,得到如图;然后点击红框区域,复制所选帧,

图层共有6张照片,所以,我复制了5次,如图,当前时间轴上显示共6张

细心的匠粉有没有发现,时间轴上,每张图片都是一样的,在这样的状态下,点击播放是没有任何反应的。好,我们继续,进入关键的下一步。

第五步:

1、如图,在时间轴上,选择编号为2的缩略图

(点击图片可看大图)

2、回到左侧,图层面板,点击红框部分,隐藏图层5

这个时候,有没有发现,时间轴上刚才选中的编号2的图片缩略图有了变化。

3、依照这个方法,依法炮制。即:再选择时间轴编号3的图片,回到左侧图层面板,同时隐藏编号1和编号2的图片图层。(具体隐藏哪些图片,目的是让6张不同的图片全部显示在时间轴上)

依次进行,直到时间轴上,6张图片都不一样为止。

(点击图片可看大图)

第六步:在时间轴上,点击如图所示按钮(即红框中写着“0秒”的地方),根据需要设置图片运动时长(关系到GIF图片动得快慢)

(点击图片可看大图)

我这里将它全部设置成0.5s

(点击图片可看大图)

第七步:点击播放按钮预览,确认无误后,在最上方菜单栏依次点击【文件】>【导出】>存储为web格式(如图所示),web存储界面,选择GIF,循环模式,一定要选择,“永远”,然后,点击存储即可。

Tips:如图,可调整百分比或像素值,控制GIF大小

做出来的效果图如下:

 ·JPG变GIF同时+文字/图形 

很多人有传递信息的需求,不仅想让jpg变成GIF动起来,还想加上文字,这时候我们该怎么办呢?

其实也挺简单,再接着进行加文字或图形的步骤即可,如下:

第八步:在已经做好的GIF图片中,点击文字工具,写上自己需要的文字,选择自己喜欢的字体。(需要加图形的同理)

图层面板,选择文字图层,按Ctrl+shift+]将文字图层置顶(或者直接拖动文字图层置顶,如图红框所示)

(点击图片可看大图)

按基础教程,点击播放按钮预览,确认无误后,在最上方菜单栏依次点击【文件】>【导出】>存储为web格式(如图所示),web存储界面,选择GIF,循环模式,一定要选择,“永远”,然后,点击存储即可。

加文字之后,成品如图: 

哈哈,是不是看着很高级呢~自从有了这种方式,JPG仿佛发现了新大陆,有了无限的可能性。

第三种

微细GIF

Cinemagraph式,即在一张静态照片中有某一个细微的地方在细微运动,而照片中其他地方保持不动。你应该看到过很多这种风格的广告图片,或者摄影美图。

现在,你也能做出来,开不开心?

没有自己拍适合这种形式的素材,我就以walk off the earth乐队曾经火爆全球的《Summer-Vibe》MV来解析吧。匠友们可以搜索这首歌在海边拍摄的MV来对比下。

 ·这种GIF有两种素材方式,一种是视频素材,另一种是连拍JPG,第一种稍微复杂,但是做出来的效果最好,所以主推第一种方式。(用连拍JPG做,类似昨天分享的第二种教程,然后蒙版擦除即可) 

第一步:同前两个教程一样,准备好素材拖进Photoshop中,然后在最上方一排菜单栏找到【窗口】并点击展开,找到【时间轴】打开

第二步:在视频中,用如图所示的几个按钮(播放、暂停等),逐帧找出你准备裁剪片段的开头

(点击图片可看大图)

指针会自定定位到你准备裁剪的片段开头,如图所示:

(点击图片可看大图)

第三步:如图红框部分所示,找到剪辑符号并点击,将视频拆分

第四步:重复上述第二步至第三步,找到裁剪片段的结尾

找到剪辑符号并点击,将视频拆分

(点击图片可看大图)

第五步:如图所示,在图层面板上,选择视频中不需要的图层,鼠标右键删除图层。

第六步:选择和你剪辑的视频片段,同样构图,同样机位的一张照片,或者直接从你所选片段中截图一张,导入Photoshop(截取软件这个我想就不用多说了吧,qq、微信都可以),并用Ctrl+T调整图片大小至与视频画面完全重合。

第七步:在右侧图层面板中,选择图片图层,并置顶(置顶快捷键:Ctrl+】),然后,点击添加蒙版

(点击图片可看大图)

第八步:如图所示,利用指针作为参考,在时间轴上仔细调整,拉伸或缩短(如图黑色箭头,调整),使视频与图片在时间轴上的长度相同。

(点击图片可看大图)

第九步:如图所示,选择画笔工具,黑色柔角画笔,在蒙版上擦除想要运动的区域。

TIPS:如果显示不能擦除,此时要注意时间轴,要让图片和截取视频上下完全重合,并且将时间轴指针至于起点。

第十步:点击播放按钮预览,确认无误后,点击【文件】>【导出】存储为web格式,如图所示,web存储界面,选择GIF,循环模式,一定要选择“永远”,然后,点击存储。

TIPS:如图,可调整百分比或像素值,控制GIF大小。

做出来的效果图如下:

这种制作方式对于素材要求比前两种高,所以一般品牌海报利用这种方式都是根据需要进行专门拍摄。这个MV视频素材也是我甄选之后才选中当教程。如果喜欢这种方式,可以选取类似素材或者自主拍摄来制作。

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
【GIF动图】清明节图片素材 修改后动图
轴图竖展开(配JPG,GIF图片)(好)
玩转gif图片8——后缀名的秘密
每天学点PS(一)
PS制作GIF闪烁动态效果图
【动态图】动态图片GIF素材
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服