Difference between revisions of "Doc:Brushes"

From Synfig Studio :: Documentation
Jump to: navigation, search
(The procedure)
m (Fix typo)
 
(23 intermediate revisions by 7 users not shown)
Line 1: Line 1:
 +
<!-- Page info -->
 +
{{Title|Brushes}}
 +
{{Category|Manual}}
 +
{{Category|Tutorials}}
 +
{{Category|Tutorials Intermediate}}
 +
{{TOCright}}
 +
{{NewTerminology}}
 +
<!-- Page info end -->
 +
 
== Introduction ==
 
== Introduction ==
  
Line 8: Line 17:
 
Well, for the moment Synfig hasn't any brush image included so you'll need to do them by your self or grab from the free resources (insert link here to those resources).  
 
Well, for the moment Synfig hasn't any brush image included so you'll need to do them by your self or grab from the free resources (insert link here to those resources).  
  
Here are some examples of brushes (insert some brushes images here)
+
Here are some examples of brushes:
  
Brushes images are just any kind of image file that allow transparency (PNG, TIFF, GIF). More resolution your image has more big your brush size can be without pixelation. Huge file sizes would take more time to render. The balance between both options is your desition.
+
{{l|Image:Soft-wheezy-asymetric-brush.png}}
 +
{{l|Image:Wool-ball-brush.png}}
 +
{{l|Image:Soft-triangle-brush.png}}
 +
{{l|Image:Tictactoe-brush.png}}
 +
{{l|Image:Rhomb-fuzzy-brush.png}}
 +
{{l|Image:Big-soft-brush.png|128px}}
  
Anyway you can use anything that can be visible under synfig as a brush. See below.
+
These pictures are all licensed as public domain. Feel free to use them in your projects.
=== A recent Release ===
+
  
Brushes are not a primary feature of Synfig. They are obtained from the combintation of the following features:
+
Brush images can just be any kind of image file that allows transparency (PNG, TIFF, GIF). The more resolution your image has, the bigger your brush size can be without pixelisation. Huge file sizes would take synfig more time to render,though. Find the balance between both options of quality and speed.
  
* [[Duplicate Layer]] what implies SVN revision >= 1358
+
Anyway, you can use anything that is visible under synfig as a brush. See below.
* Link to Bline (what uses the following convert types):
+
** [[Convert#Bline Vertex|Bline Vertex]], what implies SVN revision >= 774
+
** [[Convert#Bline Tangent|Bline Tangent]], what implies SVN revision >= 1863
+
** [[Convert#Bline Width|Bline Width]], what implies SVN revision >= 1872
+
  
Strictly the Link to Bline feature is not needed but it would help on make several conversion types and linking.
+
=== A combination of features ===
 +
 
 +
Brushes are not a primary feature of Synfig. They are obtained from the combination of the following features:
 +
 
 +
* {{l|Duplicate Layer}}
 +
* Link to Spline (what uses the following convert types):
 +
** {{l|Convert#Spline Vertex|Spline Vertex}}
 +
** {{l|Convert#Spline Tangent|Spline Tangent}}
 +
** {{l|Convert#Spline Width|Spline Width}}
 +
 
 +
Strictly the Link to Spline feature is not needed but it would help on make several conversion types and linking.
  
 
== The Idea ==
 
== The Idea ==
  
The idea of brushes is to use the Duplicate layer feature with the Link to Bline (automatic or manual) feature given by the conversion types.
+
The idea of brushes is to use the Duplicate layer feature with the Link to Spline (automatic or manual) feature given by the conversion types.
  
When you link a vertex to a bline (or a tangent or a width) it converts your parameter to the following sub-parameters.
+
When you link a vertex to a spline (or a tangent or a width) it converts your parameter to the following sub-parameters.
  
* bline "BLine"  
+
* spline "Spline"  
 
* bool "Loop"  
 
* bool "Loop"  
 
* real "Amount"
 
* real "Amount"
  
There are other particular paramters for tangent or width that will be revised in other section.
+
There are other particular parameters for tangent or width that will be revised in other section.
  
bline "Bline" is the bline where the parameter (vertex, tangent or width) is linked to. In the case of the vertex it means that the vertex lies on the bline given by its "Amount" parameter. When Amount is 0.0 the vertex position is the Bline begin. When Amount is 1.0 the vertex position is the Bline end. When Loop is "on" values outside the [0.0, 1.0] range are forced to be in that range by eliminating the integer part of the number. <small><tt>(It needs a better explanation)</tt></small>
+
spline "Spline" is the spline where the parameter (vertex, tangent or width) is linked to. In the case of the vertex it means that the vertex lies on the spline given by its "Amount" parameter. When Amount is 0.0 the vertex position is the Spline begin. When Amount is 1.0 the vertex position is the Spline end. When Loop is "on" values outside the [0.0, 1.0] range are forced to be in that range by eliminating the integer part of the number. <small><tt>(It needs a better explanation)</tt></small>
  
On the other hand the Duplicate layer allows duplicate the render of everything that is below it as many times as the Index parameter indicates. Also if you link any parameter to that Index one the parameter is modified according to the index before it is multiple rendered by the Duplicate layer. It allows apply some kind of transformation to the layers at the same time you duplicate them.  
+
On the other hand the Duplicate layer allows duplicate the render of everything that is below it as many times as the Index value node indicates. Also if you link any parameter to that Index one the parameter is modified according to the index before it is multiple rendered by the Duplicate layer. It allows apply some kind of transformation to the layers at the same time you duplicate them.  
  
Combining those two features (Link to Bline and Duplicate) you can achieve the emulation of brushes in synfig.
+
Combining those two features (Link to Spline and Duplicate) you can achieve the emulation of brushes in synfig.
  
 
== The procedure ==
 
== The procedure ==
It is supposed you already have an outline wher you would like to apply the brush. If not available create it now.
+
As of Synfig 1.0.2 (November 27, 2015), much of the process for creating a brushtroke effect has been simplified because scale and rotate functions have been integrated into group layers.  The following steps will guide you through the process:
  
These are the steps you need to follow:
+
# If you have not already done so, create an outline (path) for the brush to follow.
 +
## Click on the {{l|Spline Tool}}.
 +
## Under the {{l|Tool Options Panel}}, select "Create Outline" if it is not already selected.  You may wish to de-select all other "Layer Type" options as well.
 +
## Lay as many or as few vertices as you wish.
 +
## In the bottom-left corner of the {{l|Tool Options Panel}}, click "Make Spline" (gears icon).
 +
## Edit the spline to your content by adding or removing vertices and moving tangent handles.
 +
# Import the "brush" you would like to copy by clicking '''File->Import...''', then selecting the corresponding image file.
 +
#*Alternatively, you may use an existing shape within your project, although this may require an additional step.  Place the object(s) to be used as a brush in a {{l|Group Layer}} or {{l|Switch Group Layer}}.  If you want your brush to rotate to follow the contour of the path, it is necessary that the objects be in a group layer or switch group layer because most objects do not have a rotation (Angle) parameter but groups do.  (Some objects also lack an origin parameter.)  After creating the group layer, move the origin handle to the object's center (ctrl-click and drag the origin handle) so that they both move together.  These steps are not necessary if you import an image because imported images are created within a switch group layer.
 +
# Select both the group layer containing your brush and the spline layer.  Click the group's origin handle (green circle), then right-click on the spline (not on a handle) and select '''Link to Spline'''.  To test that you have done this correctly, move the group's origin handle and it should be confined to the spline and rotate so that it is always tangent to it.  You are still free to rotate the group layer and it will continue to correspondingly rotate as you move the origin along the spline's path.
 +
# Put the group layer with your brush inside another group layer.  Call this new group layer "Clones" or something similar for easy reference.
 +
# With the group layer ("Clones") selected, adjust the scale handle (orange circle in the {{l|Group Transformation Widget}}) so that the brush is as large or as small as you desire.  You can also return to this step later.
 +
# Click the group layer containing your brush (not the "Clones" layer).  Right-click it and select '''New Layer->Other->Duplicate'''.  (Alternatively, click in the menu bar '''Layer->New Layer->Other->Duplicate'''.)  This creates a {{l|Duplicate Layer}}, which is ''not the same as duplicating the layer''.  Do not simply click "Duplicate Layer" below the Layers Panel.
 +
# Click the Duplicate Layer you just created.  Under the parameters, expand "Index (Index 1)" and edit the values "From", "To", and "Step".  These correspond to the portion of the spline to be traversed as well as the density of the brushstroke.  For the "From" and "To" parameters, 0 corresponds to the start of the spline and 1 corresponds to its end.  The number of duplicates to be made is equal to floor((To-From)/Step).  A smaller "Step" parameter corresponds to a denser brushstroke while a larger one makes it more sparse (and possibly easier to render).  For this tutorial, it is suggested you use From=0, To=1, and Step=0.02, which will create 50 copies along the entire length of the spline, although you are encouraged to modify these values to see their effects.
 +
# Open the {{l|Library Panel}}.  Expand "ValueBase Nodes" and select "Index 1", which should correspond to the value node you just edited in the Duplicate Layer.  Make sure "Index 1" remains selected throughout the following step.
 +
# Click the group layer containing your brush (not "Clones").  Within the {{l|Parameters Panel}}, expand '''Transformation->Offset'''.  Right-click "Amount" and select "Connect".  (Note that the Transformation and Offset parameters must be expanded.  The Amount parameter there is ''not'' the same as the top-level Amount parameter, which is equivalent to the layer's alpha channel.)  This connects the "Amount" parameter (the position along the spline) with the value node associated with the Duplicate Layer.  This should create many copies of the brush along the length of the spline.  You will notice that these copies are not rotated, which will be accomplished in the next and final step.  If you do not wish for the brush to rotate as it traverses the path, you are done.
 +
# Still within the group layer's Parameters Panel, expand '''Transformation->Angle'''.  Right-click "Amount" and select "Connect" (make sure "Index 1" is still selected in the Library Panel).  (Note that the Transformation and Angle parameters must be expanded.  The Amount parameter there is ''not'' the same as the top-level Amount parameter, which is equivalent to the layer's alpha channel.)  This automatically associates the duplicates' angle with the tangent to the spline.  If you have done all of the above steps correctly, your brush will follow the spline and its angle will change with it.
  
# Caret Menu->File->Import. Select your image file for the brush. You can also use an existing layer to do that, even a canvas with an animation inside. It doesnt matter what you use as brush, the procedure is always the same.
+
At this point, you can modify any parameters and the brushstroke will update dynamically. You can turn off the Spline Layer to hide it, add vertices, modify tangent handles, and change the "From", "To", and "Step" parameters.
# Create a Rotate layer onto the brush layer.
+
# Create a Zoom layer onto the Rotate layer.
+
# Select Zoom, Rotate and your brush layer and encapsulate them. It would produce a Paste Canvas Layer.
+
# Select the Paste Canvas Layer and also select your outline layer. Make click on the Paste Canvas Layer Origin duck (beware that it can be below the Origin of the outline layer -both at (0,0) by default-) and make right click on the outline (avoid any duck). Select the "Link to Bline" option.
+
# Repeat above step but do it with the angle duck of the Rotate layer instead of the Origin of the Paste Canvas Layer. It doesn't matter if you make right click on the same place of the outline bline or not. Later it will be fixed.
+
# Repeat the same but with the Amount paramter of the Zoom layer. AS well as the Amount parameter of the zoom layer has not visual interface (hasn't any duck associated) you have to export the parameter (right click export) and then select it from the Child panel. Then you can make the right click and Link to Bline operations.
+
# Onto the Paste Canvas layer create a Duplicate Layer. Encalsulate both to avoid unuseful duplications of the stuff below the Duplciate Layer. It would produce a Child parameter (probably called "Index1" if that's your first Duplicate layer). Select the Index parameter from the Child Panel.
+
# Now go to the Paste canvas layer. Search for the Origin parameter (that now is a converted type) and expand it. Look for the Amount parameter. This parameter should have a value between 0.0 and 1.0 depending on where did you made click to the outline. Make right click over it and select Convert->Scale. Expand it again and select the "Link" parameter (it should be a Real) and make right click and select "Connect". It would connect the Link parameter to the Index parameter (already selected from the child panel). The default values for Index parameter is to duplicate from 1.0 to 3.0 so a this moment the duplicated brushes images are all placed at the end of the outline bline because all they have a value bigger or equal than 1.0.
+
#Repeat the same procedure for the Amount sub-parameter of the Angle parameter of the Rotate layer and the Amount sub-parameter of the Amount parameter of the Zoom layer.
+
# It is the time of spread the position of the duplicated brushes along the bline. To do that you have to properly scale the Amount sub-parameter of each converted to Link to Bline parameter. Go to the Paste Canvas Layer and expand the Origin parameter. Expand the Amount sub-parameter (already converted to a Scale) and look to the "Scale" parameter. This paramter has a default value of 1.0. Make right click over it and select Covnert->Reciprocal. It would produce two sub-parameter more: Link, Epsilon and Infinite. Leave Epsilon and Infinite as they are and modify the Link one to be 3.0. Voila! the brush is spreaded along the bline!
+
# Now export the Link sub-parameter (that you have just modified) by right click and "Export". Give a meaning name (for example "b-amount")
+
# Go to the child panel and select the just exported one.
+
# Without leaving the Origin parameter search for the following sub-parameter: Origin(Bline Origin)->Amount(Scale)->Link(Duplicate)->To. This parameter is the end of the loop of the Duplciate layer. Select it and make right click. As well as the exported b-amount is selected you can select Link from the context menu. It would make the Duplicate layer repeat it as many times says the b-amount value. By going to the Child Panel and changing the "b-amount" parameter to a high value (for example 100) make the brush to fill all the bline. Do you get the idea?
+
# Repeat the same procedure to the following parameters of the following layers (keep in mind that the "b-amount" parameter from the child list panel still selected):
+
## Rotate Layer->Amount(Bline Angle)->Amount(Scale)->Link(Duplicate)->To. Select it and right click "Link".
+
## Zoom Layer->Amount(Bline Width)->Amount(Scale)->Link(Duplicate)->To. Select it and right click "Link".
+
  
You can make the outline layer unvisible (by unchecking the visibility check box) to only render the brushed one.
+
== Further steps ==
  
It only rest to make some modifications to the Outline width and the ouline shape to modify the brushed one accordingly.
+
It is possible to make more fancy things with this procedure like make random angled brushes or random spread brushes stamps along the outline. But this is part of an Advanced uses of Brushes tutorial.
  
Also you would like to not link the rotation to the bline to achieve a constant angled pen. It is up o you to use one or other feature.
+
== Examples ==
  
== Further steps ==
+
{{l|Image:Test1-1.png}}
  
It is possible to make more funcy things with this procedure like make random angled brushes or random spreaded brushes stamps along the outline. But this is part of an Advanced uses of Brushes tutorial.
+
A Star layer.
 +
You can see that seems to be a bug there with the feather and zoom in and out combinations.
  
== Examples ==
+
 
 +
{{l|Image:Test1-2.png}}
 +
 
 +
A simple stroke.
 +
 
 +
{{l|Image:Test1-3.png}}
 +
 
 +
A angled pen.
 +
And this is the brush image:
 +
 
 +
{{l|Image:Brush002.png}}
 +
 
 +
 
 +
{{l|Image:Test1-4.png}}
 +
 
 +
The same but not rotated.
 +
 
 +
{{l|Image:Test1-5.png}}
 +
 
 +
Other brush example. And this is the brush image:
 +
 
 +
{{l|Image:Brush001.png|128px}}
 +
 
 +
This is the sifz file used to render the examples:
 +
 
 +
{{l|Media:Test1.sifz|Sample file link}}
 +
 
 +
You need to modify the zoom parameter in the group layer and the b-amount value node to modify the density of the brush to achieve same values than in the examples.

Latest revision as of 02:35, 4 January 2020

Languages Language: 

English • română




Introduction

The Outlines that you can draw with Synfig are formed by a rounded brush. The brush is defined by a radius that you can modify by its brush editor widget. This tutorial explains how to make brushed outlines that would improve sustantially your artwork.

What do I need to use brushes?

A brush image

Well, for the moment Synfig hasn't any brush image included so you'll need to do them by your self or grab from the free resources (insert link here to those resources).

Here are some examples of brushes:

Image:Soft-wheezy-asymetric-brush.png Image:Wool-ball-brush.png Image:Soft-triangle-brush.png Image:Tictactoe-brush.png Image:Rhomb-fuzzy-brush.png Big-soft-brush.png

These pictures are all licensed as public domain. Feel free to use them in your projects.

Brush images can just be any kind of image file that allows transparency (PNG, TIFF, GIF). The more resolution your image has, the bigger your brush size can be without pixelisation. Huge file sizes would take synfig more time to render,though. Find the balance between both options of quality and speed.

Anyway, you can use anything that is visible under synfig as a brush. See below.

A combination of features

Brushes are not a primary feature of Synfig. They are obtained from the combination of the following features:

Strictly the Link to Spline feature is not needed but it would help on make several conversion types and linking.

The Idea

The idea of brushes is to use the Duplicate layer feature with the Link to Spline (automatic or manual) feature given by the conversion types.

When you link a vertex to a spline (or a tangent or a width) it converts your parameter to the following sub-parameters.

  • spline "Spline"
  • bool "Loop"
  • real "Amount"

There are other particular parameters for tangent or width that will be revised in other section.

spline "Spline" is the spline where the parameter (vertex, tangent or width) is linked to. In the case of the vertex it means that the vertex lies on the spline given by its "Amount" parameter. When Amount is 0.0 the vertex position is the Spline begin. When Amount is 1.0 the vertex position is the Spline end. When Loop is "on" values outside the [0.0, 1.0] range are forced to be in that range by eliminating the integer part of the number. (It needs a better explanation)

On the other hand the Duplicate layer allows duplicate the render of everything that is below it as many times as the Index value node indicates. Also if you link any parameter to that Index one the parameter is modified according to the index before it is multiple rendered by the Duplicate layer. It allows apply some kind of transformation to the layers at the same time you duplicate them.

Combining those two features (Link to Spline and Duplicate) you can achieve the emulation of brushes in synfig.

The procedure

As of Synfig 1.0.2 (November 27, 2015), much of the process for creating a brushtroke effect has been simplified because scale and rotate functions have been integrated into group layers. The following steps will guide you through the process:

  1. If you have not already done so, create an outline (path) for the brush to follow.
    1. Click on the Spline Tool.
    2. Under the Tool Options Panel, select "Create Outline" if it is not already selected. You may wish to de-select all other "Layer Type" options as well.
    3. Lay as many or as few vertices as you wish.
    4. In the bottom-left corner of the Tool Options Panel, click "Make Spline" (gears icon).
    5. Edit the spline to your content by adding or removing vertices and moving tangent handles.
  2. Import the "brush" you would like to copy by clicking File->Import..., then selecting the corresponding image file.
    • Alternatively, you may use an existing shape within your project, although this may require an additional step. Place the object(s) to be used as a brush in a Group Layer or Switch Group Layer. If you want your brush to rotate to follow the contour of the path, it is necessary that the objects be in a group layer or switch group layer because most objects do not have a rotation (Angle) parameter but groups do. (Some objects also lack an origin parameter.) After creating the group layer, move the origin handle to the object's center (ctrl-click and drag the origin handle) so that they both move together. These steps are not necessary if you import an image because imported images are created within a switch group layer.
  3. Select both the group layer containing your brush and the spline layer. Click the group's origin handle (green circle), then right-click on the spline (not on a handle) and select Link to Spline. To test that you have done this correctly, move the group's origin handle and it should be confined to the spline and rotate so that it is always tangent to it. You are still free to rotate the group layer and it will continue to correspondingly rotate as you move the origin along the spline's path.
  4. Put the group layer with your brush inside another group layer. Call this new group layer "Clones" or something similar for easy reference.
  5. With the group layer ("Clones") selected, adjust the scale handle (orange circle in the Group Transformation Widget) so that the brush is as large or as small as you desire. You can also return to this step later.
  6. Click the group layer containing your brush (not the "Clones" layer). Right-click it and select New Layer->Other->Duplicate. (Alternatively, click in the menu bar Layer->New Layer->Other->Duplicate.) This creates a Duplicate Layer, which is not the same as duplicating the layer. Do not simply click "Duplicate Layer" below the Layers Panel.
  7. Click the Duplicate Layer you just created. Under the parameters, expand "Index (Index 1)" and edit the values "From", "To", and "Step". These correspond to the portion of the spline to be traversed as well as the density of the brushstroke. For the "From" and "To" parameters, 0 corresponds to the start of the spline and 1 corresponds to its end. The number of duplicates to be made is equal to floor((To-From)/Step). A smaller "Step" parameter corresponds to a denser brushstroke while a larger one makes it more sparse (and possibly easier to render). For this tutorial, it is suggested you use From=0, To=1, and Step=0.02, which will create 50 copies along the entire length of the spline, although you are encouraged to modify these values to see their effects.
  8. Open the Library Panel. Expand "ValueBase Nodes" and select "Index 1", which should correspond to the value node you just edited in the Duplicate Layer. Make sure "Index 1" remains selected throughout the following step.
  9. Click the group layer containing your brush (not "Clones"). Within the Parameters Panel, expand Transformation->Offset. Right-click "Amount" and select "Connect". (Note that the Transformation and Offset parameters must be expanded. The Amount parameter there is not the same as the top-level Amount parameter, which is equivalent to the layer's alpha channel.) This connects the "Amount" parameter (the position along the spline) with the value node associated with the Duplicate Layer. This should create many copies of the brush along the length of the spline. You will notice that these copies are not rotated, which will be accomplished in the next and final step. If you do not wish for the brush to rotate as it traverses the path, you are done.
  10. Still within the group layer's Parameters Panel, expand Transformation->Angle. Right-click "Amount" and select "Connect" (make sure "Index 1" is still selected in the Library Panel). (Note that the Transformation and Angle parameters must be expanded. The Amount parameter there is not the same as the top-level Amount parameter, which is equivalent to the layer's alpha channel.) This automatically associates the duplicates' angle with the tangent to the spline. If you have done all of the above steps correctly, your brush will follow the spline and its angle will change with it.

At this point, you can modify any parameters and the brushstroke will update dynamically. You can turn off the Spline Layer to hide it, add vertices, modify tangent handles, and change the "From", "To", and "Step" parameters.

Further steps

It is possible to make more fancy things with this procedure like make random angled brushes or random spread brushes stamps along the outline. But this is part of an Advanced uses of Brushes tutorial.

Examples

Image:Test1-1.png

A Star layer. You can see that seems to be a bug there with the feather and zoom in and out combinations.


Image:Test1-2.png

A simple stroke.

Image:Test1-3.png

A angled pen. And this is the brush image:

Image:Brush002.png


Image:Test1-4.png

The same but not rotated.

Image:Test1-5.png

Other brush example. And this is the brush image:

Brush001.png

This is the sifz file used to render the examples:

Sample file link

You need to modify the zoom parameter in the group layer and the b-amount value node to modify the density of the brush to achieve same values than in the examples.


Languages Language: 

English • română