Natron: Trazos animados con el nodo RotoPaint. Parte 1. Presentación del nodo y práctica básica de trazado de un texto en una sola capa

La intención de este tutorial es aprender a realizar trazos animados con Natron.

Son muchas las ocasiones en las que nos puede ser muy útil, por lo bonito que queda visualmente, la posibilidad de insertar en nuestros vídeos el recurso de los trazos animados.

Desde un nombre o título, dibujo, etc, que hemos escrito o dibujado con una tableta gráfica, que sale de manera como si lo estuviéramos trazando en vivo, a una ruta para indicar un itinerario en un mapa, y un largo etcétera de posibilidades.

Vuelvo a indicar que Natron es una aplicación de composición y este tipo de aplicaciones son herramientas auxiliares que usamos junto a nuestro editor de vídeo, al igual que cuando montamos un vídeo y precisamos de insertar una imagen que precisa de edición esta edición la hacemos en un editor de imagen, de este mismo modo cuando necesitamos insertar elementos de composición o simplemente usar técnicas que en nuestro editor de vídeo no son posibles o difíciles de conseguir, entonces recurrimos a este tipo de aplicaciones.

En una anterior entrada expliqué la interfaz de la aplicación y también como realizar un croma, por lo que en este tutorial omito explicar lo visto en las citadas entradas y nos centraremos únicamente en el nodo para realizar trazos.

Por supuesto que para hacer textos o dibujos a mano alzada que no vayan animados podemos hacer uso de Natron con este mismo nodo. Aunque, cuando no se va a animar el trazo, nos sirve cualquier aplicación de dibujo digital, como también cualquier editor de imágenes, sea de mapa de bits o vectorial. El uso de Natron se hace interesante sobre todo por la posibilidad de animar el trazo y de esto van a tratar estos capítulos sobre el nodo de trazos y formas llamado RotoPaint.

Contenido del tutorial sobre trazos fragmentado en 3 partes

En este tutorial que conforma la primera parte veremos:

• Presentación del nodo para trazos y formas «RotoPaint».
• Realización básica de un texto a mano alzada animado.
  • Un solo trazo de inicio a final. (Una sola capa)

En la segunda parte de esta serie de trazos con el nodo «RotoPaint» veremos:

• Realización avanzada de un texto a mano alzada con el trazo animado.
  • Un trazo, e incluso varios, para cada letra individual. (Uso de varias capas)

En la tercera parte de esta serie de trazos con el nodo «RotoPaint» veremos:

• Presentación de la herramienta de lápiz (Pen Tool) junto con las herramientas de selección y modificación de rutas o trazados creados con esta herramienta.
• Realización de una ruta animada en un mapa. (Dos técnicas).
  • Un solo trazo animado. (Una sola capa)
    
  • Varios trazos animados de manera secuencial. (Uso de varias capas)

Nodo «RotoPaint»

RotoPaint, así se llama el nodo que pone a disposición Natron para realizar Formas, Trazos y Clonaciones, (Shape, Stroke and Clone) animadas o no, y mucho más, puesto que podemos realizar dibujos, lo que se nos ocurra o precisemos para decorar o ilustrar nuestros vídeos con una combinación de estas tres posibilidades tanto estáticas como animadas o una combinación de ambas técnicas.

El citado nodo se encuentra en la familia de dibujo o trazado, Draw en inglés, puesto que Natron está en este idioma.

Para insertarlo lo recomendable es primero seleccionar el nodo «viewer» para luego pulsar el botón derecho del ratón sobre el mismo y navegar hasta el nodo RotoPaint, ver imagen anterior, y de este modo se auto conecta al visor; en caso de no conectarse es tan sencillo como conectarlo manualmente tirando de la flecha de salida hasta el nodo viewer.

De este modo se nos queda conectado al viewer.

Panel de propiedades del nodo RotoPaint

Todo nodo tiene su panel de propiedades para configurar y animar sus opciones. El de este nodo tiene varias pestañas desde donde manipular diferentes facetas del mism. Veamos lo más importante de ellas.

Recordemos que este nodo aparte de servir para trazos también se puede usar para dibujar formas y como tampón de clonar. En esta práctica sólo veremos la faceta de los trazos, pero ya que explico el nodo pues daré una pincelada sobre las pestañas de Trazo y Clonación.

Pestaña General

Esta pestaña afecta a todas las posibilidades del nodo, tanto de trazo como de forma y clonación.

De arriba a abajo tenemos

• los canales de color RGB+Alpha (por defecto vienen todos seleccionados) 
• la opacidad del trazo o la forma
• el color del mismo
• y un parámetro muy importante, el de «Life Time», que en este contexto se refiere a «el tiempo de vida» tanto del trazo, de la forma o clonación, y tiene varias opciones que detallo a continuación por su importancia.

• Parámetro «Life Time»
  Si desplegamos sus opciones nos encontramos con:
  (Donde digo trazo entiéndase también forma o clonación)
  • All (Todo), con esta opción vemos el trazo o dibujo toda la extensión de la línea de tiempo. Suele ser la más usual, pero por defecto viene con la opción que vemos a continuación.
  • Single (Solo), sólo se vera el trazo en el fotograma indicado en la casilla «Frame» que está a continuación de la citada casilla.
  • From start (Desde el inicio), con este parámetro seleccionado veremos el trazo desde el inicio, o sea fotograma 1 hasta el indicado en la casilla «Frame (Fotograma)». Por ejemplo si en Frame ponemos 50, pues el trazo se verá desde el inicio hasta el fotograma 50, rebasado éste, el trazo desaparecerá.
  • To end (Hasta el final), El trazo aparece en el fotograma indicado en la casilla «Frame» y es visible hasta el final de la línea de tiempo.
  • Custom (Personalizado), con esta opción podemos ir indicando mediante fotogramas clave cuándo aparecerá o desaparecerá el trazo.
    

    Lo más interesante de este parámetro es que se puede animar y de manera sencilla podemos hacer trazos que aparecen y desaparecen en los fotogramas deseados. Esto lo hacemos desde la casilla «Activated»; para insertar la primera clave simplemente ponemos el cursor de la línea de tiempo en el fotograma deseado y pulsando con el botón derecho del ratón sobre la casilla Activated elegimos la opción «Set key» (Insertar fotograma clave) con la opción activada o desactivada según deseemos. Una vez insertada la primera clave, simplemente iremos situando el cursor de la línea de tiempo en el fotograma deseado y cambiamos el estado, los fotogramas ya se insertan automáticamente porque la casilla ya está activada para ello con la anterior operación de insertar el primer fotograma clave. Por ejemplo si insertamos una clave en el inicio y cada diez fotogramas cambiamos el estado entonces tendremos un trazo intermitente con una frecuencia de 10 fotogramas.

Y debajo del anterior parámetro ya sólo tenemos la opción de premultiplicar el trazo en relación a la imagen que tengamos de fondo. Debajo de este último, los parámetros que afectan a la máscara si hacemos uso de ella.

Pestaña Shape (Formas)

Como he indicado al principio, este nodo también nos permite crear formas mediante puntos Bézier o a partir de una elipse o rectángulo. En este tutorial no veremos esta faceta, pero es muy sencillo dibujar formas con este nodo y, si seguimos este tutorial hasta el final, veremos la herramienta del nodo para crear dichas formas. Bueno pues desde esta pestaña podemos manipular el borde de la forma con los dos únicos parámetros que posee la misma.

Básicamente lo que hacen estos parámetros es degradar el borde de la forma.

• Feather define la amplitud del degradado y
• Feather fall-off la cantidad de degradado o la dureza del mismo.

Pestaña Stroke (Trazo)

En esta pestaña tenemos todos los parámetros para manipular y animar el trazo que hayamos dibujado. Una de las características mas suculentas de Natron es la posibilidad de poder animar la gran mayoría, por no decir todos los parámetros de valores de los nodos, por lo que esta pestaña es esencial para la práctica que vamos a realizar.

De arriba a abajo tenemos los siguientes parámetros, todos ellos se pueden animar.

• Brush Size (Tamaño de la brocha), aunque hayamos dibujado con un determinado valor de tamaño de trazo podemos variar este e incluso animar el cambio de tamaño con este deslizador.
  Cuando nos disponemos a dibujar si queremos un trazo más ancho o fino que el que viene por defecto (25 px) podemos aumentar o disminuir el tamaño del trazo manteniendo pulsada la tecla de mayúsculas y arrastrando el ratón con el botón izquierdo pulsado.
• Brush Spacing (Espaciado de la brocha, en este caso sería más correcta la traducción como «Espaciado del trazo»), con el valor que viene por defecto conseguimos un trazo uniforme, si aumentamos este valor poco a poco el trazo se va convirtiendo en un moteado a base de puntos.
  Cuando llegamos a visualizar los puntos, si realizamos una sutil animación (aumentando aun más la distancia) da la sensación de que los puntos se mueven desde donde hemos comenzado el trazo hacia su final.
• Brush Hardness (Presión de la Brocha), todos sabemos lo que ocurre si cogemos un lápiz y pintamos con él sobre una hoja: si apenas apretamos el trazo será suave y difuminado; si ejercemos un poco más de presión este será más marcado y si apretamos muy fuerte pues este será muy marcado. Pues esto es lo que simula precisamente este parámetro.
• Brush Effect (Efecto de Brocha), este es un parámetro que afecta al conjunto de capas y en la ayuda sólo me indica «The strength of the effect» (La intensidad del efecto).
• Pressure alters (La presión altera). Estos parámetros sólo afectan al trazo cuando lo hemos realizado con una tableta gráfica. Se pueden activar o desactivar cuando se desee y se ve el resultado puesto que la información está guardada en el trazo.
  • Opacity (Opacidad). Altera la opacidad del pincel proporcional a los cambios en la presión de la pluma.
  • Size (Tamaño). Altera el tamaño del pincel en función de los cambios en la presión de la pluma.
  • Hardness (Dureza). Altera la dureza del pincel en proporción a los cambios en la presión de la pluma.
  • Built-up. Si está activado el trazo se acumula cuando se pinta sobre si mismo como ocurre realmente cuando dibujamos sobre papel.

Ahora a continuación veremos el parámetro más importante a la hora de hacer trazos que aparecen y desaparecen de manera animada.

• Visible portion (La porción que será visible) Éste es el parámetro que se usa para animar el trazo. Vemos que tiene dos casillas: una de inicio (start) y otra de final (end). El 2 del final, si lo pulsamos, lo que hacemos es cambiar los dos valores a la vez. (Normalmente esta opción no la usaremos).
  • Aunque podemos poner cualquier valor en estas casillas los únicos validos son los valores que van del 0 al 1 con la precisión de los decimales que necesitemos.
  • Start, su valor por defecto es 0 y define el inicio del trazo, si subimos este valor, en decimales, el trazo irá desapareciendo del principio hacia el final hasta llegar al 1, donde habrá desaparecido del todo.
  • End, su valor por defecto es el 1 y si bajamos este valor, en decimales, el trazo irá desapareciendo del final hacia el principio.

Para realizar un trazo que aparece de principio a final

• nos situamos en el fotograma donde se iniciará la animación y ponemos ambos valores a 0
• insertamos un fotograma clave en el valor que pretendemos animar o en ambos
• nos situamos en el fotograma donde deseamos que sea visible todo el trazo y ponemos el valor del final (end) en 1

el fotograma se inserta automáticamente puesto que ya hemos insertado el inicial. De este sencillo modo hemos realizado la animación del trazo. Si queremos que desaparezca de inicio a final simplemente ponemos el cursor en el fotograma deseado y ponemos el valor de inicio a 1; así desaparecerá en la dirección a la dibujada. Recuerdo que se tiene que haber insertado una clave en esta casilla (si lo tiene se verá azul, o grisáceo). Si queremos la inversa pues el valor del final de nuevo a 0. ¿Sencillo eh? De todos modos realizaremos unas prácticas para ver mejor cómo funciona ésto.

Obviamente el valor de inicio será menor o igual al del final y viceversa (el del final será mayor o igual al del principio).

A continuación realizo un ejemplo para ayudar a la compresión de cómo funciona este parámetro

A modo de ejemplo pongo una imagen que es un trazo en un proyecto de 6 segundos a 25 fotogramas por segundo. Vemos una línea que aparece de la izquierda hacia la derecha durante 2 segundos (o sea 50 fotogramas), hace una pausa de un segundo y luego desaparece desde la izquierda hacia la derecha de nuevo en 2 segundos y hay un intervalo de un segundo hasta que se reinicia el proceso.

En la siguiente imagen gif el proceso explicado está ralentizado a un poco más de la mitad de su velocidad real. En la pantalla vemos aparte de la citada línea, un contador de tiempo y la propiedad «Visible portion» de la pestaña «Stroke».

Los valores de los parámetros «start» y «end» de «Life Time» en el anterior gif son:

• Fotograma 1. En este fotograma ambos valores están a 0, por lo que no vemos el trazo.
• Fotograma 50. En este fotograma el valor «end» ha subido su valor de 0 a 1 desde el fotograma 1 por lo que vemos una línea blanca que ha aparecido por la izquierda.
• Fotograma 75. Durante estos 25 fotogramas (desde la clave anterior en el fotograma 50), los valores se han mantenido por lo que la línea ha quedado estática. Pero en este fotograma introducimos una clave en el parámetro «start» en el que su valor sigue siendo 0, pero necesito esta clave para que desde aquí se inicie la animación que hará desaparecer el trazo.
• Fotograma 125. El valor de «start» ha subido de 0 al valor de 1 desde el fotograma 75, por lo que hemos visto desaparecer el trazo.
  

  Si hubiéramos mantenido el valor «start» a 0 y animado de nuevo el valor de «end» de 1 a 0, habríamos visto desaparecer el trazo de manera inversa (o sea de la derecha hacia la izquierda).

Apunte sobre los fotogramas clave: cuando los insertamos, la casilla se pone azul; si esta casilla está de un color azul grisáceo indica que está activada la cualidad de animar pero estamos viendo un fotograma en el que no hay ninguna clave insertada. Si cambiamos el valor, la clave se inserta automáticamente en el fotograma donde esté situado el cursor en la línea de tiempo.

Para mover estos valores podemos usar la rueda del ratón, hacemos clic en la casilla correspondiente, situamos el prompt | delante del número que queremos variar y movemos la rueda del ratón. Si lo ponemos detrás del último aparecerá un nuevo decimal y aumentamos la precisión, de todos modos a la hora de animar iremos del fotograma de inicio al final e insertaremos los valores deseados sin más engorro puesto que la animación se hará automáticamente y desde el editor de curvas podremos personalizar ésta.

Pestaña Clone (Clonación)

En esta pestaña se encuentran los parámetros para la herramienta tampón de clonar. No voy a entrar en detalles ahora en este tutorial sobre ella, pero básicamente funciona como el tampón de clonar de cualquier editor de imagen. Debemos haber insertado un fondo (background), si tenemos varios en el apartado «source» elegimos el que queremos clonar y posteriormente, con la herramienta correspondiente, creamos el clon. Para marcar el origen simplemente pulsamos control y arrastramos el ratón con el botón izquierdo pulsado. Al ser los parámetros animables podemos animar el resultado.

Pestaña Transform (Transformación)

Apartado desde el cual podemos transformar cualquier elemento creado con este nodo y animar estas trasformaciones si lo deseamos.

Tenemos los parámetros de Traslación, Rotación, Escala y Sesgado en X e Y. Los «Extra Matrix» los podemos usar y animar conjuntamente con los anteriores.

Apartado de capas del nodo

Debajo de las pestañas tenemos el espacio de las capas. Podemos tener las capas que precisemos de los diferentes tipos que soporta la herramienta. Cabe destacar que cada capa funciona como una capa independiente y los parámetros de propiedades vistos anteriormente pueden ser diferentes de una capa a otra.

Pero esta jerarquía tiene un inconveniente, bajo mi punto de vista, y es que si personalizamos estas capas de manera individual y al tenerlas personalizadas por lo que sea seleccionamos la capa de la que penden todas (aquí la vemos con su nombre por defecto que es «Layer1») la personalización individual, incluidas las animaciones, se pierden. Queda esto advertido puesto que es un poco frustrante este hecho.

Destacar que en este espacio tenemos un parámetro llamado «Spline keyframe» desde el cual podemos controlar la animación de las formas o trazos. Este parámetro funciona de manera automática. Por lo que si creamos una forma en el fotograma 1, ponemos el cursor en otro fotograma y movemos de sitio esta forma, este movimiento queda registrado y animado.

A continuación pongo una captura de este espacio con una capa de cada una de todas las posibles a partir de las herramientas que pone a nuestra disposición este nodo.

Podemos ver 12 tipos diferentes de capas; a continuación veremos las herramientas para crear cada una de estas posibilidades.

En las capas tenemos unas columnas con propiedades que tienen una función y efecto sobre ellas.

Veamos que son y para que sirven estas columnas de izquierda a derecha:

• Label (Etiqueta). Es el nombre de la capa o grupo de capas. Se puede personalizar de manera sencilla dando doble clic encima del nombre que viene por defecto si deseamos cambiarlo. Recomendable cuando trabajamos con muchas capas para localizar más fácilmente cada una de ellas.
• Icono en forma de ojo. Si pulsamos en una pista sobre este ojo, este se cierra y hace invisible la capa en cuestión. Importante saber que esto no sólo afecta a la previsualización, sino que afecta también al render, por lo que si queremos ocultar una capa entre varias en un determinado render lo podemos hacer de manera fácil mediante esta propiedad.
• Icono de candado. Si este candado está abierto, tenemos control para modificar y animar la capa en cuestión; si lo cerramos se bloquean las opciones de modificación. Tiene un inconveniente: aunque esté cerrado, si tenemos varias capas con diferentes propiedades y animaciones y seleccionamos la capa principal, la de arriba del todo, la personalización de las capas se pierde.
• Las hojas, una sobre otra. Aquí se indica el modo de fusión de colores de capa con respecto a la que se tenga debajo. Funciona exactamente igual que en los editores de fotografía o vídeo.

  

  Estado de las capas, ambas con el modo de fusión over (sobre), que dan como resultado la siguiente imagen

  

  Ambas capas con el modo de fusión «over (sobre)» por lo qué la que está arriba, en este caso la roja (Rectangle1) tapa a la de abajo que es la azul (Rectangle2).

  

  Vemos que he cambiado el modo de fusión de la capa de arriba (Rectangle1) de over (sobre) a plus (sumar) que lo que hace, como su nombre indica, es sumar los colores; en este concreto ejemplo el rojo de arriba más el azul de abajo. Como resultado de esta suma obtenemos el color rosa, como vemos en la siguiente imagen.

  

• Icono círculo de colores. Esta columna indica el color en el que veremos los límites de la forma (o la ruta del trazo) representado con un cuadrado del color escogido; por defecto granate. Es una ayuda visual de trabajo; este es un parámetro de color que NO afecta al render, solamente a la previsualización en el espacio de trabajo. Podemos cambiar el color de este trazo de límite o ruta pulsando doble clic sobre el cuadrado de la correspondiente columna, en la pista deseada (por defecto de color granate) y elegir el color deseado. Si este trazo nos molesta para trabajar lo podemos ocultar dando doble clic sobre el citado cuadrado y poner el valor del canal alfa a 0; de este modo lo hacemos totalmente trasparente y dejamos de verlo.

  

  Con este ajuste de valor en el canal alfa el trazo se hace invisible.

• Icono de color del trazo o relleno de la forma. Esta columna indica el color de relleno de la forma o del trazo. Este sí es el color que obtenemos en el render. Este color normalmente lo cambiamos en la pestaña General de las propiedades, pero también podemos cambiarlo aquí dando doble clic sobre el cuadrado de referencia en esta columna. Incluso estando la pista bloqueada con el candado se nos permite cambiar el color desde aquí.

Herramientas del nodo RotoPaint

Acabamos de ver las pestañas con las diferentes propiedades y el espacio de capas, pero nos falta ver las herramientas con las que cuenta este nodo para insertar formas, trazos o realizar clonaciones.

Las herramientas del citado nodo las encontramos en la parte izquierda del espacio de monitor de previsualización, que es donde trabajamos con ellas. En la siguiente imagen las he enmarcado en rojo; luego, en la parte superior (enmarcado en verde) tenemos los parámetros de las diferentes herramientas. Lo que tenemos en este espacio depende de la herramienta seleccionada.

Por defecto cuando insertamos el nodo RotoPaint este se nos abre con la herramienta pincel (Brush) seleccionada, pero ahora voy a indicar para que sirve cada una de estas herramienta y sub-herramientas de cada apartado de arriba a abajo.

Detalle del panel de herramientas:

Si mantenemos pulsado sobre el icono de una herramienta (o pulsamos con el botón derecho del ratón sobre éste) se nos abre un menú con las diferentes opciones o tipos de herramienta que dispone cada apartado.

Detalle de las diferentes opciones que ofrece la herramienta de control de los puntos Bézier.

Detalle de las herramientas de dibujo:

Vemos que en las herramientas de dibujo a mano alzada disponemos de brocha, lápiz y goma de borrar.

Hasta aquí hemos visto lo básico del nodo RotoPaint, ahora tras unos apuntes básicos sobre los trazos, realizaremos una práctica que consistirá en realizar un texto escrito a manos alzada de un solo trazo y se animará el trazo para que simule que se escribe.

Cuestiones que conviene saber antes de aventurarnos con la práctica

Indicar previamente que la herramienta de dibujo es capaz de animar un trazo realizado sin levantar el lápiz de la tableta de principio a fin; sin embargo, si durante este trazo levantamos y seguimos con él, cuando lo animemos, aparecerán de manera simultánea los dos fragmentos del trazo porque estos están en una sola capa.

Para poder animar un trazo que necesitamos interrumpirlo (por ejemplo escribir una «t»), deberemos configurar el nodo para que cada vez que levantemos el lápiz (o interrumpamos la escritura para continuarla) nos cree una nueva capa. Este modo de trabajo, donde varios trazos los animaremos como si fueran uno solo, lo veremos en el siguiente capítulo puesto que son muchas las situaciones de dibujos o textos a mano alzada que pretendemos animar que no los podemos realizar de un solo trazo.

Si no pretendemos animar el trazo, y todos los trazos van a ser del mismo color, no hay inconveniente que este dibujo o texto esté totalmente en una misma capa.

Ilustro lo dicho con una imagen en cada situación para que se vea el efecto producido cuando pretendemos animar un trazo y saber elegir cuándo nos conviene trabajar con una sola capa o usar varias.

En este primer gif vemos un trazo realizado de principio a final sin levantar ni interrumpir su trazado; de este modo, cuando lo animamos, aparece su trazado de una sola pieza.

Este es el caso que veremos en la práctica de este capítulo.

En este segundo gif realizo un trazo que podrían ser una montañas de un dibujo infantil; a medio camino he interrumpido el trazo para luego seguir con el mismo. Al estar en la misma capa y animarlo, se comporta como si fueran dos trazos que aparecen simultáneamente. Si este no es el efecto deseado y deseamos que aparezcan como si fuera uno solo, o uno tras otro, deberíamos haber usado dos capas. En el siguiente capítulo de esta serie veremos cómo realizar esto de manera secuencial de principio a fin para que siga pareciendo (cuando lo animemos) que es un solo trazo, de hecho lo es. Ya anticipo que en este caso necesitaríamos dos capas, una para cada trazo.

Cuando insertamos el nodo por defecto, se nos abre con la herramienta «Brush, (Pincel)», es precisamente la que vamos a usar en la siguiente práctica y el trazo lo dibujamos en el espacio de trabajo (que es la pantalla de previsualización).

Precisamente este espacio (el monitor de previsualización) es nuestro lienzo. En este caso, nada más haber insertado el nodo, ya podemos dibujar lo que precisamos dentro de los límites de la pantalla.

Si por lo que sea rebasamos el límite del espacio de trabajo (o sea, la línea que delimita el monitor), el trazo se hace invisible, pero sigue estando ahí puesto que, si hacemos un trazo rebasando el límite de la pantalla, pero luego lo desplazamos para que lo que ha rebasado quede dentro de los límites de la pantalla, este se hace visible.

A continuación pongo unas imágenes para que veamos gráficamente lo que acabo de citar.

En este trazo me he salido de los límites del monitor de previsualización (la línea de puntos que delimita el trazado así me lo indica), parte del trazo está fuera del monitor y no se ve.

Si cogemos la herramienta de selección y seleccionamos la capa del trazo, se nos hace visible el trazo de guía (que ya vimos que es un trazo de ayuda visual que no afecta al render). Y vemos que parte del trazo está fuera del recuadro del vídeo.

Lo que he hecho ha sido, mediante las propiedades de transformación, mover el trazo en su eje «x» para que la parte que rebasaba el límite de la pantalla quede dentro de esta. De este modo vemos el trazo en su totalidad.

Realización de una práctica de trazado animado con el nodo RotoPaint

Texto que se auto traza en una sola capa

Esta práctica consistirá en un texto de cuatro letras (a modo de caligrafía infantil) que se ha podido escribir sin levantar el lápiz de escritura de la tableta gráfica. Este texto va a ser «Hola». En la próxima práctica veremos cómo hacer otra palabra que sería muy difícil escribirla sin levantar el lápiz.

Voy a ilustrar el proceso por pasos.

Paso 1. Configuración inicial del proyecto

Al abrir Natron por defecto solamente trae el nodo «viewer», con una resolución de proyecto HD 1920×1080 y una duración de 250 fotogramas, a una velocidad de 24 por segundo (que es la velocidad usada en cine tradicional). Pero nosotros vamos a realizar esta animación que va a durar 4 segundos para un vídeo HD 1920×1080 a una velocidad 30 fotogramas por segundo. O sea, que nuestro proyecto de animación va a durar 120 fotogramas (4×30).

Introducimos estos datos en el panel de los ajustes de proyecto, quedando como vemos en la siguiente imagen.

Paso 2. Inserción del nodo

Seleccionamos el «Viewer», pulsamos el botón derecho sobre él e insertamos el nodo «RotoPaint» (que se encuentra en la familia «Draw»).

Si lo hacemos del modo indicado se nos conectará automáticamente al viewer, si no es así, lo conectamos manualmente tirando de la flecha que apunta hacia afuera del nodo RotoPaint hasta el nodo viewer.

Paso 3. Escritura del texto.

Ahora mediante una tableta gráfica introducimos el texto «Hola» de un solo trazo (se puede usar el ratón si se es hábil con él).

Podemos ampliar este espacio de trabajo situando el cursor encima de el mismo y pulsando la barra de espacio del teclado.

Observamos que en el espacio de capas de las propiedades se nos ha creado una capa nueva (en este caso llamada «Brush1») que es el nombre que le da por defecto cuando usamos la herramienta de brocha o pincel.

Este nombre se puede personalizar si se desea haciendo doble clic sobre el mismo. De hecho yo la he llamado «Hola». Cuando es una sola capa no es muy significativo, pero cuando trabajamos con muchas, ayuda el irlas nombrando.

Paso 4. Indicar el tiempo de vida del trazo (Life Time)

Este paso es muy importante, puesto que por defecto, como vimos en la explicación del nodo, viene configurado para que se vea en un solo fotograma (en el que tenemos el cursor cuando introducimos el trazo). Pero nosotros deseamos que este se vea en toda la extensión de la línea de tiempo, por lo que en la pestaña «General» cambiamos el parámetro «Single (Solo)» de la propiedad «Life Time» por el valor «All (todo)».

Para cambiar este valor debemos tener la capa «Hola» seleccionada.

Paso 5. Animación del trazo

Ya tenemos el texto insertado, lo hemos escrito de un solo trazo, ahora procederemos a animarlo. Voy a usar una duración de 4 segundos para ello, que en un proyecto de 30 fotogramas por segundo son 120 fotogramas.

Esto es muy sencillo de realizar: situamos el cursor en el primer fotograma (en este concreto caso el 1) y, en la pestaña «Stroke (Trazo)» del panel de propiedades, ponemos el valor de «Visible portion, end» a 0. Esto siempre con la capa (en este caso «Hola») seleccionada.

Ahora pulsamos con el botón derecho sobre la casilla numérica de end y escogemos la opción «Set key» y esta se pondrá de color azul indicando que hemos activado la animación y que estamos sobre una clave.

Azul indica que estamos sobre una clave, azul claro o grisáceo indica que el parámetro tiene claves insertadas pero no estamos sobre ninguna. En la siguiente imagen vemos el color que adopta la casilla que tiene fotogramas clave insertados sin estar encima de ninguno de ellos.

Ahora situamos el cursor en el último fotograma (en este caso el 120) y cambiamos este valor de 0 a 1 y pulsamos enter. La clave se inserta automáticamente al cambiar el valor y pulsar enter, de hecho vemos que el valor ha tomado otra vez el color azul.

Y ya está, ya tenemos la animación realizada. Ahora podemos verla pulsando el botón de play en la línea de tiempo. Durante la primera pasada irá haciendo el cálculo y dibujando una barra verde que indica los fotogramas que ya se han calculado. En la segunda pasada ya lo veremos a tiempo real.

Paso 6. Exportación del proyecto

Una vez realizada la animación debemos exportar esta para insertarla en nuestro proyecto de vídeo. Yo recomiendo siempre exportar estos trabajos como secuencia de imágenes con canal alfa (o sea, con transparencia). Por lo que yo la exportaré como secuencia de png, que es un formato que ofrece una buena calidad con soporte de transparencia.

Para ello:

• seleccionamos el nodo «RotoPaint»
• pulsamos con el botón derecho sobre el mismo y
• elegimos el nodo «Write» de la familia «Image».

Y se nos abre el asistente para poder elegir el lugar, nombre y extensión de la secuencia de imágenes que vamos a crear. Yo he creado una carpeta llamada «Práctica 1 RENDER» y le he dado el nombre ####.png.

Natron automáticamente cambia los hastag, (#) por números; el motivo de poner 4 es una costumbre (que escribe cifras de 4 dígitos) para mantener un orden desde el fotograma 0000 hasta el 9999. Si precisara más duración, añadiría otro dígito (en este concreto caso habrían bastado 3).

Pulsamos «Save» y se nos crea el nodo Write conectado al nodo de RotoPaint, como vemos en la siguiente imagen.

Ahora sólo queda pulsar el botón «Render» del nodo Write1 en su panel de propiedades y se nos creará la secuencia de imágenes.

A continuación un Gif con el resultado de esta práctica.

Las imágenes gif tienen los colores indexados por lo que hay una considerable pérdida de calidad en el difuminado del trazo; justo debajo pongo una imagen png con el fondo negro para que se vea la calidad del trazo sin los rasterizados provocados por el formato gif

Esta secuencia de imágenes la podemos insertar en nuestro editor de vídeo, vimos como hacer esto con kdenlive en la entrada donde se explica cómo trabajar con imágenes.

En las siguientes entradas veremos cómo hacer la animación de un texto con el trazado animado con diferentes capas, lo que nos facilita la creación puesto que no es necesario hacerlo de un solo trazo ya que no siempre es posible hacerlo así y porque facilita un resultado más óptimo.