Cursos Domestika
Las mejores tabletas graficas
banner tienda ropa
Creado: 08-08-2016
Actualizado: 31-03-2018 Escrito por 
Valora este artículo
(3 votos)

Cómo hacer un gif animado en photoshop (tutorial)

Si alguna vez has querido aprender cómo hacer un gif en photoshop, hoy estás de suerte. Un gif es un formato de imágenes que permite crear imágenes en movimiento o animaciones generalmente de breve duración. Se usa sobretodo para la creación de banners publicitarios. Últimamente también se emplean para crear animaciones de personajes, de fotografías o cualquier otra cosa que a una mente creativa se le ocurra. Hay gif muy sencillos y otros que son extremendamente complicados en los que se han invertido horas y horas de trabajo.

Al ser tan populares ahora mismo, hay muchos ilustradores, diseñadores y artistas en general que se dedican exclusivamente a esto. Si siempre has querido saber cómo hacer un gif en photoshop, hoy te traigo un pequeño tutorial para novatos (abajo del artículo tienes un videotutorial). En este tutorial te voy a mostrar cómo hacer un gif animado en photoshop a partir de unos gráficos vectoriales. Yo he creado un pequeño personaje al que voy a dotar de un movimiento simple. Espero que te sea de utilidad.

Cómo crear imágenes gif en photoshop

Vamos a empezar este tutorial sobre cómo hacer un gif animado en photoshop explicando lo que vamos a necesitar. Debes poseer una serie de imágenes estáticas que varíen en algún aspecto de una a otra para crear la ilusión de movimiento al crear imágenes gif en photoshop. Esto creo que es algo obvio.

Para este tutorial sobre cómo hacer un gif en photoshop, yo he creado un pequeño personaje a modo de sticker. Se trata de un flan de estilo cartoon con unos grandes ojos y una sonrisa. He ido variando las pupilas y la forma de la boca para conseguir una expresión de sorpresa al crear la imagen gif en photoshop. Es decir, el personaje del flan varía de una expresión neutra (o media sonrisa) a una expresión de sorpresa. Esto lo he conseguido con cinco fotogramas (frames).

Fotogramas de un flan necesarios para hacer un gif animado en photoshop

Una vez tienes tus fotogramas, te voy a enseñar cómo hacer un gif en photoshop. Verás que es un proceso sencillo. Abrimos photoshop e importamos nuestros fotogramas. Cada uno debe estar un una capa distinta dentro del mismo archivo.

Las 5 capas con los 5 fotogramas necesarios para crear un gif animado en photoshop

Vamos a ventana y hacemos clic en la línea de tiempo. Se nos abrirá una pequeña ventana. Seleccionamos “Crear animación de fotogramas” y pulsamos sobre ese botón. Ahora debemos crear tantas capas en este panel como fotogramas tengamos. Yo tengo cinco fotogramas, así que crearé 5 capas. A cada una de estas capas debemos asignarle cada uno de los fotogramas. Esto se hace haciendo visible o invisible las capas en el panel de capas. En la imagen puedes ver como para el fotograma 4, tengo visible sólo la capa 4.

Pulsar en crear animación de fotogramas para empezar a hacer el gif en photoshop
Mostrar u ocultar capas para hacer visibles o invisibles nuestro fotogramas en el panel de creación de animaciones

Para acabar de crear imágenes gif en photoshop debemos ajustar el tiempo que habrá de un fotograma a otro. A tiempos menores más fluidez. Yo voy a poner a todos mis fotogramas, menos al último, un intervalo de 0 segundo. El último tendrá un intervalo un poco mayor.

Ajustar el tiempo de cada uno de los fotogramas para crear una animación de gif fluida

Por último asigna un número de repeticiones. Esto indica cuantas veces se repetirá el la imagen gif antes de parar.

Número de repeticiones que tendrá el gif antes de detenerse

Cómo guardar un gif animado en photoshop

Para terminar de hacer un gif animado en photoshop tenemos que guardarlo. Como su destino va a ser exclusivamente para web nos dirigimos a Archivo y pulsamos en Guardar para Web. Aquí tendremos que seleccionar “Gif” como archivo de salida y podremos ajustar otras opciones. Juega un poco con esto para lograr el efecto deseado. Pulsamos en “Guardar” y ya lo tenemos.

Panel de guardado para establecer las opciones finales de exportación del gif

Cómo hacer un gif en photoshop (videotutorial)

Si quieres ver el ejemplo en vivo de cómo hacer un gif animado en photoshop a partir de unos gráficos vectoriales, he creado un pequeño videotutorial. En él, a parte del proceso de creación de una imagen gif se muestra cómo he hecho el personaje del flan con illustrator. Es un timelapse cortito. Así, a parte de aprender cómo crear imágenes gif, podrás ver parte de mi proceso creativo.

Espero que te haya sido de utilidad este artículo. No olvides comentar, compartir y aprender.

Patrocíname en Patreon

Suscribirse (Pulsa Aquí)

Comparte esto
Publicado en Blog Ilustración

Artículos relacionados

Beatrizxe

Me llamo Beatriz. Soy fundadora y autora de este blog. Me apasiona el mundo de la ilustración y el diseño gráfico y por eso decidí crear esta web. Así puedo conocer gente interesante y ayudar con mis conocimientos a todo aquel que lo desee.

Política de Privacidad

Los datos de carácter personal que nos facilita mediante este formulario serán tratados por Beatriz Rodríguez Flomesta, responsable de este blog. La finalidad es gestionar los comentarios que realizas en este blog. Si no das tus datos, no podrás comentar. La legitimación se realiza a través del consentimiento del interesado. Tus datos los guardará Disqus, mi sistema de comentarios, que está acogido al acuerdo de seguridad EU-US Privacy. Puede ejercitar los derechos de acceso, rectificación, cancelación y oposición en contacto@beatrizxe.com

Más información sobre la política de privacidad

Este sitio usa cookies para mejorar tu experiencia web. Al navegar por esta página aceptas su uso Ver la Política de Cookies