Tarea #2
Práctica 08

 


mickey Animación gráfica

 

Para iniciarnos en los principios básicos de la animación vamos a crear una serie de simples .gif’s animados utilizando el programa Photoshop.

La tarea #2 consiste en crear las animaciones que aparecen en el apartado de "Ejercicios" y 1 animación original que cada uno creará con las técnicas aprendidas.

 

donald

 

disney

 

Procesos físicos animados
por ordenador.

muelle

fuego

elec

________________________

La Percepción

Sombras

(cc) R. Losada Liste

________________________

 

sandro

 

Principios de la animación:

La animación consiste en una serie de imágenes estáticas que se utilizan para crear la ilusión del movimiento.

Podemos creer que la animación radica en crear o dibujar esas imágenes. En realidad, es el orden de esas imágenes estáticas el que produce el movimiento. La sincronización es lo importante.

Cuando miramos un objeto, el cerebro conserva la imagen de ese objeto durante unos instantes después que el objeto haya desaparecido. Este fenómeno se conoce como persistencia visual, y es éste el que permite que funcionen el cine y la televisión.

Una película consiste en realidad en una serie de fotografías estáticas, igual que un libro que muestra una animación al pasar rápido las páginas.

En una película de dos horas, una persona parpadea unas 3.500 veces de media. ¡ Más de 50 minutos de oscuridad! Pero el cerebro conserva automáticamente la imagen anterior al parpadeo y el movimiento no pierde continuidad.

 

 

 

Ideas básicas sobre animación:

 

Utilizar capas para crear los distintos fotogramas. Es conveniente nombrarlas.

Reutilizar y reciclar. Pequeñas variaciones en distintos símbolos recrean situaciones distintas.

Emplear sombras/luces para crear volumen.

Estirar/Estrujar, observar la relación peso/movimiento y cambiar la forma pero no el volumen de los objetos.

Anticipación para crear la tensión en una acción.

Flexibilidad proporcional a la fuerza original experimentada por el objeto.

Crear continuidad en la escena. Una buena regla a recordar es estudiar los apéndices de los objetos animados (largas orejas, pelo, cola, bigotes, ropa al viento, …).

 

 

Los 12 principios de la Animación 3D (Isaac Kerlow):

  1. ENCOGER Y ESTIRAR
  2. ANTICIPACIÓN
  3. PUESTA EN ESCENA
  4. ACCIÓN DIRECTA Y POSE A POSE
  5. ACCIÓN CONTINUADA Y SUPERPUESTA
  6. FRENADAS Y ARRANCADAS
  7. ARCOS
  8. ACCIÓN SECUNDARIA
  9. SENTIDO DEL TIEMPO
  10. EXAGERACIÓN
  11. MODELADOS Y ESQUELETOS SÓLIDOS
  12. PERSONALIDAD

 

GIF

GIF (Compuserve GIF) es un formato gráfico utilizado ampliamente en la World Wide Web (WWW), tanto para imágenes como para animaciones.

El formato fue creado por CompuServe en 1987 para dotar de un formato de imagen a color para sus áreas de descarga de ficheros, sustituyendo su temprano formato RLE en blanco y negro.


GIF llegó a ser muy popular porque podía usar el algoritmo de compresión LZW (Lempel Ziv Welch) para realizar la compresión de la imagen, que era más eficiente que el algoritmo Run-Lenght Encoding (RLE) usado por los formatos PCX y MacPaint. Por lo tanto, imágenes de gran tamaño podían ser descargadas en un razonable periodo de tiempo, incluso con modems muy lentos.

GIF es un formato sin pérdida de calidad para imágenes con hasta 256 colores, limitados por una paleta restringida a este número de colores. Por ese motivo, con imágenes con más de 256 colores (profundidad de color superior a 8), la imagen debe adaptarse reduciendo sus colores, produciendo la consecuente pérdida de calidad.

   

Ejemplos solo visibles en FireFox 3.0 y Opera 9.5

ff

 

sff

 

apng

mozilla_labs

alchemy

aPNG

Cuando se habla de imágenes animadas enseguida se viene a la mente el formato GIF, un tipo de archivos que cumple con la función de mostrar movimiento pero que tiene limitantes muy grandes, como el hecho de no soportar transparencia en degradados o limitarse a soportar solo 256 colores.

Una muy buena alternativa a este formato es el formato aPNG (Animated Portable Network Graphics) un tipo de archivo que permite crear animación con las ventajas de los archivos PNGs (Soporta transparencia en degradados y profundidad de color en 8 y 24 bits). Pero tiene algunas desventajas que no han ayudado a una rápida aceptación: un alto peso de los archivos, pocas herramientas para su creación y soporte limitado en los navegadores.

En este momento los únicos navegadores que soportan este tipo de animación son: Mozilla Firefox 3, Opera 9.5, KSquirrel 0.7.2 y XnView 1.92. Y puedes ver ejemplos y más información de este tipo de imágenes en el sitio oficial de este formato y en Mozilla Labs.

Algunas herramientas interesantes para trabajar con este formato son: APNG Assembler, una sencilla herramienta con la que puedes crear animaciones unicamente subiendo un archivo zip que contenga los pngs de la secuencia y APNG Edit extension una extesión para Firefox dedicada a editar y crear este tipo de gráficos.

Es un formato que promete mejorar en mucho la calidad de la animación gráfica pero que aun necesita desarrollo para adaptarse a las exigencias actuales (alta calidad con pocos recursos).

 

Paneles que utilizamos en Photoshop para realizar las animaciones

  • Panel de Animación
  • Panel de composición de capas
  • Panel de Guardar para Web y Dispositivos...

item Ver imagen de los paneles

 

 

 

EJERCICIOS: Gif's animados

Banner

Crea un banner con estas características:

  • Tamaño: 468x60 pixeles.
  • Al menos 3 mensajes.
  • Algún efecto de transición, color, luz,...

---

Un banner es un formato publicitario en Internet. Esta forma de publicidad online consiste en incluir una pieza publicitaria dentro de una página web. Prácticamente en la totalidad de los casos, su objetivo es atraer tráfico hacia el sitio web del anunciante que paga por su inclusión.

Los banners se crean a partir de imágenes (GIF, JPEG y PNG), o de animaciones creadas a partir de tecnologías como Java, Adobe Shockwave y, fundamentalmente, Flash, diseñadas con la intención de atraer la atención, resultar notorias y comunicar el mensaje deseado. El formato clásico de banner es horizontal y mide 468x60 píxeles

banner

Emoticono

Crea un emoticono con estas características:

  • Tamaño: 300x300 pixeles.
  • Al menos animar dos de sus partes.
  • Algún efecto: sombra, color, luz,...

---

Un emoticono es una secuencia de caracteres ASCII que, en un principio, representaba una cara humana y expresaba una emoción. Pero, posteriormente, fueron creándose otros emoticonos con significados muy diversos. Los emoticonos que expresan alegría u otras emociones positivas se clasifican normalmente como smileys.
Los emoticonos se han ido desarrollando a lo largo de los años, principalmente, para imitar las expresiones faciales y las emociones, para vencer las limitaciones de tener que comunicarse sólo en forma de texto y porque sirven como abreviaturas.

Un smiley (del inglés to smile, 'sonreír') es una representación esquemática de una cara sonriente, la mayoría de las veces de color amarillo, con dos puntos negros como ojos y medio círculo mostrando una expresion de completa y plena felicidad. A veces se usa «smiley» como sinónimo de emoticono, si bien no lo es (no todos los emoticonos son smileys).

Gif animado: "Fuego de dragón"

Partiendo de la "imagen base" debes ralizar una animación como la que se muestra en el ejemplo con estas características:

  • Compuesta de al menos 12 fotogramas.
  • Sólo el fuego del dragón tendrá color.
  • La imagen final (.gif) animada tendrá un tamaño de 400 px de ancho y alto proporcional.

Imagen base

dragon

Gif animado: "Camión"

Partiendo de una imagen base de cualquier automovil debes realizar una animación semejante a la del ejemplo con estas características:

  • Se encenderán las luces de los faros.
  • Los intermitentes o antinieblas deben parpadear.
  • Debe simularse el motor encendido.
  • La imagen final (.gif) animada tendrá un tamaño de 400 px de ancho y alto proporcional.
camion

Gif animado: "Lluvia"

Partiendo de la "imagen base" debes ralizar una animación como la que se muestra en el ejemplo.

Imagen base

item PROCEDIMIENTO

lluvia

Gif animado: "Cámara"

Debes realizar una animación como la que se muestra en el ejemplo. Tendrá 14 fotogramas.

Gif animado: "Sombra y perspectiva"

Debes realizar una animación como la que se muestra en el ejemplo. Como ayuda puedes leer los link de R. Losada colocados en la parte superior de esta página.

sombras

Gif animado: "Mecanismos físicos"

Debes realizar una animación semejante a alguno de los mecanismos físicos que aparecen en la página

plano