Banner Animado Explicación

Buenas, en esta entrada voy a realizar una explicación sobre cómo funciona un gif animado. Nos ayudaremos de Photoshop para explicar esto. En mi caso usaré la silueta de una bailarina. Sería mejor que tuvierais una imagen vectorizada, ya que estas imágenes no pierden calidad al aumentarlas.

Cabe destacar que photoshop reconoce estas imágenes, y te lo indica de esta manera.

Ese símbolo significa que es un objeto inteligente. Photoshop reconoce que es un vector, esto se puede ''transformar'' a una imágen de mapa de bits: haciendo Clik Derecho o Cmd + Click en dicha capa con el objeto inteligente y seleccionando la opción Rasterizar Capa. Al hacer esto, la imagen si se agranda, irá perdiendo calidad, por lo que es preferible usar vectores.

Bueno, una vez explicado este detallito, vamos con lo que es la bailarina y cómo animarla.

LÍNEA DE TIEMPO

Antes de nada, necesitamos la Línea de Tiempo de Photoshop. Probablemente esté ya sacada en vuestro Photoshop, pero si no está, vamos a Ventana > Línea de Tiempo, y os saldrá.

En esta línea tenemos distintas opciones. Las cuáles iré explicando para qué sirven.

· Convertir en Animación de Cuadros/Línea de Tiempo de Vídeo. Esta primera opción lo que hace, es cambiar el aspecto de nuestra línea de tiempo. Ya que tenemos dos formas de animar nuestra bailarina. La que muestro, es la Animación en Cuadros. Asi que hoy explicaré esta línea de tiempo.

· Repeticiones. Donde pone ''Una vez'', es el número de veces que nuestra animación se repetirá. Podemos cambiarlo a un número que queramos, o también para que no acabe nunca, y sea una animación infinita.

· Opciones de Reproducción. Son las típicas opciones para reproducir lo que estamos haciendo. Tenemos la vuelta al principio, retroceder un cuadro, el play, y avanzar un cuadro.

· Intercalar. Esto lo que hace es reducir el tiempo necesario para crear efectos de animación. Se usa para añadir o modificar automáticamente una serie de cuadros entre dos ya existentes, variando las propiedades de las capas.

· Añadir Cuadro. Hace digno su nombre. Añade un cuadro. Aunque también sirve para duplicar varios cuadros seleccionados.

· Eliminar. Permite eliminar el cuadro o los cuadros eliminados.

Estas son las principales herramientas de la Línea de Tiempo con Cuadros. Sabemos qué hacen, pero debemos saber usarlas. Así que ahora sí, vamos a explicar cómo hacer girar a esta bailarina.

ANIMAR (cuadros)

La animación que vamos a realizar va a tener muy pocos cuadros, por lo que no se verá fluida. Para que sea fluida, necesitaríamos muchísimos cuadros.

Teniendo ya las capas y la línea de tiempo, seleccionamos la capa del objeto que queremos animar, y le haremos click a la opción de Añadir Cuadro. Tenemos el primer Cuadro (podríamos llamarlo fotograma también).

A continuación deberemos duplicar nuestra capa actual. ¿Y por qué debemos hacer esto? Fácil. Debemos editar a la bailarina, para que parezca que esté girando. Pero necesitamos a la primera bailarina de todos los cuadros. También necesitamos a la segunda, a la tercera, a la cuarta.... Photoshop lo que hará será ir haciendo los cuadros con las capas que se estén viendo. 

· Si realizamos el GIF con únicamente una capa, la animación simplemente será esa capa, aunque hayamos hecho los cuadros editando a la bailarina en cada uno. Es decir, será un cuadro igual en los - por ejemplo - 15 que hayamos hecho. Y no, no estará animado ni un pelín.

Duplicamos a la bailarina, y a esta nueva copia, la modificamos, estrechándola, para que parezca que va girando. Es importante tener la bailarina de la capa inferior oculta. Y creamos otro cuadro.

De este modo, hacemos varias bailarinas, estrechándolas cada vez más hasta llegado un punto en que deberemos volterla horizontalmente, y en vez de estrecharla, ensancharla hasta volver a la postura original. Os dejo una serie de capturas de cómo he ido modificando mi bailarina. Recordad siempre ir duplicando la bailarina actual, y ocultar las demás a la hora de crear el cuadro.

Una vez tenemos hecho hasta aquí, podemos darle al Play de la Línea de Tiempo para visualizarlo. He de decir que yo he cambiado la duración de cada cuadro de 1 segundo a 0,2 segundos.

Ya tendríamos la animación por cuadros creada. Para exportarla, nos dirigimos a Archivo > Exportar... > Guardar para la Web. Saldrá una ventana.

quí podemos toquetear algunas cositas, como el tamaño de nuestro GIF, sus transparencias (en este caso no tiene), y cuántos colores tendrá. También podemos previsualizar cómo se vería nGuardar...''y se nos guardará en formato GIF.
nuestro GIF en la web. Al previsualizar, veremos los datos de nuestra bailarina así como si código HTML, el cuál nos puede servir para, por ejemplo, subirlo a Blogger. Sólo nos quedaría darle a ''Guardar... Sólo imágenes''
Y ya tendríamos nuestro GIF. Así que con esta entrada, me despido, nos veremos en otra entrada próxima.

¡Un saludito :P!