Efectos de Brillo

Revision as of 11:38, 28 January 2010

Language:

English • español

Warning!

This page contains outdated information.

The release of Synfig Studio 0.64.0 introduced new terminology and this translated page needs to be updated according to original English text.

You can help updating this page - see instructions here. Thank you!

Esta página debería estar escrita en Español. Por favor ayúdanos a traducirla!

Shiny Effects #1 by Ceox

Skill Level: Intermediate

Length: About 30 minutes

Version of Synfig Studio: 0.61.07

In this tutorial we will make some shiny/glowy effects on your text.

It might seem long to you because there is a lot of text, but when I first tried this out I did it in 5-10 minutes, so if you learn all the stuff you'll be able to do it that fast as well.

Efectos Brillantes #1 por Ceox Nivel de Dificultad: Intermedio Longitud: Aproximadamente 30 minutos

Versión de Synfig Estudio: 0.62,00

En este tutorial haremos algunos efectos de brillo sobre un texto.

Podría parecer largo porque hay mucho texto, pero cuando lo probé por primera vez lo hice en 5-10 minutos, por tanto si aprendes toda la materia podrás ser capaz de hacerlo rápido también.

Parte 1 - Diseño

Paso 1: Crear un Nuevo Documento

Comenzamos abriendo Synfig y creando un nuevo documento con todos los ajustes por defecto excepto estos:

Paso 2: Crear la Capa de Texto

Ahora creamos una nueva capa de texto. En este tutorial voy a usar el texto "Ceox". No es mi verdadero nombre, pero es lo que haré. Empecemos añadiendo la capa de texto:

Paso 3: Seleccione la Capa de Texto

Ahora deberías ver una "Capa de Texto " en tu área de trabajo. Selecciona la capa de texto en el panel de capas, de modo que se destaque, y verás sus parámetros en la ventana "Parámetros", que está debajo del espacio de trabajo si no lo has colocado en otra parte. (Click sobre la imagen para ampliarla; se abrirá en una nueva ventana).

Paso 4: Editar la Capa de Texto

Ahora vamos a modificar el texto en la ventana "Parámetros". Primero haz doble click con el ratón sobre el color en la celda "Valor" y escoje el color que quieras, con 100 "Transparencia". He elegido un azul bastante oscuro. Luego doble click sobre texto, también en la celda "Valor" y escribe tu nombre en la ventana emergente. Después de esto, cambia el tamaño a 50pt y la fuente a Arial, ambos presionando dos veces en cada campo en la celda "Valor" correspondiente. Aquí está una captura de pantalla de todas las cosas que hemos modificado: (He oscurecido todos los valores que deberían estar bien por defecto, pero si quieres puedes comprobar también los demás).

Paso 5: (OPCIONAL)

Si quieres "más fantasía" sobre tu texto, créale una sombra, como indica este paso. Click derecho sobre la capa de texto en el panel de capas y escoge " Duplicar Capa ":

Ahora deberías tener dos capas de "Texto" una sobre otra. Escoje la capa "Texto" inferior y cámbiale el color. Voy a escoger un verde sencillo. Ahora cambia el tamaño de esta capa aproximadamente 2-3 puntos más grande que la otra, en este caso a 52pt. Ahora tenemos una sombra para nuestro texto, aunque pudiera no estar perfectamente alrededor del mismo. Puedes fijar esto moviendo la capa inferior un poco. Así es como mi texto se ve ahora:

Paso 6:

Ahora creamos la primera cosa brillante. Añade una nueva capa como añadimos la capa de texto, pulsando sobre la pequeña flecha negra en la esquina de nuestra lona y escogiendo " Capa > Nueva Capa> Gradientes> Gradiente Linear. Ahora tu lienzo debería estar lleno de algún gradiente coloreado. No te preocupes, recuperaremos tu texto en el siguiente paso, que en realidad viene ahora. Escoge la capa "Gradiente Lineal "en el panel de capas y luego haz doble click sobre el valor "Gradiente" en la ventana "Parámetros", como hicimos en el Paso 4. Ahora deberías ver una ventana que se llama " Editor de Gradiente". En el fondo de esta ventana deberías ver dos 'medio flechas' (one black and the other white)( una blanca y una negra), una al lado izquierdo y otra al derecho. Click sobre la del lado izquierdo. (Cuando el color de la flechita es blanco, está seleccionada). Cambia el color a blanco y el valor "Transparencia" a 0. Ahora selecciona la flecha del lado derecho y haz lo mismo. Ahora inserta una nueva flecha (o CPunto, como quieras llamarlo) pulsando en el centro del área sobre la que están las flechitas con el botón derecho del ratón y selecciona " Insertar CPunto ": Observa que este menú sólo aparecerá mientras mantienes el botón derecho pulsado. Ahora selecciona esta flecha (cambiará su color a blanco) y su valor "Alfa" a 50. Como habrás notado por ahora, la cantidad alfa controla la transparencia de un objeto. Ahora tu Editor de Gradiente debería parecerse a esto:

y en tu área de trabajo algo como esto:

Paso 7:

Gira y escala la capa "Gradiente Lineal " con la Herramienta Normal " utilizando los puntos de control como te muestra el vídeo. Click aquí para ver vídeo. Se abre en una ventana nueva.

Paso 8:

Selecciona la capa "Gradiente Lineal " en el panel de capas y cambia el "Método de Mezcla " a "Encima" en la ventana "Parámetros". Ahora la capa de Gradiente es visible sólo sobre las capas que están debajo de ella. El gradiente debería desaparecer si lo colocaras como el vídeo mostró en el paso anterior. (No ponerlo arriba del texto) .

Paso 9:

Es más fácil hacer todas las animaciones después, por lo tanto ahora podríamos hacer otro efecto brillante, que prefiero llamar "un destello". Comenzamos seleccionando la herramienta BLINE (Línea Bézier) (File:Draw-camino 128sif.png) y aumentamos al 400 % en nuestra área de trabajo. Podemos usar el zoom aumentando y disminuyendo en la ventana "Navegador":

Ahora tenemos que dibujar un nuevo objeto con la herramienta BLINE (Image:draw-path_128sif.png) en alguna esquina aguda de nuestro texto. Asegúrate de que está marcada la opción "crear región" en la ventana de las propiedades de la herramienta. Escogí la esquina del X, porque este efecto queda muy bien sobre el último carácter. De modo que ahora dibuja una forma como ésta:

( Inserta un vértice haciendo click con el botón izquierdo y cierra la línea pulsando sobre el primer punto con el botón derecho, seleccionando después " Hacer Bucle ")

Paso 10:

Ahora reduce con el zoom al 100 % otra vez. Deberías tener una nueva capa en el panel de capas:

Como queremos un efecto brillante no necesitamos el contorno de la línea bézier (Bline). Podemos resolverlo de tres modos: 1- deseleccionamos la capa en el panel de capas pulsando sobre el cuadrado de la izquierda 2- En el panel de capas hacemos click derecho sobre la capa del contorno y le damos a "Borrar capa". 3- Antes de dibujar la Bline, la deseleccionamos en la ventana de las propiedades de la herramienta. Selecciónala pulsando sobre ella. Ahora tenemos sus parámetros en la ventana "Parámetros". Cambia su color a blanco, (si no lo es). Pon su "Desvanecimiento" a 1pt " y el "Tipo de Desvanecimiento" en " Desenfoque Box ". No queremos que sea visible aún, por lo tanto también tenemos que poner el valor "Transparencia" a 0 en el editor de color. Ahora todo está listo para la animación.

Part 2 - Animating

Step 1:

First we animate the "Linear Gradient" layer. Select it in the layers list. Now you should have to have two green control points visible in your canvas. Choose the "Normal Tool" (Image:normal_icon-full.jpg) and select both of those points by drawing an rectangle over them. Open the keyframe- window by clicking on its icon (a golden key) in the same window where the "Params" are. Make sure your timeline indicator is at "0f" (the small orange line on a gray background) and add a new keyframe by pressing on the blue icon. Move the timeline indicator to "2s" and add a new keyframe. Now your window should look like this:

Step 2:

Move the time indicator to "0f" and press on the green ball in the lower right corner of your canvas. After pressing on it, its color changes to red, like it is in the screenshot. Now move the control points up a bit (this doesn't affect the animation), just to create a waypoint. Go back to "2s", where we inserted the second keyframe and move the two green control points to the right side of your text. The first animation has been created. You can move your timline indicator around to see it. This should be your timeline and canvas now:

Step 3:

Now let's encapsulate our "Linear Gradient" layer and the two "Text" layers by selecting them all. (Select multiple layers by holding CTRL down and selecting the layers). Then press on one of the selected layers and choose "Encapsulate". The layers should now be groupped in one layer with a box symbol and labelled "Inline Canvas". You can open all the layers by clicking on the small arrow on the left side of the box- icon.

Step 4:

I just noticed, that I screwed up and we have to make the whole animation a bit longer. Click on the black arrow in the upper left corner of your canvas, select "Edit" and then "Properties". A new window should pop up. Go to the "Time" tab and then set the "End Time" to 4s 2f.

Step 5:

Select the "NewBLine(some number) Region" layer, place the timeline indicator to "2s" and a add a keyframe, like in Step 2. Now repeat this by adding keyframes also to "3s" and "4s". Move your timeline indicator back to "2s" and press the green ball icon to get into the animate editing mode. Now open the "Colors" window from the "Params" window and set the "Alpha" value to 1. Close the window. Move the time indicator to "3s" and set the "Alpha" value to 100 trough the "Colors" window like before. Now move the time indicator to "4s" and set "Alpha" to 0. Now we have the shimmer in the corner of our text fading in and out in 2 seconds. Your timeline should now look like this (without those texts, of course):

Step 6:

Your animation is basicly ready, but that shimmer needs some enchancement. First add a new layer onto the "NewBLine(some number) Region" layer, by left clicking on it and selecting "New Layer > Transform > Rotate". A new layer named "Rotate" should appear. Now lets encapsulate the "Rotate" and "NewBLine..." layer like in Step 3, but just selecting the "Rotate" and "NewBline..." layers this time. If we wouldn't do this the rotatation effect would affect our text too, but that's not what we want. Now you should have 2 "Inline Canvas" layer groups. Open the first one by pressing on the small white arrow next to the [box]- icon. This is what your layers list should look like now:

Step 7:

Select both of the layers in the opened "Inline canvas" and you should see the outline of your shimmer and a new line, which has a green dot and a blue dot in both ends. Move the green dot to the center of your shimmer like this:

Step 8:

Make sure, you're still in the "Animate Editing Mode" (the ball in the bottom left corner of your canvas is red, if you are), place your timeline indicator to "2s" and select only the "Rotate" layer. Now you have to set the "Amount" value to 0.01 in the "Params" window, just to set the waypoint. Move the timeline indicator to "3s" and set the "Amount" value to 180 (for 180 degrees) and then move the timeline indicator to "4s" and the "Amount" value to 359.

Congratulations, you are done!

Here's the Synfig Studio file.

And here's the final result:

Hope this tutorial helped you with something :)

For further questions, contact me at ceoxmusic (at) gmail (dot) com

Ceox | HTML version