【Medium UX译文】如何快速制作一个完美的追波动效

原文信息:

标题:How to prepare perfect GIFs for Dribbble in seconds

作者:Vlad Fedoseyev

地址:https://uxplanet.org/how-to-prepare-perfect-gifs-for-dribbble-in-seconds-c683a44deae

已获得作者允许

译文有所改动

翻译:ICEH


写在前面:

此篇推文将介绍一种Mediun上看到的高质量转化gif动画格式的方法,仅翻译了其中最主要的部分。

这种方法是利用Mac OX系统的终端命令行转化视频文件成gif,其优点是简单方便,转化速度快,文件比较小,质量也挺高的,而且不局限于各种格式的视频文件。

当然缺点就是局限于Mac OX系统,而且需要输入一些代码(不过其实很简单,复制改动关键词就可以)。

再逼逼一下:

动效在设计领域中越来越成为一种趋势,动效的加入会使作品跳出静态的维度,他既能更好的表达设计师的想法创意,更能给用户、观众带来良好的体验。

不管你从事哪一类型的设计,UI、品牌、插画等等都好,懂动效的设计师就像金子一样闪闪发光。

那么我们在日常的设计中,花了无数个小时用AE、Principle等动效设计软件制作了各种精美的动画,它看起来很神奇,一切似乎都没问题......剩下的唯一一步就是制作一个好的GIF文件,而导出gif文件常常是一件比较头疼的问题。

经过尝试我们都知道,用AE、Principle直接导出的gif质量非常差,而大多数人也找到比较良好的替代方法,就是直接导出avi、mov等格式的视频文件,然后在ps里面进行简单转换,大多数时候这是非常棒的方法,效果也还很不错。

但是ps里面转gif我们会经常遇到各种各样的问题,比如他有500帧的丑陋限制,颜色也非常受限,调起来非常麻烦。

幸运的是,前些天在逛dribbble的时候,我就偶然发现一个设计师在Medium的uxplanet介绍一种用终端命令代码的方式来转化视频格式到gif,一开始看到“命令”“终端”我也很害怕,想必做设计的看到这些技术的都会胆怯吧。

不过操作一遍后感觉非常简单方便,最重要的是转化效果超级赞。

原文是英文的,作者介绍的比较简单,我把坑都踩了一遍,于是顺便想当下搬运工,把原文这一部分简单翻译加上一些提醒在这里介绍一下,方便各位老铁一起学习,有一点点改动,下面就正式介绍啦。

FFMPEG

FFMPEG是一个命令行工具,它是基于Mac OX系统的小工具,可以让你使用几乎所有类型的媒体文件执行任何操作。

不过它需要在终端先下载Homebrew(Mac OS平台下的软件包管理工具,拥有安装、卸载、更新、查看、搜索等很多实用的功能)

如果“命令行”和“终端”这两个词听起来很可怕,请不要担心。作者已经写好了流程,只要一步一步跟着操作,很简单的,我保证~

1、安装Homebrew

打开Mac OX系统的终端,输入下面安装Homebrew命令,回车运行命令,这个过程等待大概几分钟好像,静等安装完毕就OK

/usr/bin/ruby -e "$(curl -fsSLhttps://raw.githubusercontent.com/Homebrew/install/master/install)"

2、安装FFMPEG

同样,打开Mac OX系统的终端,输入下面命令,回车,静等安装,挺快的,安装完就是操作了

brew install ffmpeg

3、导航到视频文件所在的文件夹

在终端输入导航到文件夹位置

cd path/to/your/file

建议在桌面建一个英文名文件夹,然后把视频文件改成英文名放进去,查看简介信息复制文件夹位置,比如我在桌面建了文件夹“ae” /Users/huize/Desktop/ae

那我在这里应该输入的是“cd /Users/huize/Desktop/ae”,回车运行命令

4、创建调色板文件

步骤3回车之后,继续输入下面命令,需要注意一些东西:

input.mp4 是你要转换的视频文件(还可以是mov,avi等等,比如这里我的文件夹里视频叫test.avi我就需要更改成test.avi)

fps=25 是你在GIF中需要的帧速率(默认25帧/秒就行了,当然可以改动)

scale是尺寸比例,这里是明确要求FFMPEG将视频大小调整为Dribbble长宽比(可改但无需更改)

palette.png 是你的输出调色板文件(这个文件名也可改但无需更改,直接就行)

ffmpeg -i input.mp4 -vf \ fps=25,scale=800:600:flags=lanczos,palettegen palette.png

比如这里我应该输入的是“ffmpeg -i test.avi -vf \ fps=25,scale=800:600:flags=lanczos,palettegen palette.png”

回车运行脚本,此时你会得到一张像下面这样的图片(在文件夹里),不需要管他,继续就行

palette.png


5、将视频转换为GIF

继续输入下面命令,同样需要注意一些东西:

input.mp4 是我们用于生成调色板的相同输入文件(跟前面统一,比如我的test.avi)

palette.png 是上一步的结果(文件名如果上一步改了就要统一)

fps 应该保持不变

尺寸比例 也保持不变

output.gif 是你的输出文件

ffmpeg -i input.mp4 -i palette.png -filter_complex fps=25,scale=800:600:flags=lanczos[x],[x][1:v]paletteuse output.gif

比如这里我应该输入“ffmpeg -i test.avi -i palette.png -filter_complex fps=25,scale=800:600:flags=lanczos[x],[x][1:v]paletteuse output.gif”

回车运行脚本,铛铛铛完成~

是不是很简单其实,效果还超级赞的。

作者Vlad Fedoseyev 的作品


6、优化,检查文件大小

文件就输出在同一个文件夹里,到这里基本上就算结束了,但如果输出结果大小超过10 MB,则需要降低fps并重复上面步骤以获得完美结果。


作者的注释:

也许你问我们为什么需要颜色调色板文件?

简而言之,GIF支持256种颜色,如果转换器选择了错误的调色板,结果将看起来很奇怪。您可以在以下示例中轻松注意到小点:

仔细观察可以看到很多点点


可能踩的坑:

1、所有字符都要英文模式下输入,如果原文用了中文网页翻译,不要直接复制,因为那样子会有bug,需要转成英文模式下复制(可以点开原文在英文模式下复制它的代码)

2、自己输入的话,命令行中的空格键什么的都不能省略

3、第3步导航到视频文件所在的文件夹的时候注意要在前面输入cd再输入文件位置,刚开始看原文我以为不需要也折腾了一会

......

正如你所看到的,这种方法制作gif并不困难,它其实是非常高质高效的。有些事情你觉得困难不敢踏出第一步就会永远停留在原地继续浪费时间,相信我,尝试一下吧,不要害怕FFMPEG,你会爱上这种方法的~

希望这篇文章对你有用~

要不点个赞再走呗~

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,457评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,837评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,696评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,183评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,057评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,105评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,520评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,211评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,482评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,574评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,353评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,213评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,576评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,897评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,174评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,489评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,683评论 2 335

推荐阅读更多精彩内容