Synfig Studio: Creating basic animations to decorate our videos

Synfig Studio is a powerful vector drawing application for making 2D animations.

The objective of this post is to use this powerful application to make animations simple that can serve us as animated backgrounds for titles or texts or even for make masks or animated ornaments about our videos.

Being able to export the result of our work in sequence of images with alpha channel (transparency) is ideal to combine with our favorite video application.

In this post we will see how to make an animated background for text titles and the process of inserting it into Kdenlive.

In Synfig Studio we will make the animated background, the texts will be made in Kdenlive.

Statement of the animation to be made with Synfig Studio to use as a text tablet in Kdenlive

We are going to make a background for text that will have:

  1. a logo (invented for this occasion and without any artistic value)
  2. a light colored background to accommodate the necessary texts and
  3. a decorative element to give it a little more visual richness.

So we have three elements that we will animate individually.

The animation will have an input that will last 15 frames and an output that will last 8 frames, and it will keep as long as it takes to read the text.

The sketch that we will make is the following:01 PILL BASE.png

Making the background for texts with the Synfig Studio application

Initial settings

Once the application is installed and opened, we find a blank default project.02 .pngThe first thing we will do is configure the workspace adapting it to the project for which it is intended, which is in this case a fullHD (1920 × 1080).

To do this, click on the box on the central screen of the interface03.pngand we go to the Canvas menu and click on the “Properties” option or press the hotkey to open them, which is F804.pngHere we adjust the resolution to our video project; These are the parameters, those framed in the image above, that I have used but these depend on the project and it is important to use the width and height values ​​of your project.

I have also increased the XY Resolution slightly to improve the quality of the resulting image, although for video with the original values ​​of 72 it is sufficient.05.pngI have also varied the time parameters to adjust them to my needs, that is, 25 frames per second in this case and start at frame 1 and end at 15, which is how long the animation lasts.

Now we see that the work box has become large. To adjust this in the visible area we can do it using the button 06.png on the zoom toolbar at the bottom of the work box.

Making the pill for the titles

The logo as picture

The first thing we will load is the logo that we have in the form of an image. To do this, we go to the File menu and choose the option “Import” or press the keyboard access “Ctrl + I” and load the image of the logo.08.pngWe observe that this image fits the screen, being a disproportionate size, so we must reduce it to the desired size. We do this as follows:

  1. With the selection tool activated09.pngwe select the image so that its transformation vectors come out.10.png
  2. Now we manipulate the point in the upper right corner, colored brown, which will reduce the image proportionally.11.png* Each point has an associated function, to see what they do it is advisable to load an image and manipulate the different points.
  3. Once we have the image at the desired size, we place it in the place on the screen that is required. We do this from the green dot in the lower left corner.13.png
    14.pngWe drag with the mouse in the right place; we can make fine adjustments using the arrows on the keyboard. (Once in its location I have reduced it a little more from the point of the upper right corner)

The background for the texts as a vector graphic made in the application itself

We already have the logo loaded and placed in the desired location, now we proceed to create the background for the texts.

We do this as follows:

  1. With the rectangle tool selected, we will draw it in the desired place with the mouse.15.png
  2. By default it is created in white and on the logo17 1.pngLet’s fix this. The first thing is to put this layer below the logo (this is done from the application’s layers window). By default, to the right of the interface. We can drag the one with the rectangle below the one with the logo and, in this way, it will already be below (as in any image application that works with layers, such as Gimp).
    18 1.png
    18 2.png
  3. To change the color we do it from the properties of the element. By default these are in the lower left window of the interface.19.pngIn the indicated line, as a color, click on the rectangle and choose the desired color with the wizard that opens. The changes are seen in real time on the rectangle, in this case …20.png

Some notes on the rectangles:
When these are created, they have two points; These points are used to change the dimensions of the selected individually, if what we want is to move the rectangle as a block, without modifying it. What you have to do is select it by clicking on it or selecting the layer in the layers window seen in the previous point; once the rectangle is selected, the two points become visible21.pngnow with the mouse we create a selection lasso that covers the entire rectangle; in this way the two points will be selected22.pngnow by moving any of them the entire rectangle will move as a block and we can relocate it wherever we want.

Creating the ornament in the application itself

  1. I notice that the tablet with the two elements, logo and rectangle, has little margin underneath, so we select both layers. We can do this from the layer window or directly, in the workspace, using the mouse together with the pressed “Control” key. Now on the canvas (workspace or canvas) we make a loop with the mouse that covers the two elements and, later with the up arrow on the keyboard, we upload both elements at the same time.23.png
  2. Once we have the desired space we create the ornament using the polygon tool 24.pngWe draw the desired shape. By default it is done with the color that we have preset in the palette, in this case white, so we change it if we want it to be another color, but the most interesting thing is that we can give transparency to this element so that once it is exported in a format that supports alpha channel, such as png, for example, you can see the video or image below on which it will be inserted.25.pngThis time I have given it a red color with an opacity of 50% as can be seen in the image above.

And we already have what is the basis for our texts ready27.pngI have retouched the logo a bit from the source image to make it a little “less crappy”.

Animating input in Synfig Studio

The most important step to start animating in this application is to activate the animation mode, forgive the redundancy. So far we have worked in the edit mode, but since we now intend to animate we will activate the animation mode. This is as simple as, on the work canvas in the lower right corner, activate the icon in the shape of a man to enter the aforementioned mode.28.pngThe icon will turn red and the work canvas will be highlighted to indicate that we are in animation mode.29.png

From this moment on, any modification that we make will be reflected with frame keys (keyframes), so it is very important that the edition is finished before starting to animate.

The animation will be done to each element separately. I’ll start with the logo, which will do a simple animation by scale.

  1. As in edit mode we have left the title pad in its position and working size, what we do is place the timeline cursor on frame 15, which is the end of the animation, by clicking on said frame in the gray band of the aforementioned timeline. The timeline is just below the workspace.30.png
  2. Now since what we will animate is the scale, we are going to insert the keyframe from the end of the animation. From the logo properties window (it is understood that it is selected), we display the “Transformation” section31.pngwe go to the scale parameter, we enter manual editing mode by clicking on its values.32.pngThe procedure is to select the line and then click on the numerical values; These go into edit mode, but without changing anything, we simply press enter. We will have to press it twice (once for each value) and this will create a keyframe where we have the cursor located (in this case on frame 15) which is the state in which the logo is at the end of the animation.
  3. Now we place the cursor on frame 1 and return to the scale parameter to set both values ​​to 1. In the same way as in the previous step, but putting a 1 in each value before pressing enter. This will create the initial keyframe for us. The procedure is: enter the edit mode by clicking on the values, press 1, press enter, 1 again and enter again.
    It is not recommended to put 0 or a value less than 1 in this value because this number can cause problems in this program in an animation. The problem with setting values ​​lower than one is that, being in said frame, wherever we touch the screen, the logo will be selected, in this case.

If we now move the cursor by dragging the mouse over the gray band of the timeline, we will see the animation we just made. We can also use the play button located just below the workspace.45.png

Animating the rectangle

We will animate this element so that it appears as if it were a curtain that falls from top to bottom.

  1. As in the logo, the first thing we do is create the keyframes at the end of the animation. In this case, said curtain will fall in 10 frames (which will go from frame 2 to 11) so we place the cursor on said frame 11.
  2. Now the point we want to move is the point below, so we go to that point and, in the same way seen with the logo, we insert the keyframe.33.png
  3. Now we are at frame 2 and from the workspace we raise the point until the rectangle is as if it were a line.34.png
    35.pngTo carry out this movement of the point precisely, we can hold down the shift key and thus restrict the movement to the axis that we want to move, moving the point precisely on the Y or X axis as we start the movement in the desired direction.capture.png
  4. Now, as we have started the animation on frame 2, if we go to frame 1 we see that the rectangle is not a line. To solve this is as simple as:
    1. Place the cursor on said frame 1
    2. With the right button on the keyframe (which is inserted in 2) choose the “Duplicate” option and this frame will be duplicated at the cursor position.

We can press the play button to see the animation made.

Animating the ornament

We will make the ornament enter by opacity, that is, manipulating the color.

  1. We select the layer and we place ourselves on frame 1
  2. We click on the properties of the color box, as we did to change it.37.pngThe color configuration wizard will open:38.png
  3. We place the cursor on frame 1 and set the alpha channel to the value of 0, leaving the ornament invisible, then we move to frame 13 and set the alpha channel back to 50%

We already have the animated ornament and the animation finished. We can press the play button to see it.

Export the input animation

As simple as going to the File menu and pressing Render or simply pressing F9 to open the render wizard39.pngWe choose a destination; the appropriate thing is to create a folder within our working directory to place in it the frames that will be part of the input of the text tablet.

We put the quality to the maximum, (this goes on a scale from 0 to 9, so 9 is the best quality), we press the Render button and the images that are part of the animation will be exported in the place selected for it.

By default Synfig exports in .png format which is a format that supports alpha channel (transparency); If we wish to indicate another format, we will do so in the box marked “Target”. It is recommended to use formats that support transparency since if, for example, we use a .jpg format that does not support it, these will be exported with an opaque background.

Perform background output animation for texts

To make this animation what we can do is save with another name with the option “save as” the input project and follow the following steps (remember that this output lasts 8 frames).

* Important to make sure you have the animation mode activated.44.png

We start with the logo element

The elements can be selected from the layer section.

  1. We select the logo and place the cursor on frame 8 (which is the end of the output animation).
  2. Now, with the cursor on frame 8, right-click the one on frame 1 so that an exact copy of it is placed on frame 8.
  3. We delete frame 1 with the corresponding option that comes out when we click on that frame with the right mouse button.
  4. With the cursor on frame 1, we duplicate the last frame (in this case it is on 15) and delete the latter.

With these four steps we make the output of the logo from the background for texts; now we only have to repeat these steps with the following elements.

As a variation on the decoration element (the one in red), I have placed the output frame at 6 so that it comes out 2 frames before the rest.

Now, once we have the animation made, we only have to export it, in the same way as we did with the input animation, only this time we will put 8 as the final frame.

We choose the folder where we will export it; I have created one in the same place where I have the input (in) located and I have called it out (output). Set the resolution to the maximum, which is 9, and set the final frame to 8, which is how long the animation lasts. Once you have made these adjustments, press the Render button.40.pngAnd with these steps we have already made the animation of entry and exit of our fund for titles.

Using these image sequences in Kdenlive

For more information on how to work with these image sequences in Kdenlive, we can consult the entry dedicated to working with images in that application.

To load this sequence of images, what we do in kdenlive is load in the project folder a “presentation clip” for each sequence (one for input and one for output) by choosing the option “File name pattern”41.pngNext we load the last image of the input sequence to put as a still image as the text background.42.pngWe put the text with a title clip on the track above that of the background sequence, leaving the timeline as we see in the following image.43

Next I put a gif that emulates the result of the practice that we have done in this tutorial.


I hope it is useful to you.


Deja un comentario