Adding Layers
(→Using Layers Modify Other Layers) |
(→Combining Layers To Create Effects) |
||
Line 31: | Line 31: | ||
# Create a new file with 0 duration. There's no need to bother with a timeline at this point. | # Create a new file with 0 duration. There's no need to bother with a timeline at this point. | ||
# Create a simple rectangle with the Rectangle tool {{l|Image:Rectangle_icon.png|32px}}.{{l|Image:Adding-layers-tutorial-0.jpg|center}} | # Create a simple rectangle with the Rectangle tool {{l|Image:Rectangle_icon.png|32px}}.{{l|Image:Adding-layers-tutorial-0.jpg|center}} | ||
− | # Pick the {{l|Gradient Tool|gradient tool}} {{l|Image:Gradient_icon.png|32px}} from the {{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|center}} 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. | + | # Pick the {{l|Gradient Tool|gradient tool}} {{l|Image:Gradient_icon.png|32px}} from the {{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|center}}<br/>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. |
#In the {{l|Layers Panel}}, select both the gradient and the rectangle layer. 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. {{l|Image:Adding-layers-tutorial-2.jpg|center}} 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. | #In the {{l|Layers Panel}}, select both the gradient and the rectangle layer. 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. {{l|Image:Adding-layers-tutorial-2.jpg|center}} 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. | ||
#However, there is still a problem: The gradient still covers the whole canvas although 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|center}}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|center}} | #However, there is still a problem: The gradient still covers the whole canvas although 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|center}}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|center}} | ||
− | |||
== Using Layers Modify Other Layers== | == Using Layers Modify Other Layers== |
Revision as of 20:15, 27 April 2010
Language: |
English • Deutsch • español • suomi • français • italiano • Nederlands • português • română • русский • 中文(中国大陆) |
Usual note to the reader: This is not yet finished; please be patient.
Contents
Introduction
In the 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 seldom sufficient to create advanced characters and objects. To do so, Synfig uses Layers. They are similar to layers used in other drawing applications in that they are used to separate different elements of an image.
However, Synfig is different from layers in other programs in at least three respects:
As you will see, layers are an extremely important aspect of Synfig, much more so than most graphics programs. Understanding the concept of layers is an important part in understanding how Synfig works.
Combining Layers To Create EffectsSo let's look at a simple example of how we can combine two layers to create a gradient effect on a rectangle.
Using Layers Modify Other LayersIf 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 inline canvas we just created, it would just blur them -- anything under the inline canvas would not be blurred! Let's try it.
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; 'Transform > Rotate' for example. You can use this to add new attributes to your objects. And just like other, basic attributes in the previous animation tutorial, you can change them to be different on certain keyframes. Synfig will take care of interpolating the steps in between. For example, you could create a some shape and add a Rotate Layer over it. Combine this with the lesson learned in the last tutorial and you can create a rotating effect. This technique is used for creation of Cut-out Animation. |