一、前言

ps：本小节阅读大约需要3分钟。

我们先来看几个大厂的实例，感受一下视频背景所带来的超强视觉盛宴（由于上传限制，视频做了剪辑压缩处理，完整高清版请点击链接查看）

其它

腾讯官网      

奔驰旗舰级AMG

等等，看完这些大厂实例各位小伙伴们是不是也想设计出这种高逼格的效果呢？下面的教程也许会帮到你。

心理学研究曾证明，人类存在着“生动性偏见”，具有视觉显著性的信息更容易左右人们的判断。所以动态视频具有更强的代入感和信赖感。

在我们之前的APP、网页设计中高质量的背景图片、插画、高饱和度渐变等是常见的设计手法，可谓是“一张图片胜过千言万语”但同质化越来越严重，审美疲劳的用户也无法得到更好地体验。

随着我们网速的提升、5G的到来以及互联网开发技术的升级，尤其是HTML5技术对各大浏览器兼容性的不断完善，将视频作为背景素材进行使用，营造出炫酷、高逼格、超强视觉冲击力的感官效果，相比较传统的以图片为核心素材的网站/APP，在视觉表达方面拥有着无可比拟的优势。

试想一下，当网站/APP设计背景与电影相似，震撼的显示效果、灵动的表达、动听的音乐、包含着前无仅有的信息量，每一项都是传统设计手法几乎望尘莫及的。可谓是一段视频胜过千万张照片。

二、注意事项

ps：本小节阅读大约需要5分钟。

1、本文主要讲解的是web端视频背景的设计方法，原生APP后续分解（APP主要是尺寸不一样，其它和web端的设计方法都大同小异）。

2、我们需要考虑视频素材的选择是否能够展示出品牌的调性、是否符合品牌定位、目标受众能否接受，现阶段到底适合不适合使用视频背景。

技术实现上，开发会使用

所以，如果你设计的产品目标群体比较“老”，那么你就需要慎重考虑了。如果这个问题不是太大的话比如想做个品牌官网、登录页、门户页、APP下载介绍页、APP引导页等，你就可以妥妥的走起了。

3、我们除了设计剪辑一个视频外还需要一张静态图片，一般截取视频的第一帧，这样做的目的是当IE浏览器版本低于9.0的时候用这张图代替作为背景还有当有的用户网速不好的时候会先加载这个图片再加载视频，因为这个图片是视频的第一帧，所以会实现完美过度，不留一丝痕迹。

4、

我们通过 w3cschool  http://www.w3school.com.cn/html5/html_5_video.asp   看到如果我们只给开发一种mp4格式的视频的话，IE9、谷歌、苹果的safari都可以完美支持，但是火狐和欧朋浏览器却不支持。

所以我们需要搞三种格式的视频给开发（mp4、ogg、webm)，才能适配世界上的大部分浏览器，五大浏览器都有IE、谷歌（国内的360、搜狗、QQ浏览器都是谷歌+IE内核）、火狐、safari、欧朋。

5、经过我的多次项目实战经验，建议大家背景视频时长控制在12秒左右，大小控制在3兆左右，尺寸1280乘720（1920乘1080也可以但是体积有点大），这样能保证好的用户体验，注意：1280乘720一般制作全屏幕背景，如果只是网页banner或小面积视频背景，就需要根据自己设计的情况而定。

6、视频背景的网页在手机上观看体验较差，如果想适配手机端估计得需要单独切一套尺寸给开发（我做过的视频背景项目不用考虑移动端，如小伙伴有这方面的需求可以和自己公司的开发商量好即可）

三、视频剪辑、高质量导出、格式转化

ps：本小节阅读大约需要10分钟。

大家不要一看有剪辑就有发怵的心理，其实真的很简单，只要你耐心的看完我下面的讲解，按照我的步骤做，包你会剪视频！(每个步骤我都争取配图文解读和动态视频，包教包会！！学不会你来打我！！)而且随着5G的到来，现在和以后肯定是短视频、动效的时代，UI设计师想要有更高的职业发展或者建立自己的品牌影响力就必须要掌握视频剪辑以及AE/Principle动效及后期。

首先我们先YY一个项目，这个项目是一个健身机构的官网，官网首屏是视频背景，用户群体年龄段大概在20到35岁左右，首屏需要放置健身logo、slogan、健身课程等超链接。

基本信息我们已准备好，然后开始搜集背景视频所需素材，我自己常用的、高清、好用的视频素材网站有以下几个，如果自己公司有现成的、高质量的、已拍好的产品或宣传视频那再好不过了。

视频素材的选择需要考虑自身产品特点，目标受众，视频的美观性、创意性、趣味性、故事性、感染性、风格性。所以要想找到合适的视频素材需要反复思考观看哪些才是最终符合自己要求的。

根据以上这些特质，我需要找的素材要有

健身的各个项目

健身中的俊男靓女

镜头处理上尽量多移动来贴合运动主题 

镜头衔接上由于是多个项目展示所以采用硬切为主

所选画面要有张力，牢牢抓住用户眼球

开干！！！

1、新建项目

首先打开Premiere（软件安装Win/Mac版，请自行搜索），选择新建项目

为项目起个名称，为项目找个位置（强烈建议premiere工程文件和视频素材在一个文件夹中，以免丢失素材文件）

点击确定后进入工作区，红色框是素材的预览和效果控制区域、蓝色框是剪辑后的预览区域、绿色框是放置素材的区域、黄色框是时间轴剪辑视频的区域

2、导入素材

双击绿色框区域或者快捷键command/control+i 选择导入下载好的素材

3、新建序列

点击绿色框区域右下角的新建项按钮，在下拉中选择第一个序列…，然后在弹窗中选择AVCHD下面的720P  25（1280乘720 每秒25帧），也可以选择HDV下的720P  25，（ps:其它格式比如DV-NTSC、DV-PAL的区别是应用的地区不同。NTSC其标准主要应用于日本、美国，加拿大、墨西哥。PAL主要应用于中国，香港、中东地区和欧洲一带。每秒的帧数不同。NTSC每秒钟有29.97帧。PAL每秒钟有25帧。），然后在格式的下面给序列起个名称，点击确定

动图演示

4、标记入点、出点

双击素材区任意一个素材然后点一下键盘上的空格键（也可拖动时间滑块）在素材预览区观看素材，找到自己想要的视频开始的位置，点一下空格键暂停，接着点击一下入点按钮，再点一下空格接着预览到自己想要视频结束的位置暂停，点击出点按钮，拖动整个视频红框区域到v1轨道松开即可

（ps: 键盘上的左键按一下是向前一帧，shift+左是向前移动5帧，右键相反，按一下空格是暂停/播放视频，时间轴视频剪辑区的v是视频video的简写，a是音频audio的简写，素材预览区的时间标尺右单机可以选择清除入点和出点以方便标记其它时间段视频的出点和入点） 

动图演示

5、如何放大缩小素材

注意事项：我们从网上下载下来的素材可能会有各种大小，有1280乘720的，有1920乘1080的等，但是我们的画布（序列设置）选择的是1280乘720  25帧每秒，当拖动和画布尺寸、帧率不同的视频到时间轴的时候系统会提示我们是否更改画布尺寸，我们选择保持现有设置即不更改。

当素材尺寸大于画布尺寸时，显示的内容会超出我们设置的尺寸，这时候需要选中时间轴上的视频然后在屏幕的左上角切换到效果控件面板，在缩放属性的数值上，鼠标左键按住不放左右拖动直到视频缩小/放大到画布的边缘或自己想要的效果为止。（快捷操作：双击预览区域的视频，视频边界会出现控制锚点，按住shit拖动四个角的锚点即可，和ps里的contol+t操作一样）

动图演示

6、如何删除音频

如果想删掉音频，需要先把视频和音频取消链接不然会一起删掉，方法是使用移动工具选中时间轴中的视频，右单机在下拉中选择取消链接，再使用移动工具选中音频文件按键盘上的Delate键删除（快捷操作方法：时间轴上的视频在没有选中的情况下，按住键盘上的Alt键直接鼠标左键单击音频文件Delate即可）

时间轴剪辑区域的下方有个滑块左右拖动可快速查看前后时间轴的内容，变长变短相当于放大镜可详细查看剪辑内容

动图演示

7、如何剪辑

通过上面的方法我们把其它视频放到V1轨道，其实通过标记入点和出点只是一个粗剪辑的过程，视频放到轨道上以后还需要根据自己想要的效果和时长进一步剪辑。

比如第一段视频一共有五秒时长我不想要后面两秒，剪辑方法是将时间线移动到3秒的位置，默认移动工具下放到视频的后面，鼠标变成向左的箭头时，鼠标左键按住不放向前拖动到3秒的时间线即可，另一种方法是将时间线移动到3秒的位置，使用剃刀工具（快捷键C Cut的简写）在3秒时间线上点击一下视频会一分为二（快捷操作command/control+k)，移动工具选中第二段Delate删掉即可，这两种办法在我们剪辑的过程中都会用到。

当我们用上面的方法剪掉后面的两秒视频后，后面会有空隙，鼠标在空隙的地方右单机选择波纹删除即可删除空隙，后面的视频也会自动向前贴合。

轨道上的视频鼠标左键选中不放都可上下左右拖动

动图演示

8、其它常用工具

在时间轴中可以用鼠标左键框选多个视频来进行移动操作，当视频很多的时候就需要用到向后/向前选择工具（一般专业剪辑的才会碰到这种情况），当你剪辑好了四个视频，时长一共是20秒，但是想输出15秒又不想剪掉其中的内容，这时候就需要比例拉伸工具（网上的各种变声视频也是用这个工具制作：需选中视频文件，右单机选择速度/持续时间，在弹窗中把数值改成120左右确定即可，既能保证声音的清晰度又能达到变声加速的效果）

动图演示

9、如何给视频音频添加过度效果

比如我们想让视频和音频最后播放完的时候有淡出效果（视频音频慢慢消失），首先需要在窗口中调出效果面板，然后将视频过渡-溶解中的交叉溶解鼠标左键拖动到最后一个视频的尾部松开鼠标即可，音频同理

如果想让过渡效果更平缓稳重一些，鼠标选中过渡条可以左右拖动改变时长，过渡效果有很多，大家可以根据自己所剪辑片子的类型去尝试

（ps：效果属性不仅可以拖动到视频的尾部，两个视频的中间、开始的地方都可以放置，在效果控件面板中也可以更改过渡条的大小）

动图演示

10、截取视频第一帧

视频都剪辑好以后，将时间线拖动到最左侧初始位置，然后点击时间轴上方的相机（导出帧）按钮，然后在弹窗中选择要导出的位置，点击确定即可

11、高质量输出视频

在菜单栏中选择文件-导出-媒体（在预览区或时间轴剪辑区选中的情况下，快捷键command/contol + m），在弹窗中格式选择H.264，这个格式体积又小又能保证清晰度，选择要导出的位置。

如果你制作的视频有背景音乐，导出音频选项别忘了勾选，然后在比特率设置中的目标比特率和最大比特率设置到2，能最大程度的在保证清晰度的情况下进一步压缩体积（默认是10左右，太大浪费体积），最后点击导出按钮即可

12、格式转换

在上一个章节中讲到，我们需要搞三种格式的视频给开发（mp4、ogg、webm)，才能适配世界上的大部分浏览器，现在只有一个mp4文件，需要将这个mp4文件转换成一个Ogg，一个webm，经过我多次实践推荐大家使用下面这个在线视频格式转换工具，免安装用完即走、交互上手快捷方便、可自定义转出文件的大小。

地址：https://cloudconvert.com/

13、制作效果图

到目前为止我们背景视频已经设计剪辑好，第一帧图片也准备好了，我们还需要制作一个最终的展示效果给甲方爸爸、老板、开发人员进行提案或效果展示工作。

我们在sketch/ps中，将健身官网首屏的信息设计排版好以后（尺寸同样是1280乘720，注意如果文字信息较多，需要加一层半透明黑色/彩色/渐变色蒙版，以保证上方信息的可读性和易读性），合成一个层导出一张png图片，放到Premiere素材区域中，然后拖拽到V2轨道，将该图片的v2轨道时长和下方V1轨道的背景视频总时长一致，在执行上面的导出动作即可。

最终Demo效果如下

四、代码实现

ps：本小节阅读大约需要5分钟。

当你费尽九牛二虎之力做完视频背景的设计稿，又一路过五关斩六将，摒弃各路大神的指点江山，来到开发这，一句“实现不了”顿时会让你无语凝噎，前功尽弃。不过没关系看完这一小节，你们开发要再说实现不了的话，可以将以下信息打印在一张A4纸上，然后走到开发面前漏出你天使般的笑容… …

开个小玩笑，这一小节如果没有代码基础或不感兴趣的同学，完全可以跳过，设计方案通过后，将以下几个文件和其它标注切图文件给开发即可

下面讲解的是用相对简单的代码实现方法— Html+Css，来实现视频背景，视频背景上方的各种信息由于时间关系，在这篇文章中就不在用代码呈现了。

html代码如下：

html代码解读及注意点：

video标签中autoplay属性是打开网页的瞬间让视频自动播放；

muted静音属性一定要加上！如果不加上即使有autoplay自动播放属性，视频也不会播放，是因为谷歌浏览器从18年起就不支持了。。。因为谷歌怕你的网页突然声音出来，吓到用户，影响用户体验，所以加上muted静音属性，你的视频才会自动播放，如果你的视频背景是有声音的，你可以在页面上放置一个控制声音的按钮；

loop属性是让视频无限循环播放；

poster是占位图的意思，我们使用视频的第一帧图像作为背景封面图，这样当用户网速状态不好，背景视频一旦加载完成，我们可以很流畅的看到从图片过度到背景视频播放；

关于三种视频格式的摆放顺序，我从网络资料了解到，因为有些版本的谷歌浏览器里，如果.webm格式的视频放在了其他视频后面，视频将无法播放。所以这个顺序以自己公司测试结果为准，在我这里是没有问题的，所以我的顺序是第一个mp4，第二个webm，第三个ogg；

css代码如下：

video#bgvid {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    background: url(../images/4第一帧图片.jpg) no-repeat;
    background-size: cover;
    }

如何让IE8识别

IE8不仅不能识别

在CSS代码里做如下的声明，让IE知道

video { display: block; }

有了这句代码，IE8至少能识别

到此为止我们的整个制作流程已完毕，希望大家能设计出理想的动态视频背景作品。

五、One more thing (动效/视频如何转GIF)

ps：本小节阅读大约需要10分钟

首先，在实际动效输出落地中，并不推荐大家使用GIF，主要是因为GIF有以下几个缺点：

1、技术太老旧，GIF（Graphics Interchange Format）诞生于1987年，是一种位图图形文件格式。最后技术更新于1989年（和我一样老！）

2、GIF只有256种颜色，动效或视频中颜色一旦复杂，转出GIF后颜色会失真、变色。

3、GIF只能支持完全透明或者完全不透明的像素显示，像素无法平滑过渡，动效或视频中一旦有半透明效果，边缘会有明显锯齿、白边。

传统GIF与APNG对比

4、设计的动效或视频尺寸一旦大了、时间长了，GIF的体积会巨大无比，动辄几十兆，太吓人。

5、没有声音

动效输出落地常用方法有：

1、lottie/阿里犸良  转 .json

2、AE转svga

3、序列帧

4、序列帧转apng/webp

5、动效标注

6、精灵图

后续有时间了我会再写一篇《也许是全网最全的关于UI设计中动效如何落地的文章》来进行详解。

但是，当我们作品用于展示比如发站酷、追波、behance或者自媒体、社交领域，GIF还是依然具有无可替代的属性。

以下方我制作的APP暗黑模式展示动效案例，介绍3种导出GIF的方法，案例尺寸375*812，时长4秒，我们比较一下不同方法导出的效果。

（1、序列帧转出的GIF）   

（2、GifGun导出的GIF）

(3、在线视频转出的GIF)

1、序列帧转GIF

优势：体积最小、高清

劣势：操作步骤多一些

由于principle做的动效可以直接导出GIF，而AE自从cs5以后就不知道啥原因取消了直接导出GIF的选项，所以下面以AE介绍为主。

步骤如下：

动效做好以后，AE菜单栏的合成下拉中选择添加到渲染队列（快捷键Mac版 command+control+m），然后点击下图中1处的无损，在弹窗的格式下拉中选择png序列，点击3处的确定，然后1处的无损后面选择好保存的位置，在点击4处的渲染按钮。

打开ps，双击空白区域（或快捷键command/control+o），打开刚刚导出的序列帧文件夹，选中第一张图片（注意只选第一个），然后点击2处的选项按钮，再勾选3处的图像序列，再点击4处的打开按钮。

弹窗中设置关键帧速率，和你的动效速率要保持一致，我这里设置的是25，然后点击确定按钮

点击确定打开以后，在菜单栏中选择文件-导出-存储为web所用格式（快捷键commnd/controll+shift+alt+s）,在弹窗中1处选择GIF格式，2处选择图案，3处选择最高的256颜色，4处选择循环方式为永远，其它的保持默认，然后点击5处的存储按钮即可。

2、AE插件GifGun 导 GIF

此方法就是在AE中安装GifGun插件，可以将制作好的动效直接导出GIF

优势：方便快捷，较为高清

劣势：导出的文件体积稍大一点，偶尔有bug，比如下方我的GifGun导出来的图最右侧有一条闪烁的线，不知道是啥原因。

 

GifGun插件安装和使用（安装包已分享给大家下载使用，在文章尾部）

系统需求：Win/Mac均可使用，插件兼容After Effects CC 2019，After Effects CC 2018，After Effects CC 2017, CC 2015.3, CC 2015, CC 2014, CC，（建议使用英文版，以免出现表达式错误或其它问题）

插件版本GifGun V1.6.2，我的AE是cc 2017中文版，我试着安装过高版本的GifGun但是都不成功，不知道是什么原因，有可能是我的AE版本是中文版的原因。

1、选择对应系统的安装文件，双击安装

2、复制 CRACK 文件夹中的gifGun.jsxbin脚本，粘贴到下面目录
Windows:
C:\Program Files\Adobe\Adobe After Effects “对应你的AE版本”\Support Files\Scripts\ScriptUI Panels

MAC:
Applications/Adobe After Effects “对应你的AE版本”/Scripts/ScriptUI Panels

3.打开AE

Windows：

编辑（Edit）> 首选项（Preferences） > 常规（General） > 勾选上 允许脚本读写和访问网络（Allow Scripts to Write Files and Access Network）> 勾选上 启用JavaScript 调试器

MAC：

After Effects > 首选项（Preferences） > 常规（General） > 勾选上 允许脚本读写和访问网络（Allow Scripts to Write Files and Access Network）> 勾选上 启用JavaScript 调试器

4、在菜单栏窗口下拉中点击GifGun，调出即可使用

如何使用：

首先点击1处的设置按钮，在弹窗中的2处设置好要保存的位置，在3处设置你要导出的动效文件宽度，4处选择最高256种颜色，5处设置好帧速率和你自己做的动效速率保持统一，6处一般选择无损，但是当我选择 使用Alpha无损耗的时候上面提到的bug线条就消失了。。。。。

7处如果勾选的话导出GIF的同时还会导出视频格式，但是我们导视频格式一般是自己手动进行选择h.264导出，其它选项保持默认或者和图中我设置的一样也行,设置完成后点击8处的完成按钮，然后点击1处前面的 make gif按钮即可导出我们制做好的动效。

3、在线视频转GIF

优势：无需安装、轻量、随用随走

劣势：依赖于网络、导出后的体积大、不够高清 

下面这个网站是我经常用的GIF压缩网站（下图中的2处），但是视频转GIF效果也很不错（下图中的1处）

网站名称：EzGif.com

如何使用：

首先，用AE先将制作好的动效导出视频格式，AE菜单栏的合成下拉中选择添加到渲染队列（快捷键Mac版 command+control+m），点击下图中1处的无损，在弹窗2处格式中选择quicktime，在3处格式选项中选择h.264格式，4处点击确定，5处选择好要导出的位置，6处点击渲染按钮导出视频。

ps：如何解决新版AE（AE cc2019）导出格式中没有h.264选项的问题

AE中的菜单栏合成下拉中点击添加到AME（Adobe Media Encoder）队列，此时会自动打开AME（这个软件主要是批量渲染制作好的视频/动效合成，一般电脑在安装AE和premiere的时候会自动同步安装这个软件，如果各位同学电脑上没有这个软件需要单独再安装一下。）

AME打开以后点击下图中1处的下拉图标，在下拉菜单中就会找到h.264选项（ps: windows电脑的同学在下拉菜单中还会有GIF的选项，但是导出的GIF体积较大，不过也是另一种导出GIF的方法，Mac系统下拉中没有GIF的选项）。

点击2处可以详细设置此格式的信息，设置好以后点击4处的绿色按钮即可导出h.264格式的视频。

OK，视频导出以后我们打开ezgif网站首页，选择第一个按钮-视频到GIF，然后点击下图中1处的选择文件，选择刚刚导出的视频以后，点击2处的上传按钮，稍等片刻等到网页左下角进度走到100%。

网页跳转以后，根据自己项目实际情况点击下图中1处的尺寸选项（网页翻译有误，像素翻译成了便士），2处帧速率和自己做的动效统一，3处点击转化按钮，转化完成后会直接在按钮下方显示出来。

点击最右侧的存储按钮下载即可

4、综合比较

效果显而易见，第一种序列帧导GIF的方法既高清又体积小，在实际应用中以前面两种方法为主，当然还有其它导GIF的方法比如安装客户端软件（VideoGif、GifBrewery）将视频导出GIF、使用GIF录屏工具（Mac端推荐使用LICEcap、Kap，Windows端推荐使用Screen To GIF）、Windows上的AME导GIF，大家可根据自己的实际情况进行选择。

常用GIF录屏工具综合比较

ps：GIF录屏工具录制的GIF效果品质不是很高清，体积也比较大。

常用GIF录屏工具如何使用

5、GIF如何压缩

当principle导出的GIF、AE导出的GIF、其它工具制作好的GIF超过我们的上传限制，比如站酷发表文章单个GIF不能超过10M，此时我们就需要对GIF进行压缩处理。

同样还是用到EzGif.com，点击下图中2处的优化器，整体操作步骤和我们上面讲的视频转GIF基本一致。

需要注意的是下面这两点：

首先在优化方法选项中，我一般常用默认的有损GIF，其它选项可以根据自己的实际情况挨个尝试选择，然后对导出的效果进行对比，看一看哪个是最适合自己的选项。

其次，压缩级别滑块越向左压缩的程度越小，越向右压缩的级别越大。

六、文章重要知识点总结

1、UI设计中动态视频背景重要性

     高端大气上档次

2、动态视频背景制作需要注意的事项

     考虑产品定位

     考虑浏览器兼容性

     需提供静态占位图      

     需提供mp4、ogg、webm三种格式视频

     视频尺寸、体积大小如何控制

 

3、如何剪辑视频、高质量导出视频、格式转化

     常用、高频、好用的视频素材网站推荐

     梳理剪辑思路

     剪辑工具、粗剪、细剪、过渡效果、剪辑步骤等详细介绍  

     如何高质量输出视频

     如何对视频进行格式转换

     如何制作给甲方爸爸看的Demo效果图

4、如何用Html+Css代码来实现动态视频背景

     html代码解读及注意点

     如何让IE8能识别

5、动效/视频如何转GIF

     实际动效输出落地中不推荐使用GIF

     动效输出落地常用方法简介

     序列帧转GIF

     AE插件GifGun如何安装及导出GIF

     在线视频转GIF

     如何解决新版AE（AE cc2019）导出格式中没有h.264选项的问题

     常用GIF录屏工具推荐

     GIF如何压缩

七、感谢

本文中的健身官网案例里面的三种视频文件mp4、webm、ogg、第一帧静态图、HTML、CSS代码文件、AE插件GifGun已经打包好，点击下方的链接即可下载供大家参考、练习、使用。

链接:https://pan.baidu.com/s/1OKqURHAqwdpZRaA485Qrpw  密码:915g

这篇文章是我利用零散时间从今年3月份开始策划到8月底写完，历时近半年时间，中间由于各种事情断断续续，也曾想过放弃，希望能帮助到有关同学，不足之处请大家在评论区多多交流，还请大家多多支持和点赞，各位的点赞是我下一篇干货文章的最大动力。

值此纪念我在大连10年之旅，2009.8.29—2019.8.29

本文由 @PonyDesign 原创发布，版权归 PonyDesign 所有， 未经许可，禁止转载。