如何将录制视频制作成GIF动态图-程序员宅基地

技术标签： Animation动画  ui  前端web开发  常用实战开发中必备技能  前端  photoshop  视频  css3  

前言

将视频制作成GIF动态图的需求的好处：将录制视频制作成GIF动态图的需求主要源于其文件大小优势、循环播放特性、跨平台兼容性以及创意表达的可能性。这种需求在社交媒体、在线聊天、创意设计等领域尤为常见。
效果图展示gif

一、GIF动态图与视频相比

  1. 文件大小与加载速度：相比于视频文件，GIF动态图通常具有更小的文件大小。这意味着它们在网络传输和加载时速度更快，更适合用于网络聊天、论坛发帖、社交媒体分享等场合。在需要快速加载或节省空间的情境下，GIF是一个理想的选择。
  2. 循环播放特性：GIF动态图具有自动循环播放的特性，这使得它们非常适合展示一些简短且需要重复播放的动画效果。例如，一个有趣的表情、一个简短的动作或一段精彩的片段，通过GIF的形式可以更容易地吸引观众的注意力。
  3. 跨平台兼容性：GIF格式是一种广泛支持的图像格式，几乎可以在所有的操作系统和浏览器上正常显示。这意味着无论用户使用的是哪种设备或浏览器，都可以方便地查看和分享GIF动态图。
  4. 创意与表达：GIF动态图作为一种独特的视觉表达方式，可以为人们提供更多的创意空间。通过精心制作和编辑，人们可以将视频中的精彩瞬间或独特效果转化为GIF动态图，以更生动、有趣的方式表达自己的想法和情感。

二、如何录制好视频和并剪辑

使用专业视频编辑软件或者使用使用在线转换工具，小编使用的免费工具有Ev录屏，Ev剪辑和PS

一唯科技 - 为您提供简单易用的音视频软件icon-default.png?t=N7T8https://www.ieway.cn/

1、使用Ev录屏录制视频

免费无水印，集视频录制与直播功能于一身的桌面录屏软件、分屏录制、 场景编辑 、 教学画板

  • 打开ev录屏，可以全屏、自定义选区录制和只录摄像头

  • 选择录制音频，可以选择关闭录制的声音。

2、使用Ev剪辑对视频进行剪辑

操作简单易上手，支持多格式多轨道的精准剪辑 提供了一键配音、水印标注、字幕添加、视频转场等多种实用功能

步骤：

  • 选择添加录制好的或需要上传的视频

  • 将视频拖拽到下方视频区域，这样就可以进行剪辑啦

  • 然后导出视频保存到桌面上

 

 3、使用PS将视频转化成GIF动态图

Photoshop | 简体中文版本 免费下载icon-default.png?t=N7T8https://aill.gjx91.cn/?bd_vid=9903301091104661505

  • 打开ps新建一个文件

  • 然后添加视频，步骤：点击文件->导入->视频帧到图层->添加保存的视频内容（然后会显示点击确认）

  •  最下方会显示一个时间轴，可以进行播放查看每一帧动画

 

  •  选择左边框的工具栏，裁剪工具

  •  如果左边框工具栏没有找到裁剪工具，打开编辑->工具栏（选择恢复默认值或者拖拽附加工具到工具栏）

  •  视频裁剪完后选择导出GIF动态图：文件->导出->存储为Web所用格式（点击存储会弹出gif保存格式）

  •  编辑​点击保存和存放地址

 效果图展示
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_63152500/article/details/137798522

智能推荐

JWT(Json Web Token)实现无状态登录_无状态token登录-程序员宅基地

文章浏览阅读685次。1.1.什么是有状态？有状态服务，即服务端需要记录每次会话的客户端信息，从而识别客户端身份，根据用户身份进行请求的处理，典型的设计如tomcat中的session。例如登录：用户登录后，我们把登录者的信息保存在服务端session中，并且给用户一个cookie值，记录对应的session。然后下次请求，用户携带cookie值来，我们就能识别到对应session，从而找到用户的信息。缺点是什么？服务端保存大量数据，增加服务端压力 服务端保存用户状态，无法进行水平扩展 客户端请求依赖服务.._无状态token登录

SDUT OJ逆置正整数-程序员宅基地

文章浏览阅读293次。SDUT OnlineJudge#include<iostream>using namespace std;int main(){int a,b,c,d;cin>>a;b=a%10;c=a/10%10;d=a/100%10;int key[3];key[0]=b;key[1]=c;key[2]=d;for(int i = 0;i<3;i++){ if(key[i]!=0) { cout<<key[i.

年终奖盲区_年终奖盲区表-程序员宅基地

文章浏览阅读2.2k次。年终奖采用的平均每月的收入来评定缴税级数的，速算扣除数也按照月份计算出来，但是最终减去的也是一个月的速算扣除数。为什么这么做呢，这样的收的税更多啊，年终也是一个月的收入，凭什么减去12*速算扣除数了？这个霸道（不要脸）的说法，我们只能合理避免的这些跨级的区域了，那具体是那些区域呢？可以参考下面的表格：年终奖一列标红的一对便是盲区的上下线，发放年终奖的数额一定一定要避免这个区域，不然公司多花了钱..._年终奖盲区表

matlab 提取struct结构体中某个字段所有变量的值_matlab读取struct类型数据中的值-程序员宅基地

文章浏览阅读7.5k次，点赞5次，收藏19次。matlab结构体struct字段变量值提取_matlab读取struct类型数据中的值

Android fragment的用法_android reader fragment-程序员宅基地

文章浏览阅读4.8k次。1，什么情况下使用fragment通常用来作为一个activity的用户界面的一部分例如, 一个新闻应用可以在屏幕左侧使用一个fragment来展示一个文章的列表,然后在屏幕右侧使用另一个fragment来展示一篇文章 – 2个fragment并排显示在相同的一个activity中,并且每一个fragment拥有它自己的一套生命周期回调方法,并且处理它们自己的用户输_android reader fragment

FFT of waveIn audio signals-程序员宅基地

文章浏览阅读2.8k次。FFT of waveIn audio signalsBy Aqiruse An article on using the Fast Fourier Transform on audio signals. IntroductionThe Fast Fourier Transform (FFT) allows users to view the spectrum content of _fft of wavein audio signals

随便推点

Awesome Mac：收集的非常全面好用的Mac应用程序、软件以及工具_awesomemac-程序员宅基地

文章浏览阅读5.9k次。https://jaywcjlove.github.io/awesome-mac/ 这个仓库主要是收集非常好用的Mac应用程序、软件以及工具，主要面向开发者和设计师。有这个想法是因为我最近发了一篇较为火爆的涨粉儿微信公众号文章《工具武装的前端开发工程师》，于是建了这么一个仓库，持续更新作为补充，搜集更多好用的软件工具。请Star、Pull Request或者使劲搓它 issu_awesomemac

java前端技术---jquery基础详解_简介java中jquery技术-程序员宅基地

文章浏览阅读616次。一.jquery简介 jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互 jQuery 的功能概括1、html 的元素选取2、html的元素操作3、html dom遍历和修改4、js特效和动画效果5、css操作6、html事件操作7、ajax_简介java中jquery技术

Ant Design Table换滚动条的样式_ant design ::-webkit-scrollbar-corner-程序员宅基地

文章浏览阅读1.6w次，点赞5次，收藏19次。我修改的是表格的固定列滚动而产生的滚动条引用Table的组件的css文件中加入下面的样式：.ant-table-body{ &amp;amp;::-webkit-scrollbar { height: 5px; } &amp;amp;::-webkit-scrollbar-thumb { border-radius: 5px; -webkit-box..._ant design ::-webkit-scrollbar-corner

javaWeb毕设分享 健身俱乐部会员管理系统【源码+论文】-程序员宅基地

文章浏览阅读269次。基于JSP的健身俱乐部会员管理系统项目分享:见文末!

论文开题报告怎么写？_开题报告研究难点-程序员宅基地

文章浏览阅读1.8k次，点赞2次，收藏15次。同学们，是不是又到了一年一度写开题报告的时候呀？是不是还在为不知道论文的开题报告怎么写而苦恼?Take it easy!我带着倾尽我所有开题报告写作经验总结出来的最强保姆级开题报告解说来啦，一定让你脱胎换骨，顺利拿下开题报告这个高塔，你确定还不赶快点赞收藏学起来吗？_开题报告研究难点

原生JS 与 VUE获取父级、子级、兄弟节点的方法 及一些DOM对象的获取_获取子节点的路径 vue-程序员宅基地

文章浏览阅读6k次，点赞4次，收藏17次。原生先获取对象var a = document.getElementById("dom");vue先添加ref <div class="" ref="divBox">获取对象let a = this.$refs.divBox获取父、子、兄弟节点方法var b = a.childNodes; 获取a的全部子节点 var c = a.parentNode; 获取a的父节点var d = a.nextSbiling; 获取a的下一个兄弟节点 var e = a.previ_获取子节点的路径 vue

推荐文章

热门文章

相关标签