Difference between revisions of "Doc:Getting Started"
(Initial post) |
(Moving stuff to provide a better overview) |
||
| Line 1: | Line 1: | ||
| − | == | + | == Introduction == |
| + | |||
| + | Synfig, like most every other competent graphics program, breaks down individual elements of a [[Canvas]] into [[Layer]]s. However, we differ from other programs in two major ways: | ||
| + | |||
| + | # An individual layer in Synfig usually represents a single "Primitive". ie: A single region, an outline of a region, an imported JPEG, etc... This allows you to have a great deal of flexibility and control. It is not uncommon for a composition to have hundreds of layers(organized into a hierarchy for artist sanity of course). | ||
| + | # A layer can not only composite information on top of the image below it, but also distort and/or modify it in some other way. In this sense, Synfig Layers can act much like Filters would in PhotoShop. For example, we have a [[Blur layer]], [[Radial blur layer]], [[Spherical Distortion layer]], [[color-correct layer]], [[bevel layer]], etc... | ||
| + | |||
| + | Each layer has a set of parameters which determine how it behaves. When you click on a layer (either in the canvas window, or in the [[layer tab]]), you will see its parameters in the param tab. | ||
| + | |||
| + | Synfig Studio has an autorecover feature. If you are working on something that you haven't saved for a while and the program crashes, you will not loose more than 5 minutes of work. Simply restart Synfig studio and it will recover the unsaved changes. Unfortunately history isn't recovered yet. That feature comes later. | ||
| + | |||
| + | One thing you may notice is that Synfig Studio is SLOW, making it practically unusable on hardware that is over 3 years old. The biggest reason for this is that all of the color calculations are done in floating point--because Synfig Studio was built from the ground up with High-Dynamic-Range Imaging in mind. HOWEVER, this will not be the case forever. | ||
| + | |||
| + | I have some fairly major re-implementations and optimizations that I am about to implement that should quite dramatically improve the performance of Synfig on all platforms. My goal is not a 200% speed increase, my goal is at least a 2000% speed increase. With the optimizations that I plan to implement, I will be able to pipeline operations in such a way that this performance improvement can be realized. It should also pave the way to hardware acceleration using todays powerful graphics processors, which should yield further performance improvements measurable in orders of magnitude. | ||
| + | |||
| + | |||
| + | == The user interface == | ||
When you start Synfig Studio, it will display a splash graphic and boot itself up. After it finishes loading, you should see three windows. The window in the upper left is the [[toolbox]]. This is where you can open files, change [[tools]], etc. You'll notice that most of the buttons are greyed out--because there is no file open yet. | When you start Synfig Studio, it will display a splash graphic and boot itself up. After it finishes loading, you should see three windows. The window in the upper left is the [[toolbox]]. This is where you can open files, change [[tools]], etc. You'll notice that most of the buttons are greyed out--because there is no file open yet. | ||
| Line 25: | Line 41: | ||
In the upper left corner of the Canvas Window, you'll see a button with an arrow. If you click on this button, the canvas window menu will pop up. (As an aside, if you right click in the canvas area and there is not a [[layer]] under the mouse position, this menu will also appear) So now you know where the menu is in the Canvas Window. Good. Everything else should be pretty self-explanatory in the Canvas Window. (Explanations on the menu stuff is to come in a sec) | In the upper left corner of the Canvas Window, you'll see a button with an arrow. If you click on this button, the canvas window menu will pop up. (As an aside, if you right click in the canvas area and there is not a [[layer]] under the mouse position, this menu will also appear) So now you know where the menu is in the Canvas Window. Good. Everything else should be pretty self-explanatory in the Canvas Window. (Explanations on the menu stuff is to come in a sec) | ||
| − | == | + | == First steps == |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
Lets create something so that we can tweak with it. Now that you have a new composition open and the properties dialog is out of the way, go over to the toolbox and click on the [[circle tool]](If you don't know which one it is, just mouse over them until you find the one with the tooltip that says "circle"). | Lets create something so that we can tweak with it. Now that you have a new composition open and the properties dialog is out of the way, go over to the toolbox and click on the [[circle tool]](If you don't know which one it is, just mouse over them until you find the one with the tooltip that says "circle"). | ||
| Line 53: | Line 60: | ||
Note that, unlike the normal tool, the other duck manipulation tools DO have options associated with them. If a particular tool isn't doing what you want, take a look in the [[tool options tab]] to see if it is set up like you want it. | Note that, unlike the normal tool, the other duck manipulation tools DO have options associated with them. If a particular tool isn't doing what you want, take a look in the [[tool options tab]] to see if it is set up like you want it. | ||
| + | |||
| + | == Linking == | ||
Now lets try [[linking]]. Lets say we always want these two circles to be the same size. Select two circles, and then select both of their Radius ducks(the cyan dot). Then right click on either duck and a menu will pop up. Click on "Link". Boom. The parameters are linked together. You can prove it to yourself by selecting just one of the circles and changing its radius--the other one will change as well. Neat stuff, eh? | Now lets try [[linking]]. Lets say we always want these two circles to be the same size. Select two circles, and then select both of their Radius ducks(the cyan dot). Then right click on either duck and a menu will pop up. Click on "Link". Boom. The parameters are linked together. You can prove it to yourself by selecting just one of the circles and changing its radius--the other one will change as well. Neat stuff, eh? | ||
| Line 68: | Line 77: | ||
Try playing around with the circles for a bit. Muck around with the parameters, and see what happens. To get you started, play around with feather a bit. | Try playing around with the circles for a bit. Muck around with the parameters, and see what happens. To get you started, play around with feather a bit. | ||
| − | + | == Digging deeper == | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | == | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | Of course, so far you just found out how to use the basic features of Synfig Studio but not how you animate a drawing. This is covered in the [[Animation_Basics|next tutorial]]. | |
Revision as of 15:37, 11 January 2006
 |
Language: |
English • čeština • Deutsch • español • suomi • français • italiano • 日本語 • Nederlands • polski • português • română • русский • 中文（中国大陆） • 中文（台灣） |
Introduction
Synfig, like most every other competent graphics program, breaks down individual elements of a Canvas into Layers. However, we differ from other programs in two major ways:
- An individual layer in Synfig usually represents a single "Primitive". ie: A single region, an outline of a region, an imported JPEG, etc... This allows you to have a great deal of flexibility and control. It is not uncommon for a composition to have hundreds of layers(organized into a hierarchy for artist sanity of course).
- A layer can not only composite information on top of the image below it, but also distort and/or modify it in some other way. In this sense, Synfig Layers can act much like Filters would in PhotoShop. For example, we have a Blur layer, Radial blur layer, Spherical Distortion layer, color-correct layer, bevel layer, etc...
Each layer has a set of parameters which determine how it behaves. When you click on a layer (either in the canvas window, or in the layer tab), you will see its parameters in the param tab.
Synfig Studio has an autorecover feature. If you are working on something that you haven't saved for a while and the program crashes, you will not loose more than 5 minutes of work. Simply restart Synfig studio and it will recover the unsaved changes. Unfortunately history isn't recovered yet. That feature comes later.
One thing you may notice is that Synfig Studio is SLOW, making it practically unusable on hardware that is over 3 years old. The biggest reason for this is that all of the color calculations are done in floating point--because Synfig Studio was built from the ground up with High-Dynamic-Range Imaging in mind. HOWEVER, this will not be the case forever.
I have some fairly major re-implementations and optimizations that I am about to implement that should quite dramatically improve the performance of Synfig on all platforms. My goal is not a 200% speed increase, my goal is at least a 2000% speed increase. With the optimizations that I plan to implement, I will be able to pipeline operations in such a way that this performance improvement can be realized. It should also pave the way to hardware acceleration using todays powerful graphics processors, which should yield further performance improvements measurable in orders of magnitude.
The user interface
When you start Synfig Studio, it will display a splash graphic and boot itself up. After it finishes loading, you should see three windows. The window in the upper left is the toolbox. This is where you can open files, change tools, etc. You'll notice that most of the buttons are greyed out--because there is no file open yet.
The other two windows (one on the bottom, and one to the right) are customizable dock dialogs. You can rearrange the contents of these however you wish by simply dragging the tab to where you want it. You can even create a new dock dialog by dragging a tab out of the dock dialog it was inside of.
If you ever accidently close a dock tabs (by dragging it out of the dock dialog, and closing the new dock dialog that gets created), no worries. Simply goto the toolbox and goto "File->Dialogs", and then click on the name of the dialog you need.
There are a lot of dock tabs. If you have no idea what a dock tab does, simply hold your mouse over its icon and a tooltip will pop up describing the name of the tab.
Here are some of the more important ones:
- Layers - This tab shows you the layer hierarchy for the currently selected canvas. It also allows you to manipulate these layers.
- Params - This tab will show you the parameters of the currently selected layer, (OR, if multiple layers are selected, it shows you only the parameters that the selected layers have in common)
- Tool Options - Shows you any options specific to the currently selected tool
- Navigator - Shows you a thumbnail of what the currently selected Canvas looks like. You can also zoom in and move the focus around with this tab.
- |History - Shows you the history stack for the current composition. You can also edit the actions in history.
If you click the "new composition" button in the toolbox, a new composition will be opened and the canvas properties dialog will appear.
The canvas properties dialog is a mess, I know. I'll have it re-designed into something much more comprehendible in the next few days. For now, ignore the "Image Area" and "Locks and Links" sections.
If you click OK, the canvas properties dialog will disappear and you will see the Canvas window. This window represents the Root Canvas, not that that means much to you at the moment, but that's OK--I'm just trying to show you around.
In the upper left corner of the Canvas Window, you'll see a button with an arrow. If you click on this button, the canvas window menu will pop up. (As an aside, if you right click in the canvas area and there is not a layer under the mouse position, this menu will also appear) So now you know where the menu is in the Canvas Window. Good. Everything else should be pretty self-explanatory in the Canvas Window. (Explanations on the menu stuff is to come in a sec)
First steps
Lets create something so that we can tweak with it. Now that you have a new composition open and the properties dialog is out of the way, go over to the toolbox and click on the circle tool(If you don't know which one it is, just mouse over them until you find the one with the tooltip that says "circle").
The second you click on the circle tool, you should notice that the tool options tab changed. But we'll get to that later.
With the circle tool selected, you can now create circles in the canvas window. This pretty much works exactly as you might expect it to. Go ahead and create two (or more, if you fancy) circles.
Now go back to the toolbox and click on the normal tool (the blue circle with the arrow on it). After you do this, click on one of your circles. You will then see a bounding box(which is kinda useless at this point in time, but I digress), a green dot at the center, and a cyan dot on the radius. Those dots are called ducks. If you want to modify the circle, grab a duck and drag it around. Easy!
So you can select a layer by clicking on it. If you want to select more than one layer, hold down CONTROL while you are clicking--this works in both the canvas window and the layer tab. Try it!
You can also select multiple ducks. You can do this in several ways. First, you can hold down CONTROL and individually click the ducks that you want selected, but this can be tedious. However, there is a much faster method--just create a selection box by clicking the mouse and dragging it over the area of ducks that you want selected.
Go ahead and select two circles, and select all of their ducks. With several ducks selected, moving one duck will move all of the ducks. This behavior is dependent on the normal tool. Thus, a more descriptive name for this tool might have been the "move" or "translate" tool.
The Rotate and Scale tools work much like the Normal tool, except in the case where you have multiple ducks selected. It is much easier to just try it than read about it. Select a few circles, select all of their ducks, and try using the rotate and scale tools.
Note that, unlike the normal tool, the other duck manipulation tools DO have options associated with them. If a particular tool isn't doing what you want, take a look in the tool options tab to see if it is set up like you want it.
Linking
Now lets try linking. Lets say we always want these two circles to be the same size. Select two circles, and then select both of their Radius ducks(the cyan dot). Then right click on either duck and a menu will pop up. Click on "Link". Boom. The parameters are linked together. You can prove it to yourself by selecting just one of the circles and changing its radius--the other one will change as well. Neat stuff, eh?
Linking is a fundamental concept in Synfig. You can create links not only between ducks, but also between parameters as well by selecting multiple layers, right clicking on the parameter in the param tab, and selecting "Link".
DIGRESSION: This is how outlines are attached to their regions—but I'm getting ahead of myself. At the moment, the fundamental power and flexibility of linking in Synfig Core is beyond what Synfig Studio currently allows for. This will change in the future. Anyway, back on track...
Lets say you want one of the circles to be a different color. If you look in the toolbox below the tools, you'll see the foreground/background color selector, the outline width selector, and some other stuff like the default blend method and gradient. The foreground/background color widget works exactly as you might expect--you can click on the foreground color, and a modest color chooser will appear. Now to can change the color pretty easily.
But sometimes you just want to click on a color and go. This is where the palette editor tab comes in. It's functionality isn't quite 100% yet (ie: saving and loading custom palettes hasn't been implemented yet), but the default palette is pretty decent. Click on the Palette editor tab and have a look--it's the one with the palette-ish looking icon. Clicking on colors in here will immediately change the default foreground color.
That's all great, but we still haven't changed the color of the circle. There are two ways to do this. The first way is that you select the circle layer you want to modify, goto the params tab and double click on the color parameter--a color selector dialog shows up and you just tweak away. But lets say you already got the color you wanted selected as the default foreground color. Easy. Just click on the "Fill tool" from the toolbox, and then click on the circle in the canvas window. Boom. Circle changes color. This works with more than just circles, but we'll get to that in a sec.
Try playing around with the circles for a bit. Muck around with the parameters, and see what happens. To get you started, play around with feather a bit.
Digging deeper
Of course, so far you just found out how to use the basic features of Synfig Studio but not how you animate a drawing. This is covered in the next tutorial.
