martes, 21 de septiembre de 2010

SEGUIR INSTRUCCIONES EN AE: Una estrategia didáctica para el auto-aprendizaje

El siguiente ejercicio tiene como objetivo que el estudiante aprenda a aprender y que sea capaz de seguir una serie de indicaciones para lograr un resultado.
En este caso, se trata de un tutorial de After Effects que explicará paso a paso y de manera detallada, las acciones y procesos que se deben llevar a cabo para obtener el resultado visual esperado.
Recuerden leer detenidamente las instrucciones y seguirlas al pie de la letra. Cuando empiecen a familiarizarse con el proceso, pueden ir un paso más allá y proponer, modificar y alterar los parámetros de los efectos y experimentar con cambios de colores, palabras y aplicar otros efectos a la escena final.

ÉXITOS… Ojalá las propuestas visuales superen el resultado original.

Software: Adobe After Effects CS4, idioma inglés.

Nota: No olviden ir a comentarios y hacer acto de presencia; esta será su confirmación de participación.


Instrucciones:

1. Crear una nueva composición “Ctrl+N” de 720 x 480 y renombrarla “Texto-Inicial” Duración: 3” segundos. Barra Superior Menu--> Composition--> New Composition.

2. Crear un sólido del tamaño de la composición de color negro “Ctrl+Y” lo renombramos "FONDO" y le aplicamos un efecto de degradado: Barra Superior Menu--> Effects--> Generate--> Ramp. Los parámetros a cambiar son: Start Color: R:72 G:32 B:114. End Color: Negro. Start of Ramp: 360, 0.0. End of Ramp: 360.5, 383.5
El degrado va de un morado oscuro a negro. Ahora, para hacer el fondo más interesante le aplicamos el efecto llamado "Polar Coordinates". Barra Superior Menu-- Effects-- Distort-- Polar Coordinates. Los parámetros son: Interpolation: 40%, Type of Conversion: Rect to Polar.
3. Crear un texto con la herramienta “Text Tool(panel de herramientas en la parte superior).
Escribir la palabra “BRILLO”, en mayúsculas. Puede ser cualquier tipo de letra, pero que sea palo seco, bold e italizada. Tipografía sugerida: Microgramma.

Se ubica en el centro de la pantalla, como aparece en la imagen abajo.


4. Utilizaremos un archivo de imagen como "textura" del texto a traves del "Track Matte". (Hacer clic en la imagen abajo y guardarla como JPG). Importar el archivo de la textura metálica y ubicarlo debajo de la capa de texto, modificar y escalar la imagen al tamaño de la palabra. Activar con F4 la columna del Track Matte ( si no la vemos en el time line) y hacer clic sobre el botón que está al frente de la capa con la textura y seleccionar "Alpha Matte"



Textura metálica*

5. Ahora vemos el texto con la textura metálica, pero muy plano y sin volumen. Para darle una apariencia más sólida, duplicar la capa de texto "Ctrl+D" y ubicarla encima de la capa de texto original. La renombramos "Brillo bevel". Cambiar el color del texto por negro y haciendo clic derecho sobre la palabra en la ventana de composición, activar los "Layer Styles" y seleccionar "Bevel and Emboss". Los parámetros que cambian son: "Depth: 270%, Size: 3.0, Soften: 1.3, Angle: 0x +200, Altitude: 0x +30. (Desplegar la capa en el TimeLine).

6. Para ver el efecto sobre el texto metálico, cambiar el modo de transferencia "Transfer Mode" de la capa duplicada de "Normal" a "Color".

7. El texto tiene textura y solidez, pero le faltan detalles. Le aplicamos un borde para intensificar el efecto del bevel; Duplicar el texto "Ctrl+D", lo ubicamos encima de los anteriores y en el panel de texto, anulamos el relleno y sólo dejamos el borde blanco con un grosor de 3. Renombramos la capa "Brillo Borde". Para que el efecto del borde sea sutil, disminuimos la opacidad (T) de la capa al 60% y cambiamos el "Transfer Mode" por "Alpha Add".

8. Duplicar de nuevo el texto y renombrarlo "Brillo Sweep" y ubicarlo encima de las demás capas. (Recordar volver a activar el "relleno" de la palabra y subir la opacidad otra vez a 100%). Con la herramienta "CC Light Sweep", crearemos un "barrido de luz" diagonal que atraviese el texto de izquierda a derecha. Barra Superior Menu-- Effects-- Generate-- CC Ligth Sweep. Los parámetros son: Direction: 0x -30, Shape: Smooth, Width: 26, Sweep Intensity: 148, Edge Intensity: 115, Edge Tickness: 1.10, Light Color: Blanco, Light Reception: Cutout*.

*El modo "Cutout", permite que sólo se vea el brillo, para así poder aplicar más efectos encima. Ahora la animación del brillo: Crear un Keyframe en el parámetro "Center" en el primer frame de nuestro TimeLine cuya posición incial sea más o menos -91.0, 176.0 (los valores se ajustan de acuerdo a la posición del texto en la pantalla). Mover el cursor al frame 00:00:2:00 (2" segundos) en el timeline. Allí cambiar los valores del Center por: 715.0, 188.0. Si los valores y los keyframes están correctos, se verá el brillo recorrer la palabra de izquierda a derecha en forma de una línea diagonal. Por último, Cambiar el "Transfer Mode" de la capa por "Add"
.

9. Hagamos el efecto del brillo más interesante: A la capa que tiene el brillo, aplicar un "Glow". Barra Superior de Menu-- Effects-- Stylize-- Glow. Los parámetros son: Glow based on: Alpha Channel, Glow Thresold: 18.0%, Glow Radius: 47.0, Glow Intensity: 2.3
Para "difuminar" un poco el efecto del destello, aplicar "Fast Blur". Barra Superior Menu-- Effects-- Blur and Sharpen-- Fast Blur. El parámetro que cambia es: Blurriness: 13.

10. Duplicar la capa de texto, renombrarla como "Líneas brillo 1" y quitarle los efectos que tenga aplicados (incluso keyframes), para luego cambiar algunos parámetros. La idea es convertir esta nueva capa de texto en líneas de color que realcen el efecto del brillo. Entonces, cambiar el color (relleno) del texto por azul intenso. R:18, G:32, B:210 y cambiar algunos parámetros del "Layer Style" así: Depth: 225, Direction: Up, Size: 15, Soften: 10, Angle: 0x +120, Altitude: 0x +30. Ahora, le aplicamos un efecto de desenfoque "Fast Blur". Barra Superior Menu--> Effects--> Blur and Sharpen--> Fast Blur; cambiamos algunos parámetros y luego lo animamos: Blur Dimensions: Vertical. Ahora, creamos un Keyframe en "Blurriness" con un valor de 0.0 en el primer frame del TimeLine. Luego nos movemos al frame 00:00:01:10 (un segundo y diez frames) y cambiamos el valor del Blurriness por 220. Seleccionar este último keyframe y aplicar Shift+F9 (para suavizar la velocidad de llegada del efecto). Verán como el texto se difumina verticalmente. Bajar la opacidad (T) a 25% para que sea más sutil y Cambiar el "Transfer Mode" a Add.

11. Vamos a acentuar el efecto del desenfoque y hacerlo un poco más dinámico.
Duplicar la capa de texto nuevamente y renombrarla Líneas brillo 2. Cambiar los valores del Fast Blur y la duración del efecto: El segundo keyframe que estaba en 1" 10 frames, lo movemos a 15 frames. Cambiar el valor del blurriness a 55. Subir la opacidad (T) a 50%. Aplicar el efecto "Glow". Barra Superior Menu--> Effects--> Stylize--> Glow. Los parámetros que cambian son: Glow Thresold: 8.5, Glow Radius: 20, Glow Intensity: 1.7. Cambiar el "Transfer Mode" a Add. Así se diferenciarán entre si y el efecto será más llamativo y menos "simétrico".

12. Ubicamos las 2 capas de texto que acabamos de crear debajo de todas las demás capas y encima del fondo. El resultado es un efecto más luminoso que separa el texto del fondo y le añade profundidad.

13. Vienen los procedimientos más delicados:
Para lograr que el texto se "arme" por asi decirlo, hay que agrupar algunas capas de texto. La función se llama "Pre-Compose" (pre-componer). El atajo por teclado es Ctrl+Shift+C. Seleccionar las siguientes capas: Brillo Sweep, (la capa de texto que tiene el efecto Ligth Sweep), Brillo Outline (la capa de texto que sólo tiene el borde), Brillo Bevel (la capa de texto que tiene el Bevel y Emboss con el modo "Color") y las capas que conforman el Track Matte (la capa de texto inicial y la capa con la textura). En total, 5 capas que convertiremos en una Pre-composición. La imagen abajo muestra las capas seleccionadas.

Barra Superior--> Layer--> Pre-compose. En la ventana que aparece, simplemente cambiamos el nombre por "Todo Brillo" y hacer clic en OK.

14. Ahora sólo tenemos 4 capas en el TimeLine: Todo Brillo, Líneas brillo 1, Líneas brillo 2 y el fondo. Para acceder a las capas que conforman todo brillo, sólo hay que hacer doble-clic en la capa y si observan el Timeline, a medida que se van pre-componiendo capas, aparecen nuevas pestañas.

15. Creación del efecto de aparición del texto:
El efeco se llama "Stroke" y necesita máscaras (más bien trazados con la pluma) en cada una de las letras de la palabra BRILLO.


En la capa "Todo Brillo", creamos varios trazos con la pluma que sigan las formas de las letras. En este caso, hay siete trazos (máscaras), para la totalidad de las letras. Ver imagen abajo.


Como se aprecia, los trazos no son muy precisos, pero siguen las formas de las letras. Noten que algunos trazos son cerrados; para éstos, en el desplegable de la máscara se debe cambiar el modo add por none. Ahora se aplica el efecto "Stroke": Barra Superior Menu--> Effects--> Generate--> Stroke. Parámetros del efecto: Path: Hacer clic en la casilla de "all masks" y desactivar la casilla de "Stroke Secuentially" (así la palabra se va formando aleatoriamente). Como en otros efectos, los valores dependen del grosor y tipo de letra utilizado. Estos son los valores que utilicé: Brush Size: 27.5, Brush hardness: Empieza en 0% y termina en 100% (este parámetro se anima en un segundo; un keyframe incial en 0% y un keyframe final en 100%), End: Empieza en 0% y termina en 100% (este parámetro también se anima en un segundo; un keyframe inicial en 0% y uno final en 100%). Luego de ajustar el grosor de la línea y estar seguros que cubra todas las letras moviendo los nodos de los trazados, se cambia el parámetro Paint Style por Reveal Original Image. Las líneas actúan como máscaras que van revelando la palabra por partes. Para que el efecto no sea tan brusco, seleccionar los dos keyframes finales y aplicar Shift+F9.


Se ven los dos keyframes en los parámetros respectivos "Brush Hardness y "End"

16. Ahora, aplicamos el destello que acompaña al brillo diagonal y lo animamos. Crear un nuevo sólido negro del tamaño de la composición, Ctrl+Y, lo renombramos "Flare" y sobre este sólido creamos el "Lens Flare": Barra Superior Menu--> Effects--> Generate--> Lens Flare. Los parámetros son: Flare center: Empieza en 45.0, 300.0 y termina en 665.0, 180.0, Flare Brightness: 100, Lens Type: 105 mm Prime, Blend with origin: Empieza en 100%, se disminuye a 0% en 12 frames. En el frame 00:00:01:21 ( un segundo y 21 frames), copiamos el keyframe del frame 12 y lo pegamos allí, para ir hasta el frame 00:00:02:00 (dos segundos) y subir el valor otra vez a 100%.

Para finalizar el efecto del lens flare, deben cambiar el "Transfer Mode" de la capa por "Screen"

17. Aplicar el efecto de rayos de luz. Para un mayor dramatismo, vamos a generar unos rayos de luz que salgan desde donde se van formando las letras. Duplicar la capa "Todo Brillo" -->Ctrl+D, ubicarla encima de todas las demás capas y renombrarla "Burst 1". Aplicarle el efecto "CC Light Burst". Barra Superior Menu--> Effects--> Generate--> CC Light Burst. Los parámetros son los siguientes:
Center: Valor inicial 354.0, 342.0 valor final 354.0, 14.0, Intensity: Valor inicial 640, valor final 0.0, Ray Lenght: Valor inicial 170, valor final 0.0, Burst: Straight, activar las casillas de "Halo Alpha" y "Set color" Los valores del color son R:35, G:35, B:191 (azul intenso).

18. Ahora los keyframes para la animación: Crear un keyframe para Center, en el frame 0 del timeline con los valores iniciales descritos arriba (354, 342) y en el frame 00:00:02:01 (dos segundos un frame), cambiar los valores por (354, 14). Crear un keyframe para Intensity en el frame 27 con el valor inicial descrito arriba (640) y en el frame 00:00:01:12 ( un segundo doce frames), cambiar el valor a 0. Crear un keyframe para Ray Lenght también en el frame 27 con el valor inicial descrito arriba (170) y en en el frame 00:00:01:12 (también un segundo y doce frames), cambiar el valor a 0.
Ver imagen.



19. Por último, cambiamos el "Transfer Mode" de la capa por Add. La pueden duplicar Ctrl+D, para intensificar el efecto de los rayos, también con el modo Add.
...Y eso es todo... :) Miren el resultado y cambien o apliquen efectos para lograr otras combinaciones visuales. Espero que les haya gustado el tutorial. Un poco largo...Pero vale la pena.



video

Algunas variaciones del tutorial




Contenido del tutorial, imágenes y videos: Sergio Ceballos Tobón para Digital-Mente
*Imagen original: http://www.idesignproject.com/metal.html#steel



23 comentarios:

  1. Hola a todos...Benevenidos sus comentarios

    Apreciadas sus opiniones...;)

    ResponderEliminar
  2. profe demasiado interesante la primera parte del proceso... hay que ponerlo mas en practica, un resultado totalmente exitoso

    ResponderEliminar
  3. bueno miremos haber si nos da esto ps

    ResponderEliminar
  4. empezare con el proseso .... sebastian cardona v

    ResponderEliminar
  5. Voy a Comenzar, a ver como me va!! :s

    ResponderEliminar
  6. Profe a mi no me da el punto 8, Barra Superior Menu-- Effects-- Generate-- CC Ligth Sweep. Que hago?

    ResponderEliminar
  7. Sergio ya termine el tutorial, mañana lo aplico a mi gusto en la universidad.

    ResponderEliminar
  8. Laura, No está clara tu pregunta:

    No tienes el efecto en tu programa, o no te funciona con las instrucciones...

    ResponderEliminar
  9. profe el resultado queda muy bueno
    creo que la pregunta de laura es donde se encuentran los parametros
    Direction: 0x -30, Shape: Smooth, Width: 26, Sweep Intensity: 148, Edge Intensity: 115, Edge Tickness: 1.10, Light Color: Blanco, Light Reception: Cutout.

    ResponderEliminar
  10. Listo profe, sólo me falta un punto ;)

    ResponderEliminar
  11. Pues profe no encuentro en ningun lado el ramp... este computador no me quiere pasar de idioma... pues no se ni como hacer el segundo paso... estoy embalada:(
    Manuela

    ResponderEliminar
  12. profe no me pregunte como pero me invente una cosa toda rara... poruqe lo unico que me aparecia de degradado era degradado de 4 colores entonces toco asi...
    manuela

    ResponderEliminar
  13. Profe parece que no tengo el efecto de barrido de luz en el programa...
    Manuela

    ResponderEliminar
  14. bacancito pero no me quedo igual carlos pelaez

    ResponderEliminar
  15. Andres felipe Restrepo henao24 de septiembre de 2010, 23:00

    Muy buen tutorial, vale la pena hacelo y mirar los resultados obtenidos

    ResponderEliminar
  16. Hola a todos. Algunos comentarios:

    los felicito, pues por sí sólos han podido hacer el tutorial, teniendo en cuenta las limitaciones.
    Ahora, para problemas del idioma:
    Ramp-->Pendiente

    Light Sweep-->Parece que algunas versiones no lo traen o si está en español, hay que buscar de otra manera el efecto. "Todo defecto puede ser convertido en un efecto".

    ResponderEliminar
  17. miy bonito, los efectos son muy buenos, nos sirve para familiarizarnos mas con el programa.
    muchas gracias profe
    Dios t bendiga
    Jonathan R

    ResponderEliminar
  18. Me gusto mucho el paso a paso,......// para ser un tutorial de after me parecio muy precisa y exacta la forma de hacer cada cosa y efecto. BUENA POR ESA teacher y se vale el esfuerzo!!! thkss

    ATT: Pipe Restrepo IDEARTES

    ResponderEliminar
  19. PROFE A MI ME GUSTO MUCHO EL TUTORIAL, SOBRE TODO PORQ ERA MUY CLARO EN SUS INSTRUCCIONES MENOS MAL LO HICE PORQ APRENDI ALGO.....ME FALTARIA EXPLORAR MAS POR MI CUENTA

    GRACIAS LILIAN ROTAVISTA

    ResponderEliminar
  20. hola profe estoy un poco confundida de lo que hay que hacer en el punto 10

    veronica garcia

    ResponderEliminar
  21. yo ya lo hice esperemos que quede bien aunque creo que me quedaron algunos errores.

    ResponderEliminar