Adding Layers

From Synfig Studio :: Documentation
Jump to: navigation, search
(categorize)
m (Text replace - '[[' to '{{l|')
Line 9: Line 9:
 
== Introduction ==
 
== Introduction ==
  
In the [[Animation Basics|previous tutorial]], you made your first simple animation by changing the attributes of primitive objects, such as: position, color, and size. These simple types, however, are seldomly sufficient to create advanced characters and objects. To do so, Synfig uses [[Layer|Layers]]. They are similar to layers used in other drawing applications, such as the GIMP, for instance.
+
In the {{l|Animation Basics|previous tutorial]], you made your first simple animation by changing the attributes of primitive objects, such as: position, color, and size. These simple types, however, are seldomly sufficient to create advanced characters and objects. To do so, Synfig uses {{l|Layer|Layers]]. They are similar to layers used in other drawing applications, such as the GIMP, for instance.
  
 
{|
 
{|
Line 22: Line 22:
 
# Create a simple rectangle with corresponding tool.
 
# Create a simple rectangle with corresponding tool.
 
|| ||
 
|| ||
[[Image:Rectangle-tool-on-panel.jpg]]
+
{{l|Image:Rectangle-tool-on-panel.jpg]]
 
|}
 
|}
  
[[Image:Adding-layers-tutorial-0.jpg]]
+
{{l|Image:Adding-layers-tutorial-0.jpg]]
  
 
== Combining Layers ==
 
== Combining Layers ==
  
Now there are two ways to proceed. In the first way, pick the [[Gradient Tool|gradient tool]] from the Synfig [[Toolbox]], and click into the canvas once. You should note that another layer was added in the [[Layers Panel]] called 'Gradient'. This is nothing special. If you see no gradient but just a plain color, pick the [[Normal Tool|normal tool]], click into the canvas to activate the gradient's ducks. You need to grab the one you see and move it a bit until a gradient appears.
+
Now there are two ways to proceed. In the first way, pick the {{l|Gradient Tool|gradient tool]] from the Synfig {{l|Toolbox]], and click into the canvas once. You should note that another layer was added in the {{l|Layers Panel]] called 'Gradient'. This is nothing special. If you see no gradient but just a plain color, pick the {{l|Normal Tool|normal tool]], click into the canvas to activate the gradient's ducks. You need to grab the one you see and move it a bit until a gradient appears.
  
[[Image:Adding-layers-tutorial-1.jpg]]
+
{{l|Image:Adding-layers-tutorial-1.jpg]]
  
 
You now have a gradient but it is not what you wanted: It spreads the whole canvas and the goal was to have a gradient on the rectangle. Let's fix this now.
 
You now have a gradient but it is not what you wanted: It spreads the whole canvas and the goal was to have a gradient on the rectangle. Let's fix this now.
  
Select the gradient and the rectangle layer in the [[Layers Panel]]. They should appear with a blue background now. Then, context-click (ie. right-click on Windows and Linux) and select '[[Encapsulate]]' from the menu. The view of your layer tab should change now, showing a small box called '[[Paste Canvas|Inline Canvas]]' with an arrow in front.
+
Select the gradient and the rectangle layer in the {{l|Layers Panel]]. They should appear with a blue background now. Then, context-click (ie. right-click on Windows and Linux) and select '{{l|Encapsulate]]' from the menu. The view of your layer tab should change now, showing a small box called '{{l|Paste Canvas|Inline Canvas]]' with an arrow in front.
  
 
You can treat this layer like any other layer -- move it around, duplicate it, copy and paste it. By clicking on the arrow you can expand the inline canvas to see its contents, your previous two layers, the gradient and the rectangle.  
 
You can treat this layer like any other layer -- move it around, duplicate it, copy and paste it. By clicking on the arrow you can expand the inline canvas to see its contents, your previous two layers, the gradient and the rectangle.  
Line 43: Line 43:
 
== Using locality ==
 
== Using locality ==
  
[[Image:Adding-layers-tutorial-2.jpg]]
+
{{l|Image:Adding-layers-tutorial-2.jpg]]
  
However, there is still a problem: The gradient still covers the whole canvas althought we wanted it to be restricted on the rectangle. To do so, activate the gradient layer in the Layer tab. Now go to the [[Params Panel]] (by default a tab in the Params-Children-Keyframes window), and search the attribute called '[[Blend Method]]'. Double-click the entry and select '[[Blend Method#Onto|Onto]]' from the appearing drop-down menu.
+
However, there is still a problem: The gradient still covers the whole canvas althought we wanted it to be restricted on the rectangle. To do so, activate the gradient layer in the Layer tab. Now go to the {{l|Params Panel]] (by default a tab in the Params-Children-Keyframes window), and search the attribute called '{{l|Blend Method]]'. Double-click the entry and select '{{l|Blend Method#Onto|Onto]]' from the appearing drop-down menu.
  
[[Image:Adding-layers-tutorial-3.jpg]]
+
{{l|Image:Adding-layers-tutorial-3.jpg]]
  
 
The gradient should now be restricted to the rectangle. Congratulations! You just made your first interacting layers with Synfig.
 
The gradient should now be restricted to the rectangle. Congratulations! You just made your first interacting layers with Synfig.
  
[[Image:Adding-layers-tutorial-4.jpg]]
+
{{l|Image:Adding-layers-tutorial-4.jpg]]
  
 
If only for the additional organization, encapsulating layers into inline canvases dramatically improves the ease of use of Synfig Studio. But lots of programs can do this. The concept of scope as just demonstrated sets Synfig apart from other programs with layer hierarchies.
 
If only for the additional organization, encapsulating layers into inline canvases dramatically improves the ease of use of Synfig Studio. But lots of programs can do this. The concept of scope as just demonstrated sets Synfig apart from other programs with layer hierarchies.
  
However, a layer can only modify the data that it gets from directly below it. In other words, if you were to throw a [[Blur Layer]] on top of the layers inside the [[Paste Canvas|inline canvas]] we just created, it would just blur them -- anything under the inline canvas would not be blurred!
+
However, a layer can only modify the data that it gets from directly below it. In other words, if you were to throw a {{l|Blur Layer]] on top of the layers inside the {{l|Paste Canvas|inline canvas]] we just created, it would just blur them -- anything under the inline canvas would not be blurred!
  
Let's try it. Create two red [[Circle Tool|circles]] and in the [[Layers Panel]] move them under the inline canvas. Now our inline canvas (with rectangle and gradient) is in front of those two circles.
+
Let's try it. Create two red {{l|Circle Tool|circles]] and in the {{l|Layers Panel]] move them under the inline canvas. Now our inline canvas (with rectangle and gradient) is in front of those two circles.
  
[[Image:Adding-layers-tutorial-5.jpg]]
+
{{l|Image:Adding-layers-tutorial-5.jpg]]
  
 
Expand the inline canvas to show its contents, and select the top layer inside of it (should be the "Gradient" layer). This is where we want to insert new layer. Create another circle filled with a black color. Layer with circle will be created over the gradient layer inside the inline canvas.
 
Expand the inline canvas to show its contents, and select the top layer inside of it (should be the "Gradient" layer). This is where we want to insert new layer. Create another circle filled with a black color. Layer with circle will be created over the gradient layer inside the inline canvas.
  
[[Image:Adding-layers-tutorial-6.jpg]] [[Image:Adding-layers-tutorial-7.jpg]]
+
{{l|Image:Adding-layers-tutorial-6.jpg]] {{l|Image:Adding-layers-tutorial-7.jpg]]
  
Now, right click on the layer with black circle in the [[Layers Panel]] and a popup menu will appear. The first item in that popup is "New Layer". Inside of the "New Layer" menu, you'll see several categories of layers you could create, but what we want is a blur, so goto the Blur category and select the "Blur" layer. (so that would be "New Layer->[[Blur Layer Category|Blurs]]->[[Blur Layer|Blur]]")
+
Now, right click on the layer with black circle in the {{l|Layers Panel]] and a popup menu will appear. The first item in that popup is "New Layer". Inside of the "New Layer" menu, you'll see several categories of layers you could create, but what we want is a blur, so goto the Blur category and select the "Blur" layer. (so that would be "New Layer->{{l|Blur Layer Category|Blurs]]->{{l|Blur Layer|Blur]]")
  
[[Image:Adding-layers-tutorial-8.jpg]]
+
{{l|Image:Adding-layers-tutorial-8.jpg]]
  
Well, it blurred... but something is not quite right - outside edge of contents of the inline canvas is still sharp. It is doing this because the blend method of the blur defaulted to "[[Blend Method#Composite|Composite]]" (you can change the [[New Layer Defaults#Default Blend Method|default blend method]] for new layers from the [[New Layer Defaults]] section of the [[Toolbox]]). What we want is a blend method of "[[Blend Method#Straight|Straight]]". Just select the blur layer, and change the [[Blend Method]] to "[[Blend Method#Straight|Straight]]" in the [[Params Panel]].  
+
Well, it blurred... but something is not quite right - outside edge of contents of the inline canvas is still sharp. It is doing this because the blend method of the blur defaulted to "{{l|Blend Method#Composite|Composite]]" (you can change the {{l|New Layer Defaults#Default Blend Method|default blend method]] for new layers from the {{l|New Layer Defaults]] section of the {{l|Toolbox]]). What we want is a blend method of "{{l|Blend Method#Straight|Straight]]". Just select the blur layer, and change the {{l|Blend Method]] to "{{l|Blend Method#Straight|Straight]]" in the {{l|Params Panel]].  
  
 
: NOTE: I will probably change the way that default blend methods are handled in the future--as the way it is currently handled seems to only create hassles like this.
 
: NOTE: I will probably change the way that default blend methods are handled in the future--as the way it is currently handled seems to only create hassles like this.
  
[[Image:Adding-layers-tutorial-9.jpg]] [[Image:Adding-layers-tutorial-10.jpg]]
+
{{l|Image:Adding-layers-tutorial-9.jpg]] {{l|Image:Adding-layers-tutorial-10.jpg]]
  
 
Ok, now we have all of the contents of the inline canvas blurred, but everything under it is sharp!
 
Ok, now we have all of the contents of the inline canvas blurred, but everything under it is sharp!
Line 79: Line 79:
 
== Digging further... ==
 
== Digging further... ==
  
If you care to look into Synfig's main menu 'Layer > New Layer' you will note quite a lot of different possibilities for making layers. Several of them sound rather unusual; '[[Transform Layers Category|Transform]] > [[Rotate Layer|Rotate]]' for example. You can use this to add new attributes to your objects. And just like other, basic attributes in the [[Animation Basics|previous animation tutorial]], you can change them to be different on certain [[Keyframe|keyframes]]. Synfig will take care of interpolating the steps in between.
+
If you care to look into Synfig's main menu 'Layer > New Layer' you will note quite a lot of different possibilities for making layers. Several of them sound rather unusual; '{{l|Transform Layers Category|Transform]] > {{l|Rotate Layer|Rotate]]' for example. You can use this to add new attributes to your objects. And just like other, basic attributes in the {{l|Animation Basics|previous animation tutorial]], you can change them to be different on certain {{l|Keyframe|keyframes]]. Synfig will take care of interpolating the steps in between.
  
For example, you could create a [[Creating Shapes|some shape]] and add a [[Rotate Layer]] over it. Combine this with the lesson learned in the [[Animation Basics|last tutorial]] and you can create a rotating effect. This technique is used for creation of [[Cut-out Animation]].
+
For example, you could create a {{l|Creating Shapes|some shape]] and add a {{l|Rotate Layer]] over it. Combine this with the lesson learned in the {{l|Animation Basics|last tutorial]] and you can create a rotating effect. This technique is used for creation of {{l|Cut-out Animation]].

Revision as of 08:29, 8 September 2009

Languages Language: 

English • Deutsch • español • suomi • français • italiano • Nederlands • português • română • русский • 中文(中国大陆)‎


Manual

Usual note to the reader: This is not yet finished; please be patient.


Introduction

In the {{l|Animation Basics|previous tutorial]], you made your first simple animation by changing the attributes of primitive objects, such as: position, color, and size. These simple types, however, are seldomly sufficient to create advanced characters and objects. To do so, Synfig uses {{l|Layer|Layers]]. They are similar to layers used in other drawing applications, such as the GIMP, for instance.

However, Synfig is different from simple layers in at least two respects:

  1. You can organize layers into hierachical groups.
  2. You can use upper layers to change the behaviour (or look) of underlying layers.

Doing so is quite easy. Let's look at a simple example.

  1. Create a new file with 0 duration. There's no need to bother with a timeline at this point.
  2. Create a simple rectangle with corresponding tool.

{{l|Image:Rectangle-tool-on-panel.jpg]]

{{l|Image:Adding-layers-tutorial-0.jpg]]

Combining Layers

Now there are two ways to proceed. In the first way, pick the {{l|Gradient Tool|gradient tool]] from the Synfig {{l|Toolbox]], and click into the canvas once. You should note that another layer was added in the {{l|Layers Panel]] called 'Gradient'. This is nothing special. If you see no gradient but just a plain color, pick the {{l|Normal Tool|normal tool]], click into the canvas to activate the gradient's ducks. You need to grab the one you see and move it a bit until a gradient appears.

{{l|Image:Adding-layers-tutorial-1.jpg]]

You now have a gradient but it is not what you wanted: It spreads the whole canvas and the goal was to have a gradient on the rectangle. Let's fix this now.

Select the gradient and the rectangle layer in the {{l|Layers Panel]]. They should appear with a blue background now. Then, context-click (ie. right-click on Windows and Linux) and select '{{l|Encapsulate]]' from the menu. The view of your layer tab should change now, showing a small box called '{{l|Paste Canvas|Inline Canvas]]' with an arrow in front.

You can treat this layer like any other layer -- move it around, duplicate it, copy and paste it. By clicking on the arrow you can expand the inline canvas to see its contents, your previous two layers, the gradient and the rectangle.

If you want to change the name of it to something more descriptive, just select the layer in the layer tab and click on its label. Then you just edit it in place. You can do this for ANY layer, and are strongly encouraged to do so.

Using locality

{{l|Image:Adding-layers-tutorial-2.jpg]]

However, there is still a problem: The gradient still covers the whole canvas althought we wanted it to be restricted on the rectangle. To do so, activate the gradient layer in the Layer tab. Now go to the {{l|Params Panel]] (by default a tab in the Params-Children-Keyframes window), and search the attribute called '{{l|Blend Method]]'. Double-click the entry and select '{{l|Blend Method#Onto|Onto]]' from the appearing drop-down menu.

{{l|Image:Adding-layers-tutorial-3.jpg]]

The gradient should now be restricted to the rectangle. Congratulations! You just made your first interacting layers with Synfig.

{{l|Image:Adding-layers-tutorial-4.jpg]]

If only for the additional organization, encapsulating layers into inline canvases dramatically improves the ease of use of Synfig Studio. But lots of programs can do this. The concept of scope as just demonstrated sets Synfig apart from other programs with layer hierarchies.

However, a layer can only modify the data that it gets from directly below it. In other words, if you were to throw a {{l|Blur Layer]] on top of the layers inside the {{l|Paste Canvas|inline canvas]] we just created, it would just blur them -- anything under the inline canvas would not be blurred!

Let's try it. Create two red {{l|Circle Tool|circles]] and in the {{l|Layers Panel]] move them under the inline canvas. Now our inline canvas (with rectangle and gradient) is in front of those two circles.

{{l|Image:Adding-layers-tutorial-5.jpg]]

Expand the inline canvas to show its contents, and select the top layer inside of it (should be the "Gradient" layer). This is where we want to insert new layer. Create another circle filled with a black color. Layer with circle will be created over the gradient layer inside the inline canvas.

{{l|Image:Adding-layers-tutorial-6.jpg]] {{l|Image:Adding-layers-tutorial-7.jpg]]

Now, right click on the layer with black circle in the {{l|Layers Panel]] and a popup menu will appear. The first item in that popup is "New Layer". Inside of the "New Layer" menu, you'll see several categories of layers you could create, but what we want is a blur, so goto the Blur category and select the "Blur" layer. (so that would be "New Layer->{{l|Blur Layer Category|Blurs]]->{{l|Blur Layer|Blur]]")

{{l|Image:Adding-layers-tutorial-8.jpg]]

Well, it blurred... but something is not quite right - outside edge of contents of the inline canvas is still sharp. It is doing this because the blend method of the blur defaulted to "{{l|Blend Method#Composite|Composite]]" (you can change the {{l|New Layer Defaults#Default Blend Method|default blend method]] for new layers from the {{l|New Layer Defaults]] section of the {{l|Toolbox]]). What we want is a blend method of "{{l|Blend Method#Straight|Straight]]". Just select the blur layer, and change the {{l|Blend Method]] to "{{l|Blend Method#Straight|Straight]]" in the {{l|Params Panel]].

NOTE: I will probably change the way that default blend methods are handled in the future--as the way it is currently handled seems to only create hassles like this.

{{l|Image:Adding-layers-tutorial-9.jpg]] {{l|Image:Adding-layers-tutorial-10.jpg]]

Ok, now we have all of the contents of the inline canvas blurred, but everything under it is sharp!

Digging further...

If you care to look into Synfig's main menu 'Layer > New Layer' you will note quite a lot of different possibilities for making layers. Several of them sound rather unusual; '{{l|Transform Layers Category|Transform]] > {{l|Rotate Layer|Rotate]]' for example. You can use this to add new attributes to your objects. And just like other, basic attributes in the {{l|Animation Basics|previous animation tutorial]], you can change them to be different on certain {{l|Keyframe|keyframes]]. Synfig will take care of interpolating the steps in between.

For example, you could create a {{l|Creating Shapes|some shape]] and add a {{l|Rotate Layer]] over it. Combine this with the lesson learned in the {{l|Animation Basics|last tutorial]] and you can create a rotating effect. This technique is used for creation of {{l|Cut-out Animation]].


Languages Language: 

English • Deutsch • español • suomi • français • italiano • Nederlands • português • română • русский • 中文(中国大陆)‎