Synfig Studio :: Documentation - User contributions [en]

Curve Gradient Layer

2011-08-24T17:27:40Z

BentFX:

{{Title|Curve Gradient Layer}}
{{Category|Layers}}


== About Curve Gradient Layer ==
{{l|Image:Layer_gradient_curve_icon.png|64px}}

As you already guessed, a Curve Gradient is a gradient that follows a curve.
One side of the curve will be filled with the color at the beginning of the current gradient (see the {{l|Gradient Editor Dialog}}), and the other side will be filled by the color at the end of the gradient. In other words, the gradient will fully cover your canvas (as the other gradients do), and you'll have to play with the {{l|Blend Method}} if you want to bind it to a specific shape.

There are two ways to display a gradient: the default one (fast), and an improved one that can remove any render artifacts you have with the first one. To switch from one method to the other, check/uncheck the ''Fast'' parameter from the Params Panel.

== Parameters of Curve Gradient Layer ==
The parameters of the Curve Gradient Layer are:
{|border="0" align="left" style="border-collapse" cellpadding="3" cellspacing="0"
|-style="background:#C0C0C0"
|'''Name'''||'''Value'''||'''Type'''
|-
||{{l|Image:Real_icon.png|16px}} {{l|Z Depth Parameter|Z Depth}}
||0.000000
||real

|-style="background:#eeeeee"
||{{l|Image:Real_icon.png|16px}} {{l|Amount Parameter|Amount}}
||1.000000
||real

|-
||{{l|Image:Integer_icon.png|16px}} {{l|Blend Method|Blend Method}}
||Composite
||integer

|-style="background:#eeeeee"
||{{l|Image:Vector_icon.png|16px}} Orign
||0.000000pt,0.000000pt
||vector

|-
||{{l|Image:Real_icon.png|16px}} Width
||5.500000pt
||real

|-style="background:#eeeeee"
||{{l|Image:List_icon.png|16px}} Vertices
||List
||BLine

|-
||{{l|Image:Gradient_icon.png|16px}} {{l|Gradient Editor Dialog|Gradient}}
||
{| style="width:100%; height:16px; background:yellow;" border="1"
|-
|}
||gradient

|-style="background:#eeeeee"
||{{l|Image:Bool_icon.png|16px}} Loop
||
{| style="width:16px; height:16px" border="1"
|-
|}
||bool

|-
||{{l|Image:Bool_icon.png|16px}} ZigZag
||
{| style="width:16px; height:16px" border="1"
|-
|}
||bool

|-style="background:#eeeeee"
||{{l|Image:Bool_icon.png|16px}} Perpendicular
||
{| style="width:16px; height:16px" border="1"
|-
|}
||bool

|-
||{{l|Image:Bool_icon.png|16px}} Fast
||
{| style="width:16px; height:16px" border="1"
|-
|}
||bool

|}

== Creating a Curve Gradient ==

There are several ways to create a gradient that follows a curve.

* With the {{l|Bline Tool}}, check "Gradient" in the Tool Options dialog. It will create a gradient that follows the curve you draw.

* In the Layer menu (from the {{l|Canvas Menu Caret}} or with a right click on a layer in the Layers Panel), select ''Gradients > Curve Gradient''. It will create a gradient with a default shape. On the {{l|Params Panel}}, right click on Vertices, and select ''Convert > BLine'', so you can edit the shape of the gradient.

* To make a Curve Gradient follow an '''existing''' shape, place the Curve Gradient layer above the layer containing the shape in the {{l|Layers Panel}}. Select those two layers, then on the Params Panel, right-click on ''Vertices'' (greyed) and select ''Link''.

* Alternately, to make a Curve Gradient follow an existing bline shape (outline, region, or other curve gradient), select the shape you want it to follow, right-click its Vertices parameter in the parameter dialog and chose Export from the menu. Type a name in the dialog that pops up. Then select the curve gradient layer where you want to use this exported shape. Open the Children dialog, find the shape you just exported and select it. Then right-click on the Vertices parameter of the Curve Gradient layer where you want to use the shape and select Connect from the menu.

== Spreading the gradient ==

Your curve gradient is now created, but it may not look at all like a gradient. Instead it may looks like each side of the curve was filled with a solid color. That's because the width of the gradient is too small. Make sure that the Curve Gradient layer is selected, and in the {{l|Params Panel}}, increase the ''Width'' value. Your gradient will appear.

An easier way to increase the gradient size is to use the Width {{l|Duck|ducks}}. In the {{l|Canvas Menu Caret|Canvas Menu}} select ''View > Show/Hide Ducks > Show width ducks''. The width ducks appear in purple on the canvas. Grab one of them to adjust the width. Each width duck can be adjusted independently. The width of the gradient will follow the width of the BLine at each point, so it's possible to have the gradient very wide in some places and less wide in others.

== Fast Option ==

Within the {{l|Params Panel}} of the curve gradient layer is a "fast" option. I'm unsure exactly what speed up it produces, but it does cause a visual artifact when the gradient is constrained with transparency as show in the {{l|Gradient Editor Dialog}} page, and curve vertices are set to width = 0.

http://i1134.photobucket.com/albums/m620/BentFX/Synfig/FastGradientCurve.png

The fast option can be turned off in the curve gradient layer's {{l|Params Panel}}.

Gradient Editor Dialog

2011-08-23T11:27:13Z

BentFX:

{{Title|Gradient Dialog}}
{{Category|Dialogs}}


The Gradient Editor Dialog has two sections. The top part is for selecting the colors and alpha level and the lower part contains a preview of the gradient.

Just below the preview area there are two small triangles, called CPoints, that denote the initial and final colors of the gradient.

http://i85.photobucket.com/albums/k74/Genete/synfig/GradientEditor.png

The currently selected CPoint is displayed as a white triangle. Its color is shown in the top part of the dialog for editing. You can select any of the other CPoints by clicking on their triangles to edit the other colors of the gradient.
For example by modifying the red, green and blue channels of the CPoint on the right hand side you can change the final color of your gradient (preset to white) to a nice dark yellow like in the following example.

http://i85.photobucket.com/albums/k74/Genete/synfig/GradientEditor2.png

Gradients are not limited to two colors; you can have as many colors as you want in the gradient. To do that you just need to right click into the gradient preview and select "Insert CPoint". With this you'll insert a new triangle in the place where you made the right click. Then you can edit that color with the color and alpha sliders and create a tricolor gradient.

{|
| http://i85.photobucket.com/albums/k74/Genete/synfig/GradientEditor3.png || || || http://i85.photobucket.com/albums/k74/Genete/synfig/GradientEditor5.png
|}

Here I've created some sort of transparent light cyan for the central color.
Another cool feature is that you can slide the triangles just like you slide the color or alpha bars. With this you can compress the gradient to one or to other side or make its falling more quick or slow between colors. If you press SHIFT key meanwhile the CPoint is being dragged it doesn't pass the closest CPpoint it finds so it makes easier to stack CPoints one over other. CPoints can be moved more precisely by editing the numerical field just about the gradient's preview. This is a number between 0 (left edge) and 1 (right edge) specifying the selected CPoint's position.

http://i85.photobucket.com/albums/k74/Genete/synfig/GradientEditor6.png

Finally the "Grab" button copies the edited gradient into the toolbox's default gradient.

--------------------
Constraining a gradient:

By default gradient layers overwrite or flood their surroundings. The area before the beginning of the gradient and after the end of the gradient are flooded with the beginning and ending colors of the gradient. As can be seen in this image:

http://i1134.photobucket.com/albums/m620/BentFX/Synfig/Gradient1.png

This is by design and adds the greatest flexibility to gradient layers. To achieve a gradient which is limited by its own geometry begin and end the gradient with transparency. Such as this:

http://i1134.photobucket.com/albums/m620/BentFX/Synfig/Gradient2.png

This still floods the surroundings, but with a transparent flood. To create a sharp edge to the gradient the beginning and ending colors can be dragged to the ends of the gradient editor gadget. The transparency doesn't have to have any width, it just has to be defined as the beginning and the end. Or just the beginning, or just the end, it's up to you, and your situation.

Gradient Editor Dialog

2011-08-23T11:16:16Z

BentFX:

{{Title|Gradient Dialog}}
{{Category|Dialogs}}


The Gradient Editor Dialog has two sections. The top part is for selecting the colors and alpha level and the lower part contains a preview of the gradient.

Just below the preview area there are two small triangles, called CPoints, that denote the initial and final colors of the gradient.

http://i85.photobucket.com/albums/k74/Genete/synfig/GradientEditor.png

The currently selected CPoint is displayed as a white triangle. Its color is shown in the top part of the dialog for editing. You can select any of the other CPoints by clicking on their triangles to edit the other colors of the gradient.
For example by modifying the red, green and blue channels of the CPoint on the right hand side you can change the final color of your gradient (preset to white) to a nice dark yellow like in the following example.

http://i85.photobucket.com/albums/k74/Genete/synfig/GradientEditor2.png

Gradients are not limited to two colors; you can have as many colors as you want in the gradient. To do that you just need to right click into the gradient preview and select "Insert CPoint". With this you'll insert a new triangle in the place where you made the right click. Then you can edit that color with the color and alpha sliders and create a tricolor gradient.

{|
| http://i85.photobucket.com/albums/k74/Genete/synfig/GradientEditor3.png || || || http://i85.photobucket.com/albums/k74/Genete/synfig/GradientEditor5.png
|}

Here I've created some sort of transparent light cyan for the central color.
Another cool feature is that you can slide the triangles just like you slide the color or alpha bars. With this you can compress the gradient to one or to other side or make its falling more quick or slow between colors. If you press SHIFT key meanwhile the CPoint is being dragged it doesn't pass the closest CPpoint it finds so it makes easier to stack CPoints one over other. CPoints can be moved more precisely by editing the numerical field just about the gradient's preview. This is a number between 0 (left edge) and 1 (right edge) specifying the selected CPoint's position.

http://i85.photobucket.com/albums/k74/Genete/synfig/GradientEditor6.png

Finally the "Grab" button copies the edited gradient into the toolbox's default gradient.

--------------------
Constraining a gradient:

By default the gradient overwrites or floods its surroundings. The area before the beginning of the gradient and after the end of the gradient are flooded with the beginning and ending colors of the gradient. As can be seen in this image:

http://i1134.photobucket.com/albums/m620/BentFX/Synfig/Gradient1.png

This is by design and adds the greatest flexibility to the gradient tools and layers. To achieve a gradient which is limited by its own geometry begin and end the gradient with transparency. Such as this:

http://i1134.photobucket.com/albums/m620/BentFX/Synfig/Gradient2.png

This still floods the surroundings, but with a transparent flood. To create a sharp edge to the gradient the beginning and ending colors can be dragged to the ends of the gradient editor gadget. The transparency doesn't have to have any width, it just has to be defined as the beginning and the end. Or just the beginning, or just the end, it's up to you, and your situation.

Gradient Editor Dialog

2011-08-23T10:41:37Z

BentFX:

{{Title|Gradient Dialog}}
{{Category|Dialogs}}


The Gradient Editor Dialog has two sections. The top part is for selecting the colors and alpha level and the lower part contains a preview of the gradient.

Just below the preview area there are two small triangles, called CPoints, that denote the initial and final colors of the gradient.

http://i85.photobucket.com/albums/k74/Genete/synfig/GradientEditor.png

The currently selected CPoint is displayed as a white triangle. Its color is shown in the top part of the dialog for editing. You can select any of the other CPoints by clicking on their triangles to edit the other colors of the gradient.
For example by modifying the red, green and blue channels of the CPoint on the right hand side you can change the final color of your gradient (preset to white) to a nice dark yellow like in the following example.

http://i85.photobucket.com/albums/k74/Genete/synfig/GradientEditor2.png

Gradients are not limited to two colors; you can have as many colors as you want in the gradient. To do that you just need to right click into the gradient preview and select "Insert CPoint". With this you'll insert a new triangle in the place where you made the right click. Then you can edit that color with the color and alpha sliders and create a tricolor gradient.

{|
| http://i85.photobucket.com/albums/k74/Genete/synfig/GradientEditor3.png || || || http://i85.photobucket.com/albums/k74/Genete/synfig/GradientEditor5.png
|}

Here I've created some sort of transparent light cyan for the central color.
Another cool feature is that you can slide the triangles just like you slide the color or alpha bars. With this you can compress the gradient to one or to other side or make its falling more quick or slow between colors. If you press SHIFT key meanwhile the CPoint is being dragged it doesn't pass the closest CPpoint it finds so it makes easier to stack CPoints one over other. CPoints can be moved more precisely by editing the numerical field just about the gradient's preview. This is a number between 0 (left edge) and 1 (right edge) specifying the selected CPoint's position.

http://i85.photobucket.com/albums/k74/Genete/synfig/GradientEditor6.png

Finally the "Grab" button copies the edited gradient into the toolbox's default gradient.

--------------------
Constraining a gradient:

By default the gradient overwrites or floods its surroundings. The area before the beginning of the gradient and after the end of the gradient are flooded with the beginning and ending colors of the gradient. As can be seen in this image:

http://i1134.photobucket.com/albums/m620/BentFX/Synfig/Gradient1.png

This is by design and adds the greatest flexibility to the gradient tools and layers. To achieve a gradient which is limited by its own geometry begin and end the gradient with transparency. Such as this:

http://i1134.photobucket.com/albums/m620/BentFX/Synfig/Gradient2.png

This still floods the surroundings, but with a transparent flood. To create a sharp edge to the gradient the beginning and ending colors can be dragged to the ends of the gradient editor gadget. The transparency doesn't have to have any width, it just has to be defined as the beginning and the end. Or just the beginning, or just the end, it's up to you, and your situation. That's the flexibility.