Creating shapes

From Synfig Studio :: Documentation
Jump to: navigation, search
(Complex Shapes)
(Basic Shapes)
Line 24: Line 24:
 
#Next, let's create the fill color. Click on the white, or bottom square. At the color editor, let's choose a black fill color.
 
#Next, let's create the fill color. Click on the white, or bottom square. At the color editor, let's choose a black fill color.
 
#Now we can create the circle on the canvas. Left click anywhere on the canvas where you want the center to go, hold, and drag out. You should get a black circle with a red stroke color of 10pt.
 
#Now we can create the circle on the canvas. Left click anywhere on the canvas where you want the center to go, hold, and drag out. You should get a black circle with a red stroke color of 10pt.
 +
#There are a couple of ways to modify the circle.
  
 
=== Complex Shapes ===
 
=== Complex Shapes ===

Revision as of 21:52, 23 April 2010

Navigation Navigation:  <<Manual


(Draft) Note to the reader: This is still incomplete; please be patient.

Basic Shapes

There are three basic shapes in Synfig Studio that can be accessed from the toolbox:

  • Layer geometry circle icon.png Circle - Creates circles and ovals.
  • Rectangle icon.png Rectangle - Creates rectangles and squares.
  • Tool star icon.png Star - Creates stars of varying dimensions.

Let's learn more about basic shapes by doing a quick tutorial:

  1. In the toolbox, click on the Circle icon Layer geometry circle icon.png or alternately, use the shortcut ALT-C. Before we actually create the circle, let's look at some options.
  2. First let's select the stroke color of the circle. At the bottom of toolbox click on the black, or top square. (Black is the default stroke color). A color editor should pop up which will allow you to choose any color you want. Select a red color.
  3. Now let's select the stroke width. Click on the stroke width number in the toolbox. Click the up and down arrows next the number to select a width. For this tutorial click the up arrow until the width number is 10pt.
  4. Next, let's create the fill color. Click on the white, or bottom square. At the color editor, let's choose a black fill color.
  5. Now we can create the circle on the canvas. Left click anywhere on the canvas where you want the center to go, hold, and drag out. You should get a black circle with a red stroke color of 10pt.
  6. There are a couple of ways to modify the circle.

Complex Shapes

Basic primitives are all great, but they are pretty much geometrically inflexible. What about creating more complex shapes? To do this, we can use a few tools found in the toolbox:

  • Tool bline icon.png BLine - Creates complex paths that can be easily manipulated.
  • Tool draw icon.png Draw - Creates BLine paths by first sketching the shape on the canvas.
  • Polygon - Creates BLine paths by drawing straight lines.

Headline

In Synfig, the construct for describing shapes is called a Bline. This is roughly analogous to a "path" in other programs, except that it is strictly a hermite spline.

When you click on the Bline Tool, you will see that the ducks from your currently selected layer (if there was one) will disappear, but the layer(s) will still remain selected in the Layers Panel. This is normal. Anything you create in the Bline Tool will be inserted above the currently selected layer. Keep in mind that if you want to insert a shape somewhere, you should select where you want to insert it before you go into the Bline Tool—changing the selection afterward will automatically swap you back to the normal tool.

If you take a look at the tool options dialog, you'll notice that the first things you see are three checkboxes. Make sure that only "Fill" AND "Outline" are checked.

Image:Toolbox Reset Colors Button.jpg

First, go ahead and click on the "R" button in the lower left corner of the FG/BG color widget in the toolbox. This will reset us back to black and white.

Also, go ahead and set the default line width (right next to the FG/BG widget) to something nice and thick -- 10pt should do the trick.

Clicking with your mouse in the canvas will place vertices. While you are placing a vertex, you can drag out its tangent by dragging the mouse. Do this over and over, and you construct a Bline.

Keep in mind, however, that during this construction, there is nothing stopping you from just moving it if you don't like where you placed a vertex or a tangent. Honest! If you want to remove a vertex, right click on it and select "Delete Vertex". Want to split the tangents? Right click on the tangent and hit "Split Tangents". Want to loop the bline? right click on the first vertex and select "Loop BLine".

So I assume you got your first Bline laid out like you want it. That's great. But we are still in construction mode -- the layers haven't been created yet. There are two ways to create the layers:

  1. just switch to another tool, or
  2. press the "create" button at the bottom of the tool options tab (it's the icon that looks like a gear).

For now, just go ahead and click on the normal tool because we are done with the Bline Tool.

// Insert Figure about here

Ok, we now have a nice pretty white region with a thick black outline. Notice that there are two layers that we have created--the Outline and the Region. Despite the fact that they are two separate layers, their vertices parameter has already been linked--so you can select either one and move its ducks around and the other one will also change.

If you want to manipulate the vertices after you have created the layers, it is very easy to do so. Just click on one of the layers and have at it. If you want to remove a vertex, right click on it and hit "Remove Item (smart)". Want to insert a point somewhere? Right click on the segment where you want to insert something and his "Insert item (smart)".

NOTE: The only major difference between this normal editing mode and the construction mode is in how you split the tangents--in construction mode you right click on the tangent itself. In normal duck editing mode, you must right click on the vertex that the tangents are attached to. This could be considered a usability bug, and it will be resolved at some point.

This may appear to be leading to a mess of layers. And yes, if you aren't using the software properly, that is exactly what you will get. But there is a way to make this more sane: Just study the previous tutorial

One quick thing to mention before I finish up. You can change the width of an outline at each vertex. You do this by selecting the outline layer (NOTE: you must select the Outline Layer, the Region Layer has no width data) and tweaking with the width ducks. By default, these are masked. To show them, press Alt-5. Repeat to hide them again. You can also see other things to mask via the Canvas Menu Caret > View Menu > Mask Ducks Menu.

That should give you enough of a grasp of the software to be able to figure out more stuff on your own.