MARVEL MX

Casi recién iniciado este blog alguien me puso en sus comentarios que si podía poner un tipo tutorial de cómo hice los GIFS Animados. Se que me tarde un poco pero ahí les va la forma en como los hice.

Primero que nada si es como que un poco necesario saber como funcionan las capas si no saben no hay problema, voy a tratar de poner el ejemplo lo más claro posible para que sea entendible.

Primero hay que tener Image Ready, hay otros, pero este es el que se me facilita más. Este programita viene junto con Photoshop así que si tienen este es muy probable que tengan Image Ready.

Primero buscamos y abrimos el mencionado Image Ready.

La barra de abajo es donde se podría decir que se hace la interpolación de imágenes que da como resultado el gif animado.

La que tenemos del lado derecho es donde se ven las distintas capas que estas ocupando para generar el gif animado.

Estas son las dos que nos importan más.

Nos vamos a archivo, después nuevo y nos va a salir un cuadro donde asignemos la medida de imágenes en píxeles, denle una medida por ahí de 350x350 pixeles.

Nos va a generar un espacio en blanco en el cual vamos a hacer nuestro gif, en la barra de animación (la de abajo nos va a salir el primer cuadro que es el fondo en blanco y el la barra donde se muestran las capas va salir el espacio en blanco denominado como fondo.

Imagen generada.

Barra de animación.

Barra de capa.

Ahora en la barra de herramientas nos vamos a la opción capa, de ahí nos vamos a nueva y de ahí a capa, va a salir un cuadro donde te va decir que nombre le quieres poner a la capa, en este caso le deje el nombre de Capa 1. Así va a lucir la barra de capa.

La barra de capa que es la que nos importa ahorita lucirá así, con la figura ya hecha.

Ahora vamos a generar otra capa igual como lo hicimos antes y ahí vamos a poner otra figura que quede paralela con la anterior, pero de distinto color. Tal como se ve en la imagen.

Imagen original Barra de capa

Aquí viene lo importante de cómo se hace el gif, En la barra de capa se ve un ojo en el lado izquierdo de cada capa. Si el ojo esta eso significa que la capa esta visible y si no esta pues no.

En la barra de animación sigue habiendo solo un cuadro donde se ven las dos figuras que hicimos. Lo que vamos hacer es darle clic al ojo que esta en la capa 2, esto provocara que solo se vea lo del fondo y lo que esta en la capa uno.

Barra de animación

Barra de capa, con lo efectuado anteriormente.

Ahora nos vamos a la barra de animación y nos vamos a la parte inferior al icono que esta a lado del bote de basura que es duplicar cuadro actual. Lo que va a ser es hacer otro cuadro como el primero. Esta acción lucirá así.

Ya que estamos en ese segundo cuadro repetimos lo mismo de dar click en el ojo, pero esta vez en la capa de abajo, donde esta el circulo rojo, esto es para que no se vea esa capa. Después damos click en donde habíamos quitado el ojo, esto es para regresarlo ahí y que se vea esa capa. Como lo ilustra la imagen.

Barra de capa con lo aplicado anteriormente.

La barra de animación va a lucir de la siguiente manera.

Para modificar el tiempo en debe de estar la interpolación, nos vamos a la flecha que esta a lado del letrero donde dice 0 seg. Y ahí te va a dar las opciones del tiempo. En este caso va a estar en 1 segundo ambos cuadros para que se pueda ver la interpolación y no pase muy rápido.

Ya teniendo terminado lo anterior es cuestión de apretar el botón de Play que esta en la barra de animación y debe empezar a generar la animación.

Haciendo esto se debe ver la animación de la siguiente manera.

¿Cómo guardar el GIF animado?

De preferencia primero guarden una copia en formato PSD, por si piensan realizar futuras modificaciones.

Para guardar ahora si en GIF, nos vamos a Archivo → Guardar optimizado como… (Ctrl-Shift-Alt-S). Lo va a guardar con formato .GIF y eso es todo lo necesario para saber hacer GIFS animados, ya sabiendo esto puedes ir probando y haciendo cosas más complejas.