如果做一个属于自己的抖音滤镜?_怎么制作抖音滤镜
zhezhongyun 2025-09-06 16:13 25 浏览
作者:BlackBoXo
whichDisneyAreYou
很多朋友前阵子可能在各大平台上看到过一款滤镜「你是迪斯尼的哪个角色 whichDisneyAreYou」,其实这是 Instagram 平台的一款滤镜,但并非官方推出,而是用户自己制作,那么如何制作自己的 Instagram 滤镜呢?今天就来全方位教你!
先来看看最终效果,我做的「你是哪个宝可梦 whichPokemonAreYou」滤镜。
前期准备
- 首先需要一个 Instagram 账号,或者 Facebook 账号,在这两个平台都可发布自己的滤镜。
 - 下载 Facebook 官方推出的制作滤镜的工具 Spark AR Studio。
 
制作滤镜包括哪几方面?
首先来大致列一下制作滤镜需要考虑哪些方面的内容:
- 素材:主要包括你要用在滤镜中的图片素材,比如 Pokemon 滤镜中的「问题页」图片,和各个宝可梦的图片;
 - 场景:要将这些素材内容放在什么位置,比如在头部上方;
 - 逻辑:使用什么逻辑来控制滤镜,例如如何触发各种特效。
 
然后来了解一个这款滤镜编辑器的主要功能区。
左上角是场景区域,左下角是素材区,中间上方用来预览你的滤镜效果(默认就是一个黑人小哥一直摇头晃脑展示你的滤镜),中间下方是滤镜的所有逻辑(如果没有这个区域,可以在菜单栏 View 中打开),右方是属性区。
开始制作滤镜
下面我就以这个 Pokemon 滤镜为例,展示一下如何从头开始制作一款滤镜。由于这款滤镜逻辑之复杂,相信你做过这款滤镜后再无惧任何滤镜的制作哈哈。
首先我们来设想一下这款滤镜的最基础功能:
- 在头部上方出现 which Pokemon are you 的图片;
 - 等待一小段时间;
 - 开始出现各个宝可梦的图片,并快速切换;
 - 等待一小段时间;
 - 图片停在某一个宝可梦。
 
等一下,你是否曾有一瞬间认为这种滤镜的匹配并非随机,而是各种人脸识别深度学习?但显然没有这么高级,之所以有时候给人好像最终选择的图片和人有相似之处的错觉,可能是人们会主动去寻找相似之处。 咦,这不是星座学吗??
按照我们之前提到的三部分,来一步步进行滤镜的制作:
添加素材:
- 放入问题页的素材:点击菜单栏 Add -> Material 来添加素材,命名为「question」,点击 Texture -> Choose File 选择提前准备好的「问题页」图片,你会看到左下角出现一个 Textures 里包含了你选择的图片。
 - 放入宝可梦序列的素材:再次点击菜单栏 Add -> Material 来添加素材,命名为「answer」,点击 Texture 中 左边的箭头 ,选择 New Animation Sequence 建立一个动画序列,在这个动画序列里点击 Texture -> Choose File, 同时选择 你要循环播放的 所有图片 ,这些图片就会自动形成一个动画序列。
 
添加场景:
- 建立场景:因为我们希望将图片固定在头部上方的位置,随着人头移动,因此点击 Add -> Scene Understanding -> Face Tracker 添加一个脸部跟踪器。
 - 因为我们的图片效果是平面,右键 Face Tracker 点击 Add -> Plane,点击 Plane,在其属性栏的 Material 中 + 添加前面定义的 question。在中间上方的区域,可以移动、旋转或缩放该图片,也可以直接在属性栏定义,我们将图片上移到黑人的额头。
 - 继续添加定义好的动画序列,一样的步骤:右键 Face Tracker 点击 Add -> Plane,点击 Plane,在其属性栏的 Material 中 + 添加前面定义的 answer。将它调整到和 question 一样大小和位置,可以直接复制 question 的九个参数。
 
添加逻辑
终于到了最复杂的地方了 ... 此时不妨再回顾一下这款滤镜的功能逻辑。
- 首先是滤镜的开始条件,也就是用户开始录像:右键左上角 Scene 中的 Camera,点击 Create Patch,可以看到逻辑区出现了紫色的 Camera 模块,右侧四个箭头表示 Camera 的四个触发条件,最下面一个是我们需要的开始录像。
 - 添加一个计时器,控制时间触发条件:右键逻辑区的空白处,搜索 Runtime 添加,按住右侧箭头拖到空白处松开,在弹出框搜索 Offset,用来记录时间,再按住 Offset 右侧箭头拉出,添加 Less Than,将它的时间设置为 1.5 秒。
 - 小于 1.5 秒时出现问题页,大于 1.5 秒时出现答案页,因此先添加控制出现与否的模块。选择左上角 Scene 中的 plane0,也就是问题页,在属性栏中的 Visible 点击左侧箭头,逻辑区出现黄色模块,对 plane1 也就是答案页进行一样的操作。
 - 将 Less Than 的右侧连接到 question 的左侧,再拉出 Less Than 的右侧,选择 Not 函数,将 Not 连接到答案页。点击编辑器最左侧边栏的刷新按钮,可以看到黑人头上已经实现了根据时间切换问题与答案的效果。
 
- 要将动画在某个时间点停下来,从 Offset 再拉出一个 Less Than,设置为 4 秒,拉出一个 Loop Animation,这是用来循环的,将循环时间改短一点,比如 0.001,再用下方箭头 looped 拉出一个 Random,这是用来随机数字的,将 End Value 设置为答案页图片的数量,这边做的就是不断随机出数字,然后在时间到 4 秒时的那个数字赋给动画序列,决定最终选择的是序列的第几帧。
 - 点击素材区的 answerSequence,点击属性区的 CurrentFrame 左侧箭头,将上一步的 Random 接到 CurrentFrame。此时再刷新一次,可以看到实现了四秒时停在某一帧的效果。离胜利越来越近了!
 
最开始的 Camera 模块还没用到,将最下面的箭头连到 Offset 下面的 Reset 箭头,表示开始录像的时候重置计时器。
至此,我们基本上完成了这个滤镜的功能啦!
最后完善
如果你只是想简单了解做滤镜的过程,那么到这边就可以啦!但如果想把这款滤镜做好,还需要一些完善。
本来看上去已经很美好了,但是实际用了之后,就会发现还有一点体验上的小问题,主要是:
- 用户选择这个滤镜后,如果不开始录影,计时器依旧自动运行,导致整个逻辑直接跑完了。用户还没玩就知道会发生什么,这显然不太好。
 - 用户录屏结束后,想重新玩,但此时没有自动回到问题页,因为只有开始录屏才会重置计时器,结束录屏并不会重置。
 
分析这两个原因,要加的逻辑主要以下两点:
- 出现答案页的条件不仅是大于 1.5 秒,还需要已经开始录屏,因此添加一个 And 函数,从 Camera 的 Pulse 拉出 Switch 函数,删除连到 Flip 的线,将 On 和 Off 对应连接上,从 Less Than(1.5)拉出 Switch 函数,将 On 和 Off 反着连接,将两个 Switch 的输出分别连到 And 函数的输入。
 - 将之前 answer 前面的 Not 函数换到 question(plane0) 的前面,将 And 和 Not 连接,And 和 answer(plane1) 连接,最终结果见下图。
 
一个完美主义者的滤镜终于完成了!
测试和上传滤镜:
在最左侧边栏的下方,有测试和上传滤镜的按钮,测试可以绑定账号后发送到 App 进行测试,也可以直接连接设备进行测试。测试完成后,可以提交滤镜,注意滤镜具体大小的限制(Instagram 平台 4M,Facebook 平台 10M),所以你的图片素材不要太大。
完成后,去网站中将滤镜的各种信息填写完整,就可以提交审核啦!
whichPokemonAreYou
在 网站 中可以看到自己的滤镜被多少人观看、拍摄和分享。这是我的滤镜现在的数据,虽然称不上 「爆款」,但你做的滤镜一定可以成为爆款!点击这个链接 可以直接在 Instagram 使用这款滤镜。
这个编辑器里还有许多功能可以探索,尽情发挥你的想象力!该完整项目已上传至 Github,可 前往查看和下载 。
如何使用抖音特效制作工具
抖音也有自己的滤镜编辑器,大体和上述操作类似,下面来介绍一下抖音编辑器的使用方法。
首先下载抖音官方推出的特效编辑器 Effect Creator,支持 Windows 和 Mac 平台。滤镜可发布在抖音短视频、火山小视频、今日头条等字节跳动旗下产品。
这款编辑器是直接添加特效后,在特效中设置素材。支持的特效包括 2D 贴纸、美妆、人脸变形等等,我们使用的是 「2D 贴纸->人脸」,在其中一个上传问题页图片,在另一个上传答案页的宝可梦图案。
接下来添加滤镜的逻辑:
- 点击「添加特效->问题页」,将其设置为播放时长->1.5 秒;
 - 点击「添加特效->答案页」,将其设置为无线循环;
 - 添加一个将「答案页」停止的触发事件,比如「点击屏幕」;
 - 点击「添加特效->答案页」,将其动画设置为「暂停」,表示点击屏幕后暂停在当前帧;
 - 为了提醒用户主动触发点击屏幕的事件,在设计面板中添加一个「2D 贴纸->前景」,添加一张写有「点击屏幕停止」的图片。
 - 在事件面板中添加一个并列的行为,点击行为面板的右侧小箭头「>」,添加延时,设置为 2.5 秒;
 - 点击「添加特效->前景」;
 - 添加触发事件「点击屏幕」;
 - 点击「添加特效->前景」,将其动画设置为「消失」,表示点击屏幕后该提示消失。
 
最后看一下成品的效果(下图有加速处理):
你需要下载 App 特效君 进行滤镜的测试,支持 iOS 和 Android 平台。顺便感受一下用户自制滤镜的排行榜。
大家在制作滤镜的过程中,请注意浏览各平台的审核标准,例如图片版权等问题,以免审核不通过。
快来制作一款属于你的滤镜吧!
相关推荐
- Python入门学习记录之一:变量_python怎么用变量
 - 
        
写这个,主要是对自己学习python知识的一个总结,也是加深自己的印象。变量(英文:variable),也叫标识符。在python中,变量的命名规则有以下三点:>变量名只能包含字母、数字和下划线...
 
- python变量命名规则——来自小白的总结
 - 
        
python是一个动态编译类编程语言,所以程序在运行前不需要如C语言的先行编译动作,因此也只有在程序运行过程中才能发现程序的问题。基于此,python的变量就有一定的命名规范。python作为当前热门...
 
- Python入门学习教程:第 2 章 变量与数据类型
 - 
        
2.1什么是变量?在编程中,变量就像一个存放数据的容器,它可以存储各种信息,并且这些信息可以被读取和修改。想象一下,变量就如同我们生活中的盒子,你可以把东西放进去,也可以随时拿出来看看,甚至可以换成...
 
- 绘制学术论文中的“三线表”具体指导
 - 
        
在科研过程中,大家用到最多的可能就是“三线表”。“三线表”,一般主要由三条横线构成,当然在变量名栏里也可以拆分单元格,出现更多的线。更重要的是,“三线表”也是一种数据记录规范,以“三线表”形式记录的数...
 
- Python基础语法知识--变量和数据类型
 - 
        
学习Python中的变量和数据类型至关重要,因为它们构成了Python编程的基石。以下是帮助您了解Python中的变量和数据类型的分步指南:1.变量:变量在Python中用于存储数据值。它们充...
 
- 一文搞懂 Python 中的所有标点符号
 - 
        
反引号`无任何作用。传说Python3中它被移除是因为和单引号字符'太相似。波浪号~(按位取反符号)~被称为取反或补码运算符。它放在我们想要取反的对象前面。如果放在一个整数n...
 
- Python变量类型和运算符_python中变量的含义
 - 
        
别再被小名词坑哭了:Python新手常犯的那些隐蔽错误,我用同事的真实bug拆给你看我记得有一次和同事张姐一起追查一个看似随机崩溃的脚本,最后发现罪魁祸首竟然是她把变量命名成了list。说实话...
 
- 从零开始:深入剖析 Spring Boot3 中配置文件的加载顺序
 - 
        
在当今的互联网软件开发领域,SpringBoot无疑是最为热门和广泛应用的框架之一。它以其强大的功能、便捷的开发体验,极大地提升了开发效率,成为众多开发者构建Web应用程序的首选。而在Spr...
 
- Python中下划线 ‘_’ 的用法,你知道几种
 - 
        
Python中下划线()是一个有特殊含义和用途的符号,它可以用来表示以下几种情况:1在解释器中,下划线(_)表示上一个表达式的值,可以用来进行快速计算或测试。例如:>>>2+...
 
- 解锁Shell编程:变量_shell $变量
 - 
        
引言:开启Shell编程大门Shell作为用户与Linux内核之间的桥梁,为我们提供了强大的命令行交互方式。它不仅能执行简单的文件操作、进程管理,还能通过编写脚本实现复杂的自动化任务。无论是...
 
- 一文学会Python的变量命名规则!_python的变量命名有哪些要求
 - 
        
目录1.变量的命名原则3.内置函数尽量不要做变量4.删除变量和垃圾回收机制5.结语1.变量的命名原则①由英文字母、_(下划线)、或中文开头②变量名称只能由英文字母、数字、下画线或中文字所组成。③英文字...
 
- 更可靠的Rust-语法篇-区分语句/表达式,略览if/loop/while/for
 - 
        
src/main.rs://函数定义fnadd(a:i32,b:i32)->i32{a+b//末尾表达式}fnmain(){leta:i3...
 
- C++第五课:变量的命名规则_c++中变量的命名规则
 - 
        
变量的命名不是想怎么起就怎么起的,而是有一套固定的规则的。具体规则:1.名字要合法:变量名必须是由字母、数字或下划线组成。例如:a,a1,a_1。2.开头不能是数字。例如:可以a1,但不能起1a。3....
 
- Rust编程-核心篇-不安全编程_rust安全性
 - 
        
Unsafe的必要性Rust的所有权系统和类型系统为我们提供了强大的安全保障,但在某些情况下,我们需要突破这些限制来:与C代码交互实现底层系统编程优化性能关键代码实现某些编译器无法验证的安全操作Rus...
 
- 探秘 Python 内存管理:背后的神奇机制
 - 
        
在编程的世界里,内存管理就如同幕后的精密操控者,确保程序的高效运行。Python作为一种广泛使用的编程语言,其内存管理机制既巧妙又复杂,为开发者们提供了便利的同时,也展现了强大的底层控制能力。一、P...
 
- 一周热门
 
- 最近发表
 
- 标签列表
 - 
- HTML 教程 (33)
 - HTML 简介 (35)
 - HTML 实例/测验 (32)
 - HTML 测验 (32)
 - JavaScript 和 HTML DOM 参考手册 (32)
 - HTML 拓展阅读 (30)
 - HTML文本框样式 (31)
 - HTML滚动条样式 (34)
 - HTML5 浏览器支持 (33)
 - HTML5 新元素 (33)
 - HTML5 WebSocket (30)
 - HTML5 代码规范 (32)
 - HTML5 标签 (717)
 - HTML5 标签 (已废弃) (75)
 - HTML5电子书 (32)
 - HTML5开发工具 (34)
 - HTML5小游戏源码 (34)
 - HTML5模板下载 (30)
 - HTTP 状态消息 (33)
 - HTTP 方法:GET 对比 POST (33)
 - 键盘快捷键 (35)
 - 标签 (226)
 - opacity 属性 (32)
 - transition 属性 (33)
 - 1-1. 变量声明 (31)
 
 
