Brushes

From Synfig Studio :: Documentation
Jump to: navigation, search
m (The procedure: fix links)
(The procedure: I've edited this tutorial to be up-to-date with the latest version of Synfig. Many steps have been simplified. This is the only edit I wish to make at this point and you are welcome to revert to the old version or merge the two.)
Line 60: Line 60:
  
 
== The procedure ==
 
== The procedure ==
It is supposed you already have an outline where 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 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.
 +
# 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.  Within the {{l|Parameters Panel}}, expand '''Transformation->Offset'''.  Right-click "Amount" and select "Connect".  This connects the "Amount" parameter (the position along the spline) with the value node associated with the Duplicate Layer.  This should create may 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).  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.
  
# If it's not already done, create an outline. That will be the outline followed by the brush.
+
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.
# Caret '''Menu->File->Import'''. Select your image file for the brush. <br> You can also use an existing layer to do that, even a canvas with an animation inside. It doesn't matter what you use as brush, the procedure is always the same.
+
# Create a {{l|Rotate Layer}} onto the brush layer.
+
# Create a {{l|Scale Layer}} onto the Rotate layer.
+
# Select Scale, Rotate and your brush layer and group them. It would produce a Group Layer (let's call it "'''Group A'''").
+
# Select '''Group A''' and also select your '''outline''' layer. <br> Click on the Group A Origin handle ''-the green dot-'' (beware that it can be below the Origin of the outline layer -both at (0,0) by default-) and right-click on the outline (avoid any handle). Select the "'''Link to Spline'''" option.
+
# Repeat the above step but do it with the ''(blue)'' '''angle''' handle of the '''Rotate layer''' instead of the Origin of Group A. It doesn't matter if you make right click on the same place of the outline spline or not. Later it will be fixed.
+
# Repeat the same but with the '''Amount''' parameter of the '''Scale layer'''. <br>As the Amount parameter of the scale layer has not visual interface (hasn't any handle associated) you have to export this parameter (right click export) and then select it from the Library panel. Then you can make the right click and Link to Spline operations.
+
# Add a '''Duplicate Layer''' over Group A. Group both, so the Duplicate layer affects only the Group A layer. <br>It would produce a Value Node at the Library panel (probably called "Index1" if that's your first Duplicate layer). Select that 'index' value node from the Library Panel.
+
# Now go to the group layer ("Group A"). 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 value node (already selected from the library 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 spline 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 Scale layer.
+
# It is the time of spread the position of the duplicated brushes along the spline. To do that you have to properly scale the Amount sub-parameter of each converted to Link to Spline parameter. Go to the Group Layer and expand the Origin parameter. Expand the Amount sub-parameter (already converted to a Scale) and look to the "Scale" parameter. This parameter has a default value of 1.0. Make right click over it and select Convert->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 spread along the Spline!
+
# 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 library panel and select the just exported one.
+
# Without leaving the Origin parameter search for the following sub-parameter: Origin(Spline Origin)->Amount(Scale)->Link(Duplicate)->To. This parameter is the end of the loop of the Duplicate 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 Library Panel and changing the "b-amount" parameter to a high value (for example 100) make the brush to fill all the spline. Do you get the idea?
+
# Repeat the same procedure to the following parameters of the following layers (keep in mind that the "b-amount" value node from the library list panel still selected):
+
## Rotate Layer->Amount(Spline Angle)->Amount(Scale)->Link(Duplicate)->To. Select it and right click "Link".
+
## Scale Layer->Amount(Spline Width)->Amount(Scale)->Link(Duplicate)->To. Select it and right click "Link".
+
 
+
 
+
You can make the outline layer invisible (by un-checking the visibility check box) to only render the brushed one.
+
 
+
It only rest to make some modifications to the Outline width and the outline shape to modify the brushed one accordingly.
+
 
+
Also you would like to not link the rotation to the spline to achieve a constant angled pen. It is up to you to use one or other feature.
+
 
+
There is a problem with the Zoom option. The zoom is an exponential value and the width is a linear one. It means that Zoom = 0 is current size, negative values means zoom out and positive values means zoom in. To link properly the width to the zoom we need a logarithmic convert type that is not available at the moment. So to solve that you have to make the Zoom parameter of the group layer to be a negative value (between -3 and -5 are good values for normal brush sizes) and then let the Scale Layer do its work. There is not fixed rule for this interim solution.
+
  
 
== Further steps ==
 
== Further steps ==

Revision as of 05:01, 3 December 2015

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 combinaison of feature

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 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. 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.
  6. 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.
  7. 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.
  8. Click the group layer containing your brush. Within the Parameters Panel, expand Transformation->Offset. Right-click "Amount" and select "Connect". This connects the "Amount" parameter (the position along the spline) with the value node associated with the Duplicate Layer. This should create may 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.
  9. 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). 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ă