SR-ShaderLab 这个工具是干嘛的一句话给你一张图片在上面加各种炫酷的动态特效流光、溶解、水波纹、闪电……不用写代码鼠标点一点就能出效果。输出三种成果GLSL 着色器代码—— 给程序员用的专业代码黑白蒙版 PNG—— 特效范围的黑白图单文件 HTML 网页—— 直接打开就能看效果的网页发给谁都能看界面一览打开工具后你会看到左边代码编辑器如果单纯的想做网页特效看不懂代码不用管它右边你的图片 特效预览主要操作区右边顶部工具栏换图片、导出、暂停播放、缩放右边左下角蒙版管理器这个白色的区域实际上是每个特效作用的范围什么是遮罩遮罩就是告诉工具特效该出现在哪里不该出现在哪里。拿喷漆举例——你用一张纸盖在墙上纸上剪个圆洞喷漆喷过去墙上只会留下一个圆。那张剪了洞的纸就是遮罩。洞白色→ 特效出现的地方纸黑色→ 特效不出现的地方在这个工具里你不需要自己剪遮罩选一种方式就行方式一句话解释局部钢笔你用鼠标圈哪里特效就出现在哪里PNG工具自动识别图片不透明的地方特效自动铺上去全图整张图全部加特效最省事右边右下角参数面板调节特效细节五步上手做出第一个特效第一步上传你的图片点击右上角「更换图片」按钮选择你想做特效的图片。如果不想上传工具默认会显示一张演示图你也可以直接用它来试玩。第二步选一种特效在右下角参数面板顶部找到「特效」下拉菜单里面有 10 种预设特效特效名效果一句话说明流光溢彩一道光沿角度扫过图片溶解消散从中心向外烧掉像火焰溶解丁达尔光放射状的光束很神圣的感觉发光粒子闪闪发光的小粒子飘动波光扩散像丢石头进水的脉冲光环丝带扭曲图片沿线段像丝带一样波动水波纹真实的水波效果带扭曲全息霓虹镭射彩虹光泽赛博朋克感故障毛 glitchRGB 错位 扫描线故障风闪电充能两点之间闪电弧选一个特效会立刻显示在图片上。第三步用钢笔画出特效范围默认情况下特效是作用在全图的。如果你只想让特效出现在图片的某个区域比如只让人物身上发光就需要用钢笔画一个范围。点击右下角「进入钢笔编辑」按钮在图片上点击打点围成一个闭合区域像画圈一样最后一个点点击起始点自动闭合路径特效就只会出现在你圈起来的区域内这个钢笔设计简单可以随便点没有摇杆等概念。如果觉得边缘太硬可以调整「边缘平滑」小技巧滚轮缩放画面拖拽空白处平移画错了按CtrlZ撤销CtrlY重做点「清空」按钮可以重来第四步调节参数画完路径后在右下角参数面板里可以微调边缘平滑—— 让特效和原图过渡更自然不发硬特效专属参数—— 每种特效都有自己独特的滑块强度、速度、颜色等拖一拖就能看到变化路径预览不透明度—— 调整蒙版在编辑状态下的透明度方便你对齐位置有些特效还能直接拖拽手柄丁达尔光 → 拖拽光源点光束跟着走水波纹 / 波光扩散 → 拖拽震源波纹从那里开始闪电充能 → 拖拽起点和终点丝带扭曲 → 拖拽线段两端实际上针对每个特效我们做了对应的操控点可以控制特效的中心或者特效的起始位置和终止位置。第五步导出成果做好之后顶部工具栏有三个导出按钮① 导出蒙版—— 下载一张黑白 PNG 图白色代表有特效的区域黑色代表没有。② 导出 GIF 动图—— 把特效录制成循环动图方便发朋友圈、发群聊。点击后会显示进度条等它跑完就好。③ 生成网页代码—— 生成一个完整的 HTML 文件保存后双击打开就能看到特效。发给别人对方不需要装任何软件就能看。只额吉双击打开百分百还原效果可以使用AI或者手搓嵌入到自己的网站当中去。三种蒙版模式选哪个左下角蒙版管理器里有三个按钮「局部」—— 默认选项特效只作用在你用钢笔画的范围内。适合只想让人物/某个物体有特效的场景。「PNG」—— 自动识别图片的透明区域特效只作用在有像素的地方。适合 PNG 透明底素材不用自己画蒙版。「全图」—— 特效铺满整张图。最简单粗暴适合背景、氛围效果。其他你可能想知道的顶部左侧的播放/暂停按钮是干嘛的控制特效动画。暂停可以定格在某一帧方便截图。旁边的速度滑块可以加快或减慢动画。缩放控制是干嘛的放大缩小你的视图不影响最终导出效果。重置按钮一键回到默认大小。左边代码编辑器要不要管如果你不是程序员完全不用管。代码是自动生成的你只需要用可视化界面操作就行。底部编译器输出控制台显示红色报错怎么办一般是你手动改了代码导致的。如果是正常使用不会报错。报错的话刷新页面重来就行。快速上手路线打开工具 → 换一张自己的图选一个特效推荐从水波纹或丁达尔光开始效果明显点全图模式先看全图效果觉得 OK 就导出 GIF想精细化就进入钢笔编辑圈出特定区域微调参数导出最终成果就这么简单去试试 吧。