Effects
The Visual Effects Pipeline allows you to add multiple visual effects to any layer. Effects are applied in order, creating a powerful and flexible system for achieving professional-looking results.
Think of the effects pipeline as a stack of Instagram-style filters applied to your layer. Each effect processes the layer and passes the result to the next effect. The order matters - applying blur before a drop shadow creates a different result than applying drop shadow before blur.
Pipeline Basics
| Feature | Details |
|---|---|
| Maximum Effects | Up to 10 effects per layer |
| Effect Order | Effects are applied from top to bottom. Drag to reorder effects in the pipeline. |
| Enable/Disable | Toggle effects on/off without removing them from the pipeline |
| Real-time Preview | See effects update immediately as you adjust parameters |
Available Effects
Blur Basic
Applies a Gaussian blur to the layer, creating a soft, out-of-focus appearance.
| Parameter | Range | Default | Description |
|---|---|---|---|
| amount | 0 - 100 pixels | 1 | Blur intensity in pixels. Higher values create stronger blur. |
Use Cases: Creating depth of field, softening edges, background layers, dreamy/ethereal effects
Drop Shadow Basic
Adds a shadow beneath the layer, creating depth and making elements stand out from the background.
| Parameter | Range | Default | Description |
|---|---|---|---|
| distance | 0 - 100 pixels | 3 | How far the shadow extends from the layer |
| angle | 0 - 360 degrees | 45 | Direction of the shadow (0° = right, 90° = down, etc.) |
| blur | 0 - 100 pixels | 2 | Softness of the shadow edge |
| color | Hex color | black | Shadow color |
Use Cases: Creating depth, elevating UI elements, text shadows, making icons pop
Glow Advanced
Creates a luminous glow around the layer, with separate control over inner and outer glow strength.
| Parameter | Range | Default | Description |
|---|---|---|---|
| distance | 0 - 100 pixels | 10 | How far the glow extends from the layer |
| color | Hex color | white | Color of the glow |
| innerStrength | 0 - 10 | 0 | Intensity of the inner glow (inside the layer edges) |
| outerStrength | 0 - 10 | 4 | Intensity of the outer glow (outside the layer edges) |
For best results, place Glow effects after any Blur effects in the pipeline. This ensures the glow applies to the already-blurred layer.
Use Cases: Magical effects, neon signs, highlighting important elements, energy/power effects
Outline Basic
Draws a solid outline around the layer's edges.
| Parameter | Range | Default | Description |
|---|---|---|---|
| width | 0 - 20 pixels | 1 | Thickness of the outline stroke |
| color | Hex color | black | Outline color |
Place Outline effects before Drop Shadow effects so the shadow applies to the outlined shape rather than just the original layer.
Use Cases: Text readability on varying backgrounds, comic book style, defining edges, creating borders
Color Overlay Color
Tints the entire layer with a solid color at a specified opacity.
| Parameter | Range | Default | Description |
|---|---|---|---|
| color | Hex color | blue | The color to overlay on the layer |
| opacity | 0 - 100 | 100 | Opacity of the color overlay (0 = invisible, 100 = opaque) |
Only one Color Overlay effect can be added per layer. Color Overlay may conflict with Color Adjustments - use one or the other, not both.
Use Cases: Color theming, creating duotone effects, tinting grayscale images, team colors
Color Adjustments Color
Fine-tune individual color channels and overall image properties for precise color control.
| Parameter | Range | Default | Description |
|---|---|---|---|
| red | 0 - 200 | 100 | Red channel intensity (0 = no red, 100 = normal, 200 = double red) |
| green | 0 - 200 | 100 | Green channel intensity (0 = no green, 100 = normal, 200 = double green) |
| blue | 0 - 200 | 100 | Blue channel intensity (0 = no blue, 100 = normal, 200 = double blue) |
| gamma | 20 - 500 | 100 | Gamma correction (affects midtones, 100 = normal) |
| saturation | 0 - 200 | 100 | Color saturation (0 = grayscale, 100 = normal, 200 = hyper-saturated) |
| contrast | 0 - 200 | 100 | Contrast level (0 = flat gray, 100 = normal, 200 = extreme contrast) |
| brightness | 0 - 200 | 100 | Overall brightness (0 = black, 100 = normal, 200 = very bright) |
Only one Color Adjustments effect can be added per layer. May conflict with Color Overlay - use one or the other.
Use Cases: Photo correction, color grading, creating specific moods, matching artwork styles, desaturation effects
Blending Basic
Controls how the layer blends with layers beneath it using different blend modes.
| Parameter | Options/Range | Default | Description |
|---|---|---|---|
| opacity | 0 - 100 | 100 | Overall layer opacity (0 = invisible, 100 = opaque) |
| blendMode | See below | normal | How the layer's colors interact with layers below |
Blend Modes
| Mode | Effect |
|---|---|
| Normal | Standard blending with no color interaction |
| Multiply | Darkens - multiplies colors (useful for shadows, darkening) |
| Screen | Lightens - inverts, multiplies, inverts again (useful for highlights) |
| Overlay | Combines Multiply and Screen (increases contrast) |
| Darken | Keeps darker of the two colors |
| Lighten | Keeps lighter of the two colors |
| Color Dodge | Brightens based on blend color (creates highlights) |
| Color Burn | Darkens based on blend color (increases contrast) |
| Hard Light | Like Overlay but more intense |
| Soft Light | Like Overlay but more subtle |
| Difference | Subtracts colors (creates inversion effects) |
| Exclusion | Like Difference but lower contrast |
| Hue | Takes hue from blend layer, keeps saturation/luminosity |
| Saturation | Takes saturation from blend layer, keeps hue/luminosity |
| Color | Takes hue and saturation from blend layer, keeps luminosity |
| Luminosity | Takes luminosity from blend layer, keeps hue/saturation |
Only one Blending effect can be added per layer.
Use Cases: Layer transparency, texture overlays, lighting effects, color grading, creative compositing
Effect Order & Dependencies
The order of effects in the pipeline significantly impacts the final result. Some effects work better when placed before or after others.
Recommended Ordering
| Effect | Best Placed | Reason |
|---|---|---|
| Outline | Before Drop Shadow | Ensures the shadow applies to the outlined shape |
| Glow | After Blur | Glow applies to the already-blurred result |
| Color Adjustments/Overlay | Before other effects | Color changes affect the base layer before effects apply |
| Blending | Last in pipeline | Controls how the final result blends with other layers |
Performance Considerations
Some effects are more computationally expensive than others. Too many heavy effects can slow down rendering and export times.
| Performance Impact | Effects | Recommendation |
|---|---|---|
| Heavy | Blur, Glow, Outline | Use sparingly. Limit to 3 or fewer heavy effects per layer. |
| Medium | Drop Shadow, Color Adjustments | Generally safe to use multiple times. |
| Light | Color Overlay, Blending | Minimal performance impact. |
- Keep total effects per layer under 7 when possible
- Limit heavy effects (Blur, Glow, Outline) to 3 per layer
- Disable unused effects rather than deleting them for easy experimentation
- Test export times with your effects pipeline before finalizing
Best Practices
Start Simple
Begin with one or two effects and add more as needed. It's easier to add effects than to figure out which one is causing an unwanted result.
Use Enable/Disable for Comparison
Toggle effects on and off to see their individual contribution to the final result. This helps you understand what each effect is doing.
Name Your Layers
When using complex effect pipelines, give your layers descriptive names so you remember which layer has which effects.
Duplicate Before Experimenting
Duplicate a layer before adding experimental effects. This gives you a clean copy to fall back to.
Consider Export Performance
Effects that look great might slow down bulk exports. Test exporting a few cards before exporting your entire dataset.
Common Effect Combinations
Classic Text Shadow
- Drop Shadow (distance: 2, angle: 135, blur: 1, color: black)
- Blending (opacity: 90)
Glowing Neon Text
- Outline (width: 2, color: bright color)
- Glow (distance: 15, color: same as outline, outerStrength: 8)
- Drop Shadow (distance: 5, blur: 10, color: black)
Soft Dreamy Background
- Blur (amount: 8)
- Color Adjustments (saturation: 120, brightness: 110)
- Blending (opacity: 70)
Comic Book Style
- Outline (width: 3, color: black)
- Color Adjustments (saturation: 150, contrast: 120)
- Drop Shadow (distance: 3, angle: 135, blur: 0)
Troubleshooting
| Problem | Solution |
|---|---|
| Effect not visible | Check if the effect is enabled. Verify the effect parameters aren't set to zero/default values. |
| Can't add more effects | Maximum of 10 effects per layer. Remove unused effects or disable them. |
| Export is very slow | Too many heavy effects (Blur, Glow, Outline). Reduce the number or simplify parameters. |
| Colors look wrong | Check if Color Overlay and Color Adjustments are both active - they may conflict. Use one or the other. |
| Effect order seems wrong | Drag effects to reorder them in the pipeline. Try recommended orderings for better results. |
Summary
The Visual Effects Pipeline gives you professional-grade control over layer appearance:
- 7 effect types covering basic shadows, advanced glows, and color manipulation
- Up to 10 effects per layer with flexible ordering
- Real-time preview of all effect changes
- 16 blend modes for creative compositing
- Enable/disable effects without removing them
Start with simple effects like Drop Shadow and Blending, then experiment with more advanced combinations as you become comfortable with the system. The effects pipeline gives you the power to create everything from subtle refinements to dramatic visual transformations.