shape layer 的描边直接变成可控的渐变流线

用户38350844486
4 阅读13分钟

这支我继续按同样粒度拆。
这次作者用的是一个免费插件，不是 Boa、Saber 这种，而是：

irrealix > freeGradient

它的核心不是“让素材沿路径跑”，而是：

把 shape layer 的描边直接变成可控的渐变流线
然后再通过：

  • Create Nulls From Paths
  • freeGradient 的 2 Points / Parametric
  • Gradient Offset 动画

做出“沿线流动”的效果。

这支视频非常适合做：

  • 充电线 / 电流线
  • 医疗导管 / 软管
  • UI 连接线
  • 霓虹路径
  • 科技产品广告里的发光线

一、这支视频最终做出来的是什么

作者最后做的是一条围着充电线走的彩色发光线：

  • 路径本身是 shape layer
  • 颜色不是普通纯色 stroke
  • 而是一个沿路径分布的渐变条
  • 再让渐变本身流动
  • 最后还可以额外换色，做成金色、粉紫、霓虹蓝橙等风格

和前几支最大的区别是：

这次不是“素材贴路径”，而是“颜色沿路径流动”。

二、工程信息

从项目面板里能读到：

  • 合成名：freeGradient
  • 尺寸：1920 × 1080
  • 帧率：29.97 fps
  • 时长：画面里看起来约 5 秒

最稳复刻

你先直接建：

  • 1920 × 1080
  • 29.97 fps
  • 5 秒
  • 背景放你的照片或视频素材

三、先说结论：这支视频的完整结构

作者的流程其实可以概括成 6 步：

  1. 新建 shape layer，画一条平滑路径
  2. 给 shape layer 加 freeGradient
  3. 用 2 Points 模式，把渐变起点和终点放到线的两端
  4. 用 Create Nulls From Paths 生成 Start / Mid / End 空对象
  5. 用表达式把 freeGradient 的 Start / End 绑定到空对象位置
  6. 打开 Gradient Offset 动画，让颜色沿线流动
  7. 再用渐变条本身或 Colarama 做换色
  8. 可选再加 Layer Styles 做更亮一点的包装

四、第一步：先画线，不要先急着上效果

1）新建 Shape Layer

作者直接用 shape layer 画路径。

操作

Layer > New > Shape Layer

2）Fill 关掉，只留 Stroke

从顶部工具栏能看到：

  • Fill 是关的
  • Stroke 是开的

并且视频前半段有一帧清楚显示：

  • Stroke = 12.5 px

后面正式做车充电线时，顶部又出现：

  • Stroke = 20 px

复刻建议

先按你的主体粗细来：

细一点的线
  • Stroke 10 ~ 14 px
像车充电线这种更粗的线
  • Stroke 18 ~ 24 px

作者最终成片更接近：

  • 20 px

3）路径一定要平滑，少用直角

视频 40 秒那一帧作者专门标了：

  • right angle corner

就是在提醒你：

直角拐点会很难看。

复刻原则

  • 用贝塞尔手柄把路径拉顺
  • 尽量不要出现 90° 生硬折角
  • 曲线越连续，流动感越自然

这一步非常重要

这类渐变流线最怕：

  • 折角
  • 节点太多
  • 曲线忽左忽右很碎

作者后面无论是车充电线，还是前面那个简化演示，路径都很顺。

五、第二步：给 Shape Layer 加 freeGradient

右侧 Effects & Presets 里能看到插件归类是：

  • irrealix
  • freeGradient

操作

选中 Shape Layer 1，添加：

freeGradient

六、第三步：先用最基础的 2 Points 模式

这一步作者一开始就是这么做的。

视频里能明确读到的基础参数

在 Effect Controls Shape Layer 1 里：

  • Gradient Type = Linear
  • Definition Mode = 2 Points
  • Color Mode = Normal
  • Opacity Mode = Affect Gradient

其他几项初始值

  • Gradient Offset = 0.0%
  • Gradient Scale = 100.0%
  • Gradient Loop = 先没开，后面会开
  • Gradient Reflect = 前期没开，后面部分画面看起来有勾上
  • Gradient Invert = 关闭

复刻先照抄

在 freeGradient 里先设：

  • Gradient Type：Linear
  • Definition Mode：2 Points
  • Color Mode：Normal
  • Opacity Mode：Affect Gradient

七、第四步：编辑渐变条本身

作者这一步讲得很清楚。

1）双击 Gradient 色条，添加颜色

字幕明确写了：

  • Double-click the Gradient to add color to it

操作

在 freeGradient > Gradient 那条色带上：

  • 双击 可以新增色标

2）作者前期演示用的颜色结构

从画面里能清楚看到最初是这种分布：

  • 左边：红
  • 中间偏左：蓝
  • 右边：橙

后面又加过：

  • 粉 / 紫

所以你最稳起步可以这样做

先做 3 个色标：

  • 左：红
  • 中：蓝
  • 右：橙

再根据风格追加一两个色标。

3）删除颜色的方法

字幕后面明确写了：

  • Drag the mouse down to remove color

操作

把某个色标往下拖出色条，就能删掉。

4）这一步的重点

作者不是一开始就追求很复杂的调色，
而是先让线条能跑起来，然后再补：

  • 粉
  • 紫
  • 金
  • 或其他色标

所以你也应该先把流动逻辑做通，再细调颜色。

八、第五步：把渐变起点和终点放到线两端

这一步是 2 Points 模式的核心。

字幕明确写了：

  • Place Gradient Targets at the start and end of the line

视频里能看到的参数

在 Definition Mode = 2 Points 时，会出现：

  • Start
  • End

一开始是手动输入的 2D 坐标，画面里有一帧能看到近似值：

  • Start ≈ 1625.9, 259.3
  • End = 1920.0, 540.0

这只是作者当时手动摆放的坐标，不是固定模板。

真正重点

你要把：

  • Start 放在线的一端
  • End 放在线的另一端

画面里作者还专门打了标注：

  • START
  • END

这一步的视觉逻辑

比如车充电线那个例子：

  • 上端是红
  • 中段变蓝
  • 底部变橙

那么其实就是：

  • 渐变从起点一路铺到终点

九、第六步：为什么作者说“有时候它不会跟着走”

作者中段出现一句提示，大意是：

  • 有时渐变不会跟着线走

  • 画面里还标了：

    • lamp that doesn't follow

这里字幕里的 “lamp” 实际上更像是 “ramp / gradient” 的误写。
作者真正想说的是：

路径点动了，但 freeGradient 的 Start / End 靶点没有自动跟着路径点。

这就是为什么要用下一步。

十、第七步：运行 Create Nulls From Paths

字幕明确写了：

  • To fix this, run the default scriptor Create Nulls From Paths

而弹窗里能清楚看到脚本面板：

  • Create Nulls From Paths

按钮有：

  • Points Follow Nulls
  • Nulls Follow Points
  • Trace Path

这一步该按哪个

按这支视频的用途，应该选 Nulls Follow Points。

虽然画面分辨率不够高，光标位置不是百分百清晰，
但从后面生成出来的结果看：

  • 产生了 Start
  • Mid
  • End

三个空对象
并且这些空对象是跟着路径点位置的。

所以按逻辑，这一步就是：

Nulls Follow Points

运行后会得到什么

时间线里清楚出现了：

  • Start
  • Mid
  • End

这 3 个 null。

十一、第八步：把 freeGradient 的 Start / End 绑定到 null

这一步是本视频最关键的一步。

字幕写的是：

  • Connect the ramp to the created null positions

这里的 ramp 指的就是渐变起止靶点。

操作方法

在 Shape Layer 1 > freeGradient 里：

对 Start

  • Alt + 点击 秒表

  • 用 pick whip 绑定到：

    • thisComp.layer("Start").transform.position

对 End

  • Alt + 点击 秒表

  • 绑定到：

    • thisComp.layer("End").transform.position

视频里能看清的表达式

Start

thisComp.layer("Start").transform.position

End

thisComp.layer("End").transform.position

这样做完后的结果

字幕写的是：

  • You should now see the ramp follow through

意思就是：

当你以后再改路径，
或者路径点位置变化时，
渐变的起点和终点也会跟着线两端走，不会错位。

十二、第九步：先让颜色循环起来

作者后面开始做“流动”效果。

1）把 Gradient Loop 打开

后面的效果面板帧里能看到：

  • Gradient Loop = 勾选

而且有的帧看起来：

  • Gradient Reflect 也被勾了

最稳复刻

你先一定要开：

  • Gradient Loop = On

然后看视觉是否更顺，决定要不要再开：

  • Gradient Reflect = On

我的判断

作者后半段为了让循环更柔和，有较大概率把 Reflect 也打开了。
但就算你先不开，也能把基础流动做出来。

2）Gradient Scale

视频里前面是：

  • 100.0%

后面做流动时清楚出现过：

  • 108.0%

还有一个更靠近特写的帧里出现过大约：

  • 245.2%

这说明什么

作者在不同镜头里有微调。
但正式动画那段稳定出现的是：

  • 108%

最稳起步

先用：

  • Gradient Scale = 108%

十三、第十步：把 Definition Mode 切成 Parametric

字幕明确写了：

  • adjust the angle of the animation by setting the Definition Mode to Parametric

Parametric 模式下，视频里清晰出现的参数

  • Definition Mode = Parametric
  • Orientation = Horizontal
  • Start Part = 0.0%
  • End Part = 100.0%
  • Angle = 0x + 250.0°

复刻

在 freeGradient 里切换：

  • Definition Mode：Parametric
  • Orientation：Horizontal
  • Start Part：0
  • End Part：100
  • Angle：250°

这一组的作用

它不是重新画路径，
而是控制：

  • 渐变流动方向
  • 渐变在路径上“扫过去”的角度感

作者用 250° 以后，整条线的动感更合理。

十四、第十一步：给 Gradient Offset 写表达式

这一段是流动动画的真正驱动。

在 240 秒那帧，时间线里直接能看到表达式：

time*150

操作

在：

  • freeGradient > Gradient Offset

上：

  • Alt + 点击 秒表
  • 输入：
time*150

作用

随着时间增加，渐变位置不断往前推。
于是颜色就会沿着线条流动。

速度怎么理解

这里的 150 就是流速。

更慢

  • time*60
  • time*100

更快

  • time*180
  • time*250

最接近视频

  • time*150

十五、第十二步：作者还做了一个“高光中心”的感觉

到了后半段，画面里的线条已经不只是单纯的彩色描边了，
你会看到中间有一点偏亮、偏白的感觉。

而 200 秒那帧，作者右键菜单明显停到了：

  • Layer Styles
  • Inner Glow

字幕也写了：

  • You can apply layer styles to make it look even better

这里我能确认的

我能确认作者演示了 Layer Styles，并且指向了 Inner Glow。

这里我不能确认的

具体 Inner Glow 的参数值，视频没有清楚停住。

所以最稳的复刻建议

把它当成可选包装步骤：

你可以自己补一个 Inner Glow

给 Shape Layer 1：

Layer > Layer Styles > Inner Glow

然后自己试：

  • 浅色或白色
  • Blend Mode 用 Screen
  • 尺寸适中

作用

让线条中间更亮，边缘更有“发光管”的感觉。

这一步属于“作者有做思路演示，但参数没完整展示”。

十六、第十三步：颜色还可以继续细调

作者后面又做了两件事。

1）继续在 freeGradient 色条里加点

字幕写了：

  • You can add color by double-clicking the mouse
  • Drag the mouse down to remove color

也就是

  • 双击加色标
  • 向下拖删除色标

后面画面里能看到作者加进去了：

  • 粉
  • 紫
  • 让原本红蓝橙，变得更丰富

2）还可以用 Colarama 做整体换色

字幕明确写了：

  • You can also change the color using Colarama

而右侧效果搜索里也明确搜的是：

  • Colarama

视频里 Colarama 的可读参数

在 Colarama 面板里能清楚看到：

  • Use Preset Palette = Golden 1
  • Cycle Repetitions = 2.00
  • Interpolate Palette = 勾选
  • Blend With Original = 0%
  • Composite Over Layer = 勾选

复刻

加：

Effect > Color Correction > Colarama

然后先设：

  • Use Preset Palette：Golden 1
  • Cycle Repetitions：2
  • Interpolate Palette：开
  • Blend With Original：0%
  • Composite Over Layer：开

作用

它不是替代 freeGradient，
而是作为后期整体再映射一次颜色。

所以如果你懒得一个个改色标，
Colarama 是更快的整体换风格方法。

十七、这支视频的完整复刻顺序

我给你整理成一版最稳的实操流程。

A. 先画线

  1. 新建 Shape Layer

  2. Fill 关掉

  3. Stroke 打开

  4. 线宽先设：

    • 20 px（做车充电线最像）

  5. 用钢笔画一条平滑贝塞尔路径

  6. 避免直角拐点

B. 加 freeGradient

  1. 给 Shape Layer 1 加：

    • irrealix > freeGradient

  2. 设置：

    • Gradient Type = Linear
    • Definition Mode = 2 Points
    • Color Mode = Normal
    • Opacity Mode = Affect Gradient

C. 调基础颜色

  1. 双击渐变条添加色标

  2. 起步先做：

    • 左：红
    • 中：蓝
    • 右：橙

  3. 不要的色标往下拖删掉

D. 让起止点贴住线两端

  1. 在 2 Points 模式下，把 Start 和 End 放到线条首尾

E. 让它真正“跟着线”

  1. 打开：

    • Window > Create Nulls From Paths

  2. 按：

    • Nulls Follow Points

  3. 得到：

    • Start
    • Mid
    • End

  4. 在 freeGradient 里给 Start 写表达式：

thisComp.layer("Start").transform.position
  1. 给 End 写表达式：
thisComp.layer("End").transform.position

F. 做流动

  1. 打开：

    • Gradient Loop

  2. Gradient Scale 先设：

    • 108%

  3. 切到：

    • Definition Mode = Parametric

  4. 设：

    • Orientation = Horizontal
    • Start Part = 0
    • End Part = 100
    • Angle = 250°

  5. 在 Gradient Offset 上写表达式：

time*150

G. 包装

  1. 可选加：

    • Layer Styles > Inner Glow

  2. 可继续添加更多色标

  3. 或者加：

    • Colarama

  4. 用：

    • Golden 1
    • Cycle Repetitions = 2

十八、替换素材时，哪些值一定要改

这支虽然比 Boa 简单，但换素材时也不是完全无脑套。

1）路径形状变了，必须重画

必改

  • Path 本身
  • Start / End null 的位置
  • Angle
  • Gradient Scale

原因

这支效果是“颜色沿路径流”，
路径本身就是设计的一部分。

2）如果线更粗或更细，要改这些

必改

  • Stroke Width
  • Gradient Scale
  • 是否加 Inner Glow

规律

粗线

  • Stroke 18~24
  • Gradient Scale 可适当大一点
  • 可以加 Inner Glow

细线

  • Stroke 8~14
  • Gradient Scale 不要太大
  • Glow 不要太重

3）路径很长时，要改这些

必改

  • Angle
  • Gradient Offset 速度
  • Gradient Scale

规律

路径越长

  • Gradient Scale 通常要大一点
  • 否则颜色变化太密，显得乱
  • Offset 速度也可以适当加快

4）颜色流动太快或太慢

必改

表达式：

time*150

你可以这样改

更慢
time*80
更快
time*220

5）颜色分布不对

必改

  • 渐变条里的色标位置
  • 色标数量
  • Start / End
  • Parametric 里的 Angle

规律

想让某个颜色停在某一段

  • 调色标位置
  • 调 Start / End
  • 调 Offset 初始值

6）如果你想更科技、还是更温暖

两种最快办法

方法 1：直接改 freeGradient 色标

适合：

  • 你想精准控制每一段颜色
方法 2：加 Colarama

适合：

  • 你想整体快速换风格

十九、这支视频里最值得你直接记住的关键值

给你一版速抄。

工程

  • 1920 × 1080
  • 29.97 fps

Shape

  • Fill：关
  • Stroke：20 px 左右

freeGradient 基础

  • Gradient Type：Linear
  • Definition Mode：2 Points
  • Color Mode：Normal
  • Opacity Mode：Affect Gradient

动态阶段

  • Gradient Loop：开
  • Gradient Scale：108%
  • Definition Mode：Parametric
  • Orientation：Horizontal
  • Start Part：0%
  • End Part：100%
  • Angle：250°

表达式

Start

thisComp.layer("Start").transform.position

End

thisComp.layer("End").transform.position

Gradient Offset

time*150

Colarama

  • Preset：Golden 1
  • Cycle Repetitions：2

二十、这支视频最适合配什么 BGM

这支视觉气质很明显更偏：

  • 科技感
  • 未来感
  • 产品广告
  • 电流 / 能量传输
  • 流线型工业设计

所以它不适合黑暗奇幻那类 BGM。
更适合下面这些。

方向 1：科技产品广告感

最贴这支。

英文搜索词：

  • tech commercial music
  • futuristic product ad music
  • sleek electronic instrumental
  • modern promo beat
  • tech ambient commercial

适合

  • 充电线
  • 电动车
  • 智能硬件
  • UI 展示
  • 科技产品包装

方向 2：轻电子 / 未来感节奏

如果你想更像短视频广告。

英文搜索词：

  • future bass instrumental
  • electronic promo beat
  • synthwave commercial
  • glossy tech beat
  • modern electronic underscore

适合

  • 节奏稍快
  • 有动态流动感
  • 适合动效展示

方向 3：更高级、更冷静的科技氛围

如果你不想太吵。

英文搜索词：

  • futuristic ambient
  • minimal tech ambient
  • clean electronic ambient
  • digital flow soundtrack
  • sci fi ambient commercial

适合

  • 高级感
  • 极简科技
  • 镜头慢一点的产品片

方向 4：最稳直接搜索组合

你直接搜这些最省时间：

  • tech commercial instrumental
  • futuristic promo music
  • sleek electronic beat
  • modern product ad music
  • digital flow ambient
  • clean tech soundtrack

二十一、我最推荐的 3 组 BGM 搜索词

优先级最高的三个：

1

tech commercial instrumental

2

futuristic promo music

3

sleek electronic beat

这三组和这支充电线、能量流动、科技广告的气质最搭。

下一支继续发，我就继续按这一套拆。

avatar
文章
阅读
粉丝