Efectos de Brillo

From Synfig Studio :: Documentation
Jump to: navigation, search
m (Text replace - '{{l|Category:' to '{{Category|')
 
(2 intermediate revisions by the same user not shown)
Line 5: Line 5:
 
{{Category|Tutorials Intermediate}}
 
{{Category|Tutorials Intermediate}}
 
<!-- Page info end -->
 
<!-- Page info end -->
−
  Esta página debería estar escrita en Español. Por favor ayúdanos a traducirla!
+
   
 +
Efectos de brillo #1 por Ceox
  
−
Shiny Effects #1 by Ceox
+
'''Nivel de dificultad:''' Intermedio
  
−
'''Skill Level:''' Intermediate
+
'''Duración:''' Sobre 30 minutos
  
−
'''Length:''' About 30 minutes
+
'''Versión de Synfig Studio:''' 0.61.07
  
−
'''Version of Synfig Studio:''' 0.61.07
+
En este tutorial vamos a hacer algunos efectos de brillo sobre un texto.
  
−
In this tutorial we will make some shiny/glowy effects on your text.
+
Puede parecer muy largo ya que hay mucho texto, pero cuando lo intenté la primera vez lo hice en 5-10 minutos, por lo que si aprendes bien toda la materia podrás hacerlo igual de rápido.
  
−
It might seem long to you because there is a lot of text, but when I
+
Efectos Brillantes #1 por Ceox
−
first tried this out I did it in 5-10 minutes, so if you learn all the
+
Nivel de Dificultad: Intermedio
−
stuff you'll be able to do it that fast as well.
+
Longitud: Aproximadamente 30 minutos
 +
Versión de Synfig Estudio: 0.62,00
  
−
== Part 1 - Designing ==
+
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.
  
−
=== Step 1: Create New Document ===
 
  
−
We start by opening Synfig Studio and creating a new document with all
+
== Parte 1 - Diseño  ==
−
the default settings except these:
+
 
 +
=== Paso 1: Crear un Nuevo Documento ===
 +
 
 +
Comenzamos abriendo Synfig y creando un nuevo documento con todos los ajustes por defecto excepto estos:
  
 
http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic1.gif
 
http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic1.gif
  
−
=== Step 2: Create Text Layer ===
+
=== 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:
  
−
Now we create a new text layer.  In this tutorial I'm going to use
 
−
the text "Ceox". That's not my real name, but it will have to
 
−
do. Start by adding the text layer:
 
  
 
http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic2.gif
 
http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic2.gif
  
−
=== Step 3: Select Text Layer ===
+
=== 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).
 +
 
  
−
Now you should see a "Text Layer" text in the middle of your
 
−
project. Select the text layer in the layers list, so that it is
 
−
highlighted, and you should see its parameters in the "Params" window,
 
−
which is on the bottom of your workspace if you haven't placed it
 
−
somewhere else. (Click on the image to enlarge it; it will open in a
 
−
new window).
 
  
 
http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic3.gif
 
http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic3.gif
  
−
=== Step 4: Edit Text Layer ===
+
=== 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).
 +
 
  
−
Now we are going to modify the text in the "Params" window. First
 
−
double-click on the color in the "Value" cell and choose the color you
 
−
want, with 100 "Alpha". I chose a darkish blue. Then double-click on
 
−
the "Text Layer" text, also in the "Value" cell and enter your name
 
−
into the pop-up window. After this, change the size to 50pt and the
 
−
font to Arial, both by double-clicking the field in the "Value"
 
−
cell. Here's a screenshot of all things need to be modified: (I have
 
−
darkened all the values that should be good to go by default, but if
 
−
you like you can check the others as well).
 
  
 
http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic4.gif
 
http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic4.gif
  
−
=== Step 5: (OPTIONAL) ===
+
=== 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 ":
  
−
If you want some more "fancyness" on your text, create a stroke for
 
−
the text, like this step tells you. Right click on the text layer in
 
−
the layers list and choose "Duplicate Layer":
 
  
 
http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic5.gif
 
http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic5.gif
  
−
Now you should have two "Text" layers on top of each other. Choose
+
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:
−
the lower "Text" layer and change the color to something else what
+
 
−
you have on the top "Text" layer. Im am going to choose a simple
+
 
−
green. Now change the size of this layer to about 2-3 pt bigger than
+
−
the layer on the top, in this case to 52pt. (50pt 2pt, if you didn't
+
−
get it). Now we have a stroke for our text, though it might not be
+
−
perfectly around the text. You can fix this, my moving the lower layer
+
−
a bit. This is how my text looks like now:
+
 
http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic6.gif
 
http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic6.gif
  
−
=== Step 6: ===
+
=== Paso 6: ===
  
−
Now we create the first shiny thing. Add a new layer just like we
+
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 ":
−
added the text layer, by clicking on the little black arrow in the
+
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:
−
corner of our canvas and choosing "Layer &gt; New Layer &gt;
+
−
Gradients &gt; Linear Gradient. Now your canvas should be filled with
+
−
a some colored gradient. Don't worry, we will get your text back in
+
−
the next step. Which actually comes now. Choose the "Linear Gradient"
+
−
layer in the layers list and then double-click on the "Gradient"
+
−
value in the "Params" window, like we double-clicked in Step 4. Now
+
−
you should see a window which calls itself the "Gradient Editor". At
+
−
the bottom of this window you should see two black 'half-arrows', one
+
−
on the left side and one on the right side. Click on the one, which is
+
−
on the left side. (When the color of it changes to white, it is
+
−
selected.) Change the color to white and the "Alpha" value to 0. Now
+
−
select the arrow on the right side and do the same thing. Now insert a
+
−
new arrow (or CPoint, what ever you want to call them) by clicking in
+
−
the center of the area, which is over the half-arrows with your right
+
−
mouse button and select "Insert CPoint". Notice that the menu will
+
−
only appear when you keep the right mouse button pressed down. Now
+
−
select this arrow and change its color to white and its "Alpha" value
+
−
to 50. As you may have noticed by now, the alpha amount controls the
+
−
transparency of an object. Now your Gradient Editor should look like
+
−
this:
+
  
 
http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic7.gif
 
http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic7.gif
  
−
and your canvas something like this:
+
y en tu área de trabajo algo como esto:
−
 
+
 
http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic8.gif
 
http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic8.gif
  
−
=== Step 7: ===
+
=== Paso 7: ===
  
−
Rotate and scale the "Linear Gradient" layer with the "Normal Tool"
+
Gira y escala la capa "Gradiente Lineal " con la Herramienta Normal " utilizando los puntos de control como te muestra el vídeo.
−
using the control points like the video shows.
+
[http://personal.inet.fi/musiikki/ceox/synfigtuto1/vid1.swf.html Click aquí para ver vídeo. Se abre en una ventana nueva.]
−
[http://personal.inet.fi/musiikki/ceox/synfigtuto1/vid1.swf.html Click
+
−
here to view video. Opens up in new window.]
+
  
−
=== Step 8: ===
+
=== Paso 8: ===
  
−
Select the "Linear Gradient" layer in the layers list and set its
+
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) .
−
"Blend Method" to "Onto" in the "Params" window. Now the Gradient
+
−
layer is visible only on the layers below it. Your gradient should
+
−
disappear if you placed like the video showed in the previous
+
−
step. (Not on top of the text)
+
  
 
http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic9.gif
 
http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic9.gif
  
−
=== Step 9: ===
+
=== 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":
  
−
It's easier to do all the animations afterwards, so now we could make
 
−
the other shiny effect, which I prefer to call a 'shimmer'. We start
 
−
by taking the BLine tool ({{l|Image:draw-path_128sif.png}}) and zooming
 
−
in 400% into our canvas. You can zoom in and out in the "Navigator":
 
 
http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic19.gif
 
http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic19.gif
  
−
 Now we have to draw a new object with the BLine tool
+
Ahora tenemos que dibujar un nuevo objeto con la herramienta BLINE
−
({{l|Image:draw-path_128sif.png}}) in to some sharp corner of our
+
({{l|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.
−
text. I chose the corner of the X, because this effect looks good on
+
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:
−
the last character(s). So now draw a shape like this one:
+
 
 +
( 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 ")
  
−
(Insert a controller by pressing your left mouse button and close the
 
−
line by clicking on the first point with your right mouse button and
 
−
selecting "Loop BLine")
 
 
http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic20.gif
 
http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic20.gif
  
−
=== Step 10: ===
+
=== Paso 10: ===
  
−
Now zoom out to 100% again. You should now have a new layer in your
+
Ahora reduce con el zoom al 100 % otra vez. Deberías tener una nueva capa en el panel de capas:
−
layers list:
+
  
 
http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic10.gif
 
http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic10.gif
−
 
+
Como queremos un efecto brillante no necesitamos el contorno de la línea bézier (Bline). Podemos resolverlo de tres modos:
−
Select it by clicking on it. Now we have its parameters in the
+
1- deseleccionamos la capa en el panel de capas pulsando sobre el cuadrado de la izquierda
−
"Params" window. Change its color to white, if it isn't it aleady. You
+
2- En el panel de capas hacemos click derecho sobre la capa del contorno y le damos a "Borrar capa".
−
also have to set its "Feather" to 1pt and the "Type of Feather" to
+
3- Antes de dibujar la Bline, la deseleccionamos en la ventana de las propiedades de la herramienta.
−
"Box Blur". We don't want it to be visible yet so we also have to set
+
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.
−
the "Alpha" value to 0 in the color editor. Now everything is ready
+
−
for the animation.
+
 
http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic11.gif
 
http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic11.gif
  
−
== Part 2 - Animating ==
+
== Parte 2 - Animación ==
 +
 
 +
=== Paso 1: ===
  
−
=== Step 1: ===
+
Primero animamos la capa "Gradiente Lineal". Selecciona esto en el panel de capas. Ahora deberías tener dos puntos de control verdes visibles en el área de trabajo. Escoge la herramienta "Normal"  y selecciónalos dibujando un rectángulo sobre ellos. Abre la ventana de fotogramas clave pulsando sobre su icono (una llave de oro) en la misma ventana donde están los "Parámetros". Asegúrate que su indicador de tiempo está en "0f" (la pequeña línea naranja sobre un fondo gris) y añade un fotograma clave (keyframe) pulsando sobre "Añadir un nuevo Fotograma Clave". Mueve el indicador de tiempo "a 2s" y añade otro fotograma clave. Ahora tu ventana debería parecerse a esto:
  
−
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" ({{l|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:
 
  
 
http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic12.gif
 
http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic12.gif
  
−
=== Step 2: ===
+
=== Paso 2: ===
  
−
Move the time indicator to "0f" and press on the green ball in the
+
Mueve el indicador de tiempo a "0f" y pulsa la pelota verde en la esquina inferior derecha de tu área de trabajo. Después de esto, su color se cambia a rojo, como se puede ver en la imagen. Ahora sube los puntos de control un poco (esto no afecta a la animación), lo justo para crear un punto de ruta (waypoint). Vuelve a "2s", donde insertamos el segundo fotograma clave y mueve los dos puntos de control verde hacia el lado derecho de su texto. La primera animación ha sido creada. Puedes mover sobre su indicador de línea de tiempo (timeline) para verlo. Esto deberías tener en tu  área de trabajo:
−
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:
+
  
 
http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic13.gif
 
http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic13.gif
  
−
=== Step 3: ===
+
=== Paso 3: ===
 +
 
 +
Ahora vamos a encapsular la capa de nuestro " Gradiente Lineal " y las dos de "Texto" seleccionándolos todos. (Selecciona varias capas pulsando CTRL y seleccionando las capas). Entonces haz click derecho sobre una del las seleccionadas y escoge "Encapsular". Las capas se agruparán en una capa con el símbolo de una caja y etiquetado como " Lienzo en línea". Se pueden abrir todas las capas pulsando sobre la pequeña flecha que está a la izquierda del icono de la caja.
  
−
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.
 
  
 
http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic14.gif
 
http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic14.gif
  
−
=== Step 4: ===
+
=== Paso 4: ===
  
−
I just noticed, that I screwed up and we have to make the whole
+
He vuelto arriba y me he dado cuenta de que tenemos que hacer la animación entera un poco más larga. Click sobre la flecha negra en la esquina superior izquierda del área de trabajo, selecciona "Editar" y luego "Propiedades". Aparece una nueva ventana. Ves a la etiqueta "Tiempo" y cambia el Tiempo de Fin a 4s 2f.
−
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.
+
  
 
http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic15.gif
 
http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic15.gif
  
−
=== Step 5: ===
+
=== Paso 5: ===
  
−
Select the "NewBLine(some number) Region" layer, place the timeline
+
Seleccione la capa de la Bline, coloca el indicador de tiempo en "2s" y un añade un fotograma clave, como en el Paso 2. Ahora repite esto también en "3s" "y 4s". Mueve el indicador de tiempo hacia atrás a "2s" y presione el icono de la pelota verde para entrar en el modo animar. Ahora abre la ventana "Colores" de la ventana "Parámetros" y pon el valor "Transparencia" a 1. Cierra la ventana. Mueve el indicador de tiempo a "3s" y pon el valor "Transparencia" a 100 en la la ventana "Colores" como antes. Ahora mueve el indicador de tiempo a "4s" y pon "la transparencia" a 0. Ya tenemos el destello en la esquina de nuestro texto apareciendo y desapareciendo en 2 segundos. Nos habrá aparecido un punto verde el el tiempo "0s". Como no lo necesitamos, lo borraremos haciendo click derecho sobre él y seleccionando "borrar". Tu línea de tiempo debería parecerse a esta (sin los textos, por supuesto):
−
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):
+
  
 
http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic16.gif
 
http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic16.gif
  
−
=== Step 6: ===
+
=== Paso 6: ===
  
−
Your animation is basicly ready, but that shimmer needs some
+
Tu animación está básicamente lista, pero el destello necesita algún toque. Primero añade una nueva capa sobre la Bline en el panel de capas, con el botón derecho del ratón, selecciona "Nueva Capa> Transformar> Rotar ". Una nueva capa llamada "Rotar" debería aparecer. Ahora encapsula "Rotar" y la BLine  como en el Paso 3, pero sólo selecciona éstos dos. Si no hiciéramos esto el efecto de rotación afectaría también a nuestro texto, pero no es lo que queremos. Ahora deberías tener dos capas de "Lienzo en línea". Abre el primero pinchando el icono de la pequeña flecha blanca de al lado. Esto es lo que verás ahora:
−
enchancement. First add a new layer onto the "NewBLine(some number)
+
−
Region" layer, by left clicking on it and selecting "New Layer &gt;
+
−
Transform &gt; 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:
+
  
 
http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic17.gif
 
http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic17.gif
  
−
=== Step 7: ===
+
=== Paso 7: ===
  
−
Select both of the layers in the opened "Inline canvas" and you should
+
Selecciona ambas capas del Lienzo en línea abierto y verás su contorno brillar y una nueva línea, que tiene un punto verde y un punto azul a ambos lados. Mueve el punto verde al centro del destello así:
−
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:
+
  
 
http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic18.gif
 
http://personal.inet.fi/musiikki/ceox/synfigtuto1/pic18.gif
  
−
=== Step 8: ===
+
=== Paso 8: ===
  
−
Make sure, you're still in the "Animate Editing Mode" (the ball in the
+
Asegúrate de que estás todavía en el Modo Animado (la pelota en la esquina inferior derecha del área de trabajo está de color rojo, de lo contrario estará verde), coloca su indicador de tiempo en "2s" y selecciona sólo la capa "Rotar". Ahora pon el valor "Cantidad" a 0.01 en la ventana "Parámetros", justo para poner el punto de ruta (waypoint). Mueve el indicador de tiempo a "3s" y pon el valor "Cantidad" a 180 (para 180 grados) y luego mueve el indicador de tiempo a"4s" y el valor "Cantidad" a 359.
−
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!
+
¡Felicidades, lo has hecho!
  
−
[http://personal.inet.fi/musiikki/ceox/synfigtuto1/Shiny_Effects_Tutorial_1_by_Ceox.sif Here's the Synfig Studio file.]
 
  
−
And here's the final result:
+
[http://personal.inet.fi/musiikki/ceox/synfigtuto1/Shiny_Effects_Tutorial_1_by_Ceox.sif Aquí está el archivo de Synfig.]
 +
 
 +
Y aquí está el resultado final:
  
 
http://personal.inet.fi/musiikki/ceox/synfigtuto1/animation.gif
 
http://personal.inet.fi/musiikki/ceox/synfigtuto1/animation.gif
  
−
Hope this tutorial helped you with something :)
 
  
−
For further questions, contact me at ceoxmusic (at) gmail (dot) com
+
Espero que estas instrucciones te hayan ayudado algo :)
 +
Para otras preguntas, ponte en contacto conmigo en ceoxmusic@gmail.com  
 +
 
  
 
[http://ceox.urli.net Ceox] |
 
[http://ceox.urli.net Ceox] |
 
[http://personal.inet.fi/musiikki/ceox/synfigtuto1/ HTML version]
 
[http://personal.inet.fi/musiikki/ceox/synfigtuto1/ HTML version]

Latest revision as of 15:21, 26 April 2010

Languages 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!

warning end


Efectos de brillo #1 por Ceox

Nivel de dificultad: Intermedio

Duración: Sobre 30 minutos

Versión de Synfig Studio: 0.61.07

En este tutorial vamos a hacer algunos efectos de brillo sobre un texto.

Puede parecer muy largo ya que hay mucho texto, pero cuando lo intenté la primera vez lo hice en 5-10 minutos, por lo que si aprendes bien toda la materia podrás hacerlo igual de rápido.

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:

pic1.gif

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:


pic2.gif

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).


pic3.gif

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).


pic4.gif

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 ":


pic5.gif

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:


pic6.gif

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:

pic7.gif

y en tu área de trabajo algo como esto: pic8.gif

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) .

pic9.gif

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":

pic19.gif

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 ")

pic20.gif

Paso 10:

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

pic10.gif 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. pic11.gif

Parte 2 - Animación

Paso 1:

Primero animamos la capa "Gradiente Lineal". Selecciona esto en el panel de capas. Ahora deberías tener dos puntos de control verdes visibles en el área de trabajo. Escoge la herramienta "Normal" y selecciónalos dibujando un rectángulo sobre ellos. Abre la ventana de fotogramas clave pulsando sobre su icono (una llave de oro) en la misma ventana donde están los "Parámetros". Asegúrate que su indicador de tiempo está en "0f" (la pequeña línea naranja sobre un fondo gris) y añade un fotograma clave (keyframe) pulsando sobre "Añadir un nuevo Fotograma Clave". Mueve el indicador de tiempo "a 2s" y añade otro fotograma clave. Ahora tu ventana debería parecerse a esto:


pic12.gif

Paso 2:

Mueve el indicador de tiempo a "0f" y pulsa la pelota verde en la esquina inferior derecha de tu área de trabajo. Después de esto, su color se cambia a rojo, como se puede ver en la imagen. Ahora sube los puntos de control un poco (esto no afecta a la animación), lo justo para crear un punto de ruta (waypoint). Vuelve a "2s", donde insertamos el segundo fotograma clave y mueve los dos puntos de control verde hacia el lado derecho de su texto. La primera animación ha sido creada. Puedes mover sobre su indicador de línea de tiempo (timeline) para verlo. Esto deberías tener en tu área de trabajo:

pic13.gif

Paso 3:

Ahora vamos a encapsular la capa de nuestro " Gradiente Lineal " y las dos de "Texto" seleccionándolos todos. (Selecciona varias capas pulsando CTRL y seleccionando las capas). Entonces haz click derecho sobre una del las seleccionadas y escoge "Encapsular". Las capas se agruparán en una capa con el símbolo de una caja y etiquetado como " Lienzo en línea". Se pueden abrir todas las capas pulsando sobre la pequeña flecha que está a la izquierda del icono de la caja.


pic14.gif

Paso 4:

He vuelto arriba y me he dado cuenta de que tenemos que hacer la animación entera un poco más larga. Click sobre la flecha negra en la esquina superior izquierda del área de trabajo, selecciona "Editar" y luego "Propiedades". Aparece una nueva ventana. Ves a la etiqueta "Tiempo" y cambia el Tiempo de Fin a 4s 2f.

pic15.gif

Paso 5:

Seleccione la capa de la Bline, coloca el indicador de tiempo en "2s" y un añade un fotograma clave, como en el Paso 2. Ahora repite esto también en "3s" "y 4s". Mueve el indicador de tiempo hacia atrás a "2s" y presione el icono de la pelota verde para entrar en el modo animar. Ahora abre la ventana "Colores" de la ventana "Parámetros" y pon el valor "Transparencia" a 1. Cierra la ventana. Mueve el indicador de tiempo a "3s" y pon el valor "Transparencia" a 100 en la la ventana "Colores" como antes. Ahora mueve el indicador de tiempo a "4s" y pon "la transparencia" a 0. Ya tenemos el destello en la esquina de nuestro texto apareciendo y desapareciendo en 2 segundos. Nos habrá aparecido un punto verde el el tiempo "0s". Como no lo necesitamos, lo borraremos haciendo click derecho sobre él y seleccionando "borrar". Tu línea de tiempo debería parecerse a esta (sin los textos, por supuesto):

pic16.gif

Paso 6:

Tu animación está básicamente lista, pero el destello necesita algún toque. Primero añade una nueva capa sobre la Bline en el panel de capas, con el botón derecho del ratón, selecciona "Nueva Capa> Transformar> Rotar ". Una nueva capa llamada "Rotar" debería aparecer. Ahora encapsula "Rotar" y la BLine como en el Paso 3, pero sólo selecciona éstos dos. Si no hiciéramos esto el efecto de rotación afectaría también a nuestro texto, pero no es lo que queremos. Ahora deberías tener dos capas de "Lienzo en línea". Abre el primero pinchando el icono de la pequeña flecha blanca de al lado. Esto es lo que verás ahora:

pic17.gif

Paso 7:

Selecciona ambas capas del Lienzo en línea abierto y verás su contorno brillar y una nueva línea, que tiene un punto verde y un punto azul a ambos lados. Mueve el punto verde al centro del destello así:

pic18.gif

Paso 8:

Asegúrate de que estás todavía en el Modo Animado (la pelota en la esquina inferior derecha del área de trabajo está de color rojo, de lo contrario estará verde), coloca su indicador de tiempo en "2s" y selecciona sólo la capa "Rotar". Ahora pon el valor "Cantidad" a 0.01 en la ventana "Parámetros", justo para poner el punto de ruta (waypoint). Mueve el indicador de tiempo a "3s" y pon el valor "Cantidad" a 180 (para 180 grados) y luego mueve el indicador de tiempo a"4s" y el valor "Cantidad" a 359.

¡Felicidades, lo has hecho!


Aquí está el archivo de Synfig.

Y aquí está el resultado final:

animation.gif


Espero que estas instrucciones te hayan ayudado algo :) Para otras preguntas, ponte en contacto conmigo en ceoxmusic@gmail.com


Ceox | HTML version


Languages Language: 

English • español

Retrieved from "https://wiki.synfig.org/index.php?title=Doc:Shiny_Effects/es&oldid=12000"