Crear gif en Photoshop

Hoy aprenderemos cómo hacer un gif en photoshop de nuestro proceso de dibujo o una animación propiamente dicha.

 

crear gif photoshop

Necesitamos para esto Photoshop, obviamente.

Esto no necesariamente tenemos que hacerlo con la tableta digitalizadora. Incluso podemos hacer los dibujos en tradicional e ir escaneándolos para luego crear la secuencia.

 

Paso 1. Preparamos nuestro espacio de trabajo.

Para empezar a crear un gif en Photoshop iremos al menú “ventana” y seleccionaremos la opción “línea de tiempo”, en algunas versiones, o “animación” en otras. En mi caso que utilizo Photoshop CS5 aparece como “animación”.

Nos aparecerá una nueva área de trabajo en la parte inferior del programa

Paso 2. Creamos la línea de tiempo.

Ahora en nuestra área de capas, que en mi caso tengo a la derecha, crearemos las capas con todos los pasos de nuestro proceso o los cuadros de nuestra animación.

Esto lo realizaremos abriendo cada una de las imágenes dentro de Photoshop.

Como ves, se ha creado una capa nueva y además se ha agregado un cuadro de animación en el área de animación ¡Genial!

Ahora hacemos esto con cada uno de los dibujos desde “Archivo/Colocar…”

No olvides darle “enter” a cada imagen antes de abrir la siguiente para que se fije a la capa.

¡Pero ahora no se crean nuevos cuadros de animación! ¿Qué hago?

Tranquilos, en un momento veremos eso.

 

Paso 3. Creamos los cuadros.

Ahora crearemos los frames de nuestra animación. En la parte inferior de nuestra línea de tiempo veremos el ícono de duplicar cuadro, es el mismo que se usa cuando queremos agregar una capa nueva en el área de capas.

Crearemos tantos cuadros como capas hayamos creado.

 

Paso 4. Asignamos cada cuadro a una capa.

Como te habrás dado cuenta todos los cuadros muestran la misma imagen. Para que nos anime paso por paso deberemos posicionarnos en el primer cuadro de la línea de tiempo. Luego desmarcar la visibilidad de todas las capas excepto la primera.

La manera más fácil para no hacer esto de desmarcar la visibilidad capa por capa es ir a la capa que nos interesa que se vea, en la parte donde está el ojo y con click derecho seleccionar “mostrar ésta capa”. Resumiendo: seleccionas es cuadro que vas a modificar, seleccionas la capa, click derecho al ojito, mostrar esta capa. Así quedara asociada cada capa a un cuadro.

 

Paso 5. Probamos la animación.

Una vez que cada capa está asociada a un cuadro viene lo interesante. Si le das click al play que hay debajo a la izquierda puedes ver la animación. Tal vez vaya demasiado rápido.

Paso 6. ¿Se puede hacer más lento el gif?

Vamos a regular la velocidad a la que nuestros cuadros se van a mostrar. Yo recomendaría que fuera entre 0.2 y 0.5 segundos. A menos se verá demasiado rápido para apreciarlo y a más velocidad será demasiado lento.

Esto lo vamos a hace seleccionando el primer frame, luego ir hasta el último presionar “mayúscula” (shift) y click en el último cuadro. Así quedaran seleccionados todos los cuadros.

Veremos en cualquiera de los frames que debajo nos muestra un texto que dice “0 seg”. Al hacerle click seleccionamos el tiempo que queremos.

 

 

Recomiendo que si haces un gif animado de un proceso como en el de las imágenes que te muestro más arriba el último frame lo dejes más segundos.

 

Paso 7. Exportar nuestra animación.

Vamos al menú “Archivo” y luego a “Guardar para web y dispositivos…”.

como crear un gif animado

Se nos abrirá una nueva ventana. Aquí lo importante es que esté seleccionado “GIF” y que esté a la mayor cantidad de colores posible. En mi caso 256. El resto de las opciones las dejamos por defecto.

animación paso a paso en photoshop

Hacemos click en “guardar”, ponemos nombre a nuestra animación y listo. Nuestro GIF está listo para reproducir.

 

Paso 8. Utilizarlas en nuestras redes sociales.

 

Supongo que ahora querrás subir esto a tus redes sociales. Primero tendrás que subirlo a alguna plataforma que te permita reproducir GIF como Gify. Yo en lo personal subo esto a subefotos.com

Lo que hago es, luego de subir la imagen como siempre, click derecho en la imagen, “abrir imagen en una nueva pestaña”.

Esa dirección que aparece en la nueva pestaña es la que vamos a pegar en Facebook por ejemplo.

Y así se ve en las redes sociales.

 

 

Aquí te muestro que esto mismo puedes utilizarlo para hacer una animación propiamente dicha.

animación gif

Esta técnica de animación es llamada rotoscopia. Consiste en “calcar” una filmación real y unir los dibujos cuadro a cuadro para generar la ilusión de movimiento.

 

También puedes hacer esto con tus procesos de dibujo tradicional. Solo tienes que detenerte cada tanto y escanear el dibujo en el momento y luego unir todos los cuadros.

proceso animado gif tradicional

 

 

 

También te puede interesar

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *