通往GIF大师之路:简单几步教你轻松做出优质高清动图

2018-01-23 11:17:42 517点赞 3744收藏 163评论

友情提示:本文干货满满,强烈建议大家先点⭐收藏文本,学习效果更佳

通往GIF大师之路:简单几步教你轻松做出优质高清动图

在评论区中经常被值友问起:“楼主你的动图好高清呀!是怎么做的呀?”看到这样的提问,我也有点小骄傲呀!只可惜在评论里篇幅有限,没办法给大家详细展示。

通往GIF大师之路:简单几步教你轻松做出优质高清动图

所以今天就趁这个机会,给大家分享下我个人制作GIF动图的一些经验。闲话少说,大家一起上车咯!

素材拍摄

通往GIF大师之路:简单几步教你轻松做出优质高清动图

▲要想让GIF更高清,优质的视频素材是第一步。所以我会推荐用微单或者单反拍摄视频素材。当然现在手机的拍照效果也非常强了,用手机拍也是完全OK的。

通往GIF大师之路:简单几步教你轻松做出优质高清动图

▲但不管是手机还是单反。我都强烈建议大家尽量使用三脚架,或者配合手持稳定器拍摄。因为画面晃动明显的话,后期制作出来的GIF图,效果会大打折扣。


GIF动图制作

通往GIF大师之路:简单几步教你轻松做出优质高清动图

▲素材准备好了,下面就开始今天的正片了。首先要祭出主角——Photoshop!我这里用的是新版的Photoshop CC 2018。用旧版也没关系,只要不低于CC就行。

通往GIF大师之路:简单几步教你轻松做出优质高清动图

▲然后打开PS,将视频素材拖进界面。然后界面会出现一个时间轴。没错!PS除了处理图片之外,还有简单的视频剪辑功能。如果视频导入后没有出现时间轴的话,可以在菜单栏中找到:窗口→时间轴,勾选打开即可。

通往GIF大师之路:简单几步教你轻松做出优质高清动图

▲因为动图不能太长,所以要去粗取精,对素材进行剪辑。导入视频后,先播放一下。大概判断下要保留哪些,剪掉哪些。然后拖动光标到要断开的位置,按下旁边的“小剪刀”。把视频断开之后,就可以轻松的删掉那些多余的片段了。

通往GIF大师之路:简单几步教你轻松做出优质高清动图

▲剪辑到素材剩下5~10秒,就比较合适了。如果想调整下动图的节奏,可以在时间轴上按右键,可以加快或者减慢播放速度。

通往GIF大师之路:简单几步教你轻松做出优质高清动图

▲因为一般拍摄视频都是16:9的比例,比较细长。不喜欢的话可以用裁剪工具,让动图的主体部分会更突出一些。

通往GIF大师之路:简单几步教你轻松做出优质高清动图

▲几个步骤下来,调整得差不多了。播放一下效果也没问题,就可以保存成动图了。点击PS菜单中的:文件→导出→储存为Web所用格式(旧版)。

通往GIF大师之路:简单几步教你轻松做出优质高清动图

▲打开导出界面,渲染一会之后,就能预览制作好的动图。注意“循环选项”这里,要选择“永远”,不然GIF图播放一次后就会停止了。按理说到这步,GIF动图已经制作好了,只要保存就大功告成了。但是……

通往GIF大师之路:简单几步教你轻松做出优质高清动图

▲这样制作出来的GIF动图,通常体积非常大,像我这里短短几秒就由将近60兆了。这么大的体积非常不利于传播。所以下面就要想办法,把GIF图的尺寸压一压。

GIF文件压缩

其实GIF已经是超过30岁的“老古董”了。所以要控制好文件的尺寸,非常地麻烦。根据我的实践经验,一般要从分辨率、帧率、色彩和仿色几个方面去处理。

(友情提示:下面的步骤比较复杂,嫌麻烦的话可以直接略过。后面我会提供简单的方法)

通往GIF大师之路:简单几步教你轻松做出优质高清动图

▲首先是帧率。在PS主界面下,找到时间轴旁的菜单,按下“设置时间轴帧速率…”。就可以设定动图的帧率。喜欢玩游戏的朋友,对这个概念都不会陌生。简单来说就是帧率越高,动图就越流畅连贯;帧率太低则会出现顿挫感。

一般我会设置15帧左右,如果文件还是很大,可以设成10帧。再低就成PPT了通往GIF大师之路:简单几步教你轻松做出优质高清动图

通往GIF大师之路:简单几步教你轻松做出优质高清动图

▲然后是分辨率。在PS主界面(图像→图像大小),或者GIF导出界面,都可以调整分辨率。分辨率越高,自然就越高清。一般来说横向600像素比较理想,能平衡清晰度和尺寸。如果要进一步压缩,可以在450~600像素之间调整。

通往GIF大师之路:简单几步教你轻松做出优质高清动图

▲最后当然是最重要的。在GIF导出界面,其他参数保持默认,只看“颜色”和“仿色”两个选项。这两个参数对动图的画质影响是最大的。颜色的可选范围是2~256,而仿色则是0~100%。

通往GIF大师之路:简单几步教你轻松做出优质高清动图

▲不谈深奥的技术原理,咱来看图说话。上面四个截图,分别对应3种GIF动图压缩的参数组合。颜色自然是越丰富越好。图2是256色+100%仿色,画质最好,但是文件也最大。如果完全去掉仿色,就成了图4,虽然文件大小骤减,但色彩的“断层”非常难看。所以权衡之下,图3的参数组合画质能够接受,同时文件尺寸也适中。

在实际操作中,颜色和仿色没有固定的最佳参数。只能靠自己多试几个,找找感觉。调到合适的尺寸和画质,就可以储存文件了。


懒人一键压缩工具

上面这么多的步骤,其实我自己都觉得麻烦通往GIF大师之路:简单几步教你轻松做出优质高清动图 。想偷懒的话,给大家推荐一个小工具:SOOGIF在线压缩器点我传送

通往GIF大师之路:简单几步教你轻松做出优质高清动图

这个工具用起来就简单多了,选择你要压缩的目标尺寸,再把提前准备好的GIF图传上去。嗖的一下就压缩好了。虽然画质比不上自己手动处理,但胜在够简单。

不管是手动压缩、还是利用工具一键压缩。我都习惯把动图控制在5M以内,浏览的体验最好。实在压缩不了的话,7M左右也可以。但不要超过8M,毕竟SMZDM单张图片限制8M,再大就传不上去了哈。

高级玩法1:调节画质

虽然前面就说了,素材的质量很重要。但如果前期条件限制,没法尽善尽美的话,后期也可以简单调整一下。

通往GIF大师之路:简单几步教你轻松做出优质高清动图

先选中你要调整的图层。然后找到“调整”选项卡(默认在图层的上面,如果没有找到的话可以在“窗口”菜单里打开),就可以对画面进行简单的调节。一般来说调节下曝光曲线、饱和度、色彩平衡就OK了。

通往GIF大师之路:简单几步教你轻松做出优质高清动图

另外要注意,在视频模式下,不要用“图像-调整”里的工具去调节画面,因为这些工具只会修改当前1帧的效果,而不是整个画面。

高级玩法2:增加水印、文字

通往GIF大师之路:简单几步教你轻松做出优质高清动图

最后当然少不了要给GIF图加上一点个性啦。这里以添加文字水印为例。先点击文字工具、就可以在画面上打上我的ID。然后在图层这边,把文字图层拖到最顶。最后在时间轴这边,调整文字的长度,就OK了!

通往GIF大师之路:简单几步教你轻松做出优质高清动图

如果想加入图片水印的话,操作也是类似的,只不过是把文字换成图片。整个核心依然是PS中最基础的图层关系。灵活搭配时间轴的话,还能玩出不同的花样。

总结

通往GIF大师之路:简单几步教你轻松做出优质高清动图

以上就是我制作动图的一些经验。其实GIF图的世界非常广阔,上面提到的也不过沧海一粟。不过能融会贯通的话,肯定也能给自己的原创、晒单增加点活力。

通往GIF大师之路:简单几步教你轻松做出优质高清动图

个人才疏学浅,上面的内容难免有错漏,这里只是起个抛砖引玉的作用。如果大家有任何疑问,都欢迎在评论里和我交流。觉得不错的话,欢迎点赞+收藏配合打赏效果更佳通往GIF大师之路:简单几步教你轻松做出优质高清动图 。我们下次再见通往GIF大师之路:简单几步教你轻松做出优质高清动图

展开 收起

JINGDONG 京东 健康甄选 超声波洁牙套餐 单人洁牙+抛光

JINGDONG 京东 健康甄选 超声波洁牙套餐 单人洁牙+抛光

89元起

宝满 WPS2019视频教程 表格文字演示word/excel/ppt办公office在线课程

宝满 WPS2019视频教程 表格文字演示word/excel/ppt办公office在线课程

暂无报价

苏曼网校 Word2016 从入门到精通 视频教程

苏曼网校 Word2016 从入门到精通 视频教程

暂无报价

Photoshop cc2018 全套速成 入门视频课程

Photoshop cc2018 全套速成 入门视频课程

暂无报价

Photoshop CC 全套入门 自学视频课程

Photoshop CC 全套入门 自学视频课程

暂无报价

CAD2019 零基础入门到精通 全套视频课程

CAD2019 零基础入门到精通 全套视频课程

暂无报价

沪江网校 微软MOS认证专业级Word+Excel+PPT(13版)【11.11专享学霸班】

沪江网校 微软MOS认证专业级Word+Excel+PPT(13版)【11.11专享学霸班】

暂无报价

PPT office2016 全套 视频课程

PPT office2016 全套 视频课程

暂无报价

沪江网校 微软MOS认证专业级Word+Excel+PPT(13版)【全额奖学金班】

沪江网校 微软MOS认证专业级Word+Excel+PPT(13版)【全额奖学金班】

暂无报价

沪江网校 微软MOS认证专业级Word+Excel+PPT(13版)【特惠班】

沪江网校 微软MOS认证专业级Word+Excel+PPT(13版)【特惠班】

暂无报价

photoshop cc 广告平面设计在线课程

photoshop cc 广告平面设计在线课程

暂无报价

AutoCAD 室内设计 全套基础基础入门 视频课程

AutoCAD 室内设计 全套基础基础入门 视频课程

暂无报价

PS零基础 全套案例 视频课程

PS零基础 全套案例 视频课程

暂无报价

圈外同学 IDP职业发展规划课

圈外同学 IDP职业发展规划课

暂无报价

CAD2019 机械制图 机械设计制图

CAD2019 机械制图 机械设计制图

暂无报价

Photoshop cs6 平面设计零基础入门 自学基础班 视频课程

Photoshop cs6 平面设计零基础入门 自学基础班 视频课程

暂无报价
163评论

  • 精彩
  • 最新
  • 首图GIF为,电影《消失的爱人》中的片段。
    电影素质绝佳,值得推荐。

    校验提示文案

    提交
    好眼力 [赞] 同推荐!

    校验提示文案

    提交
    收起所有回复
  • 个人觉得“高清”没有落实。其他没毛病。

    校验提示文案

    提交
    因为gif格式最多只有256色,所以没法像视频一样清晰。再加上上传到smzdm之后又会被二次压缩。如果你是用流量看这篇文章的话画质还会再差一些。所以我这个已经是尽可能地清晰了。

    校验提示文案

    提交
    256色可以理解,所以我我点进来之前是想看看有什么办法优化这256色的仿色,结果好像没看到新鲜东西。ZDM二次压缩是说加右下角水印的过程?我发现这个好像有点随机,有些GIF被加了水印有些又没被加。我是电脑上看的。

    校验提示文案

    提交
    还有1条回复
    收起所有回复
  • 这么复杂?用爱奇艺万能播放器,菜单上有个生成GIF选项,想在哪里生成就在哪里生成,控制10秒左右即可,有大图,中图,小图各种选项,,,纯粹傻瓜式,一二秒即可生成。。

    校验提示文案

    提交
    简单的方法当然有很多啦!我这个方法虽然复杂,但是可以在比较小的体积下获得比较好的gif画质~这是其他一键生成工具不能比的

    校验提示文案

    提交
    收起所有回复
  • 受益良多,我都是直接用一闪或者imgplay制作gif,10秒内容导出来高清都是10几20兆,不知是用它自带压缩的高清,还是用po主压缩软件更好

    校验提示文案

    提交
    app压缩一般是不如PS压缩的。至少我还没遇到过什么软件的压缩效果比PS还好的~

    校验提示文案

    提交
    GIF应该是无损的,只能改变颜色数调节大小。除非smzdm把你传的256色改成64色,并不会影响图片质量。

    校验提示文案

    提交
    还有1条回复
    收起所有回复
  • 谢谢教程,感觉还是不清晰,期待高阶版

    校验提示文案

    提交
    因为gif格式最多只有256色,所以无论如何都不能像视频一样清晰。再加上上传到smzdm之后又会被二次压缩。所以我这个已经是尽可能地清晰了。

    校验提示文案

    提交
    收起所有回复
  • GIF再好,被大妈一压一个死样。。。

    校验提示文案

    提交
    哈哈哈,说的怎么那么对呢 [得逞]

    校验提示文案

    提交
    其实也是看运气的。有的GIF图上传之后不会被压缩。不过如果是4G网络下用客户端的话,一定会被压得没法看。

    校验提示文案

    提交
    收起所有回复
  • 手机下载GoGif 就可做Gif 图了为什么那么麻烦

    校验提示文案

    提交
    看标题,手机app做的gif图清晰度低,体积又大。

    校验提示文案

    提交
    收起所有回复
  • 谢谢分享!我一开始以为是为了做表情包哈哈,进来才知道这是一篇很正经的分享

    校验提示文案

    提交
    学会这个之后,做表情包那肯定是so easy啦!

    校验提示文案

    提交
    收起所有回复
  • 一千多收藏,评论不到50。

    校验提示文案

    提交
    这篇的方法难度比较大,评论少点也是正常的。

    校验提示文案

    提交
    收起所有回复
  • 求教的截图里有我,哈哈

    校验提示文案

    提交
    啊~这就是缘分呐!

    校验提示文案

    提交
    收起所有回复
  • 我平时做得很大,原来设置15帧就够了呀

    校验提示文案

    提交
    15帧一般就可以了。不过帧数越高肯定越流畅的。还是要多方面权衡。

    校验提示文案

    提交
    好的,明白了

    校验提示文案

    提交
    收起所有回复
  • 很实用 话说已经很久没用过电脑了 ps也忘了怎么用 ps安装包还好找么 弱弱的问一句

    校验提示文案

    提交
    很好找~官网就能轻易下到 [高兴]

    校验提示文案

    提交
    收起所有回复
  • 高手,懒人做不到啊

    校验提示文案

    提交
    确实高质量的动图制作要花点功夫的~

    校验提示文案

    提交
    收起所有回复
  • 挺实用的,就是我连ps都没有,有没有其他傻瓜式软件推荐 [喜极而泣]

    校验提示文案

    提交
    傻瓜式做gif图的手机app一搜就一大堆啦~

    校验提示文案

    提交
    收起所有回复
  • 以前一直没上心,这次第一次知道PS居然能处理视频,这么牛!拜读了!开启新天地了!

    校验提示文案

    提交
    PS真的很神奇,能修图、画画、剪辑视频、设计网页。极为强大

    校验提示文案

    提交
    收起所有回复
  • 之前研究喜欢的单机游戏想做几个gif捣鼓过,也是网上看到说用ps。请问大神为什么我做的它“动”到一半会停下不动了?还有,能做多长时间的呢?做个20,30…秒的可不可以?

    校验提示文案

    提交
    到一半不动了,大概是因为没有设置永久循环播放。gif图理论上是没有时常限制的。我见过1个小时的。

    校验提示文案

    提交
    有一次看推文,看到一个倒计时的动图,看了10分钟还没停下来 [哭泣]

    校验提示文案

    提交
    收起所有回复
  • “不要用“图像-调整”里的工具去调节画面,因为这些工具只会修改当前1帧的效果,而不是整个画面。”——-是因为只选中了1帧,选图层的时候可以选中所有帧 [鼓掌]

    校验提示文案

    提交
    自己琢磨了一下,没成功。请教下具体操作是怎样的?

    校验提示文案

    提交
    收起所有回复
  • 那个逐行扫描跟隔行扫描这些gif有得到吗?

    校验提示文案

    提交
    不是很了解你问的是啥 [喜极而泣]

    校验提示文案

    提交
    就是更专业的东西- -不过好像GIF用不着

    校验提示文案

    提交
    还有1条回复
    收起所有回复
  • 平时直接相机连拍,后期用个软件直接就能做gif,拍拍朋友还挺有意思的

    校验提示文案

    提交
    用连拍做动图应该顿挫感比较强,说不定还会有点鬼畜的味道 [惊喜]

    校验提示文案

    提交
    平时用10张一秒感觉还不错,20张一秒基本没问题了。另外拍的多后期可以调整一下帧数。

    校验提示文案

    提交
    收起所有回复
  • 请问楼主“总结”后面那两个动图里逐个出现的效果怎么做的呀?

    校验提示文案

    提交
    在PPT里做的动画效果,然后录屏转换成GIF的

    校验提示文案

    提交
    谢谢楼主! [开心] 紫薯布丁~~~

    校验提示文案

    提交
    收起所有回复
提示信息

取消
确认
评论举报

相关好价推荐
查看更多好价

相关文章推荐

更多精彩文章
更多精彩文章
最新文章 热门文章
3.7K
扫一下,分享更方便,购买更轻松