Muchos de vosotros me habéis preguntado recientemente cómo se hacen los GIFs que aparecen en nuestros artículos. Pues siento deciros que… ¡Aquí tenéis el tutorial!

Os aseguro que en un par de minutos aprenderéis cómo se hace. Paso a paso, rápido y sencillo, ¿qué más se puede pedir?

¿QUÉ ES UN GIF?

Comencemos con un poco de teoría. Un GIF (Graphics Interchange Format) no es más que un vídeo o una serie de imágenes consecutivas que se repiten de forma infinita, dando lugar a un archivo de video animado sin sonido, cuyo tamaño es considerablemente menor al de otros tipos de archivos (JPG, PNG, AVI, MP4…).

PHOTOSHOP, NUESTRO FIEL ALIADO…

El programa que vamos a utilizar en este caso es Photoshop. También he probado otros editores multimedia como Filmora, Movie Maker, Sony Vega… Pero al final resulta más complicado y en algunas ocasiones quedan con cierto lag, por lo que os recomiendo usar este.

Voy a tomar como ejemplo un GIF publicado en nuestro artículo “UNA SENTADILLA PARA CADA DÍA DEL MES (1/4): NIVEL PRINCIPIANTE”, el cual te invito a echarle un vistazo si todavía no lo has hecho.

Dicho esto, ¡ve abriendo Photoshop y pongámonos manos a la obra!

ABRIR VARIAS IMÁGENES EN UN DOCUMENTO DE PHOTOSHOP

Para empezar, cargamos las imágenes que queramos que compongan el GIF. En este caso serán 3 fotos ejecutando una sentadilla profunda: la primera en la posición de partida (1), la segunda a mitad del recorrido (2) y, por último, en la posición final (3).

Te recomiendo enumerarlas o ponerles un nombre para que no te líes cuando vayas a ordenarlas.

Si abres las imágenes una por una, te irán saliendo en ventanas diferentes y eso no es lo que queremos… Hay varias formas de subir las imágenes y que te salgan en la misma ventana, en este caso nos iremos a “Archivo” > “Secuencias de comandos” > “Cargar archivos en pila”.

Haciendo esto, te aparecerá la opción de seleccionar múltiples imágenes para poder trabajar con ellas en una misma pantalla (mismo panel de capas).

Si quisieras añadir otra imagen porque se te ha olvidado añadirla en el paso anterior, también puedes hacerlo en “Archivo” > “Colocar elemento incrustado”.

ACTIVAR LA “LÍNEA DE TIEMPO” EN PHOTOSHOP

Una vez hecho esto, tendremos que activar la línea de tiempo. Para ello, tendremos que irnos a “Ventana” > “Línea de tiempo”.

En la parte inferior de la pantalla te aparecerá una barra en la que deberás seleccionar la opción “Crear animación de cuadros”, de esta forma, podrás ir colocando las fotos en el orden que quieras que aparezcan.

Simplemente debes ir añadiendo cuadros con el icono “+”, activar la visibilidad de la capa que quieras ver dándole al icono del ojo “👁” y apagando las demás que no quieras que aparezcan.

Cuando lo tengas todo organizado, selecciona los cuadros e indica la duración de cada clip, en mi caso 0,5 segundos. ¡No olvides seleccionar “Infinito” en la opción de reproducción para que se reproduzca indefinidamente!

GIF 4

GIF CON EFECTO DE IDA Y VUELTA

Si estás prestando atención, te habrás dado cuenta de que he dicho que iba a utilizar 3 fotografías, pero en la línea de tiempo aparece una más. ¿Por qué? Pues es muy simple, te lo explico rápidamente.

Si solo hubiese puesto las 3 fotos (una vez cada una), al final habría un salto desde la posición agachado y de pie. Para hacer una transición mas suave y agradable, he colocado al final el cuadro de la posición intermedia. De este modo el movimiento se ve más fluido.

Dicho de otra forma, si quisieras hacer un GIF con efecto de ida y vuelta de 5 imágenes, las deberías colocar siguiendo el patrón: 1, 2, 3, 4, 5, 4, 3, 2. Así se enlazaría de nuevo con la primera en bucle de una forma mucho más limpia.

EXPORTAR GIF EN PHOTOSHOP

Y bueno llegados a este punto, solo nos quedaría exportar nuestro GIF. Para ello iremos a “Archivo” > “Exportar” > “Guardar para Web (heredado)”.

Se nos abrirá una pantalla en la que podremos elegir algunos ajustes relativos a la calidad, tamaño de imagen…

¡Asegúrate de que has seleccionado el formato GIF, de no ser así, el archivo no tendrá las propiedades que te comentaba al principio!

Te recomiendo que el tamaño del GIF no supere los 400 pixeles (en este caso 300 x 400), de lo contrario, el peso del archivo aumentará demasiado haciendo que tarde en cargar si lo colocas en un sitio web, por ejemplo.

En cuanto a la calidad, reducir el numero de colores presentes en las imágenes es otro factor clave. Por lo general no es necesario, pero si ves que el tamaño del archivo es demasiado grande, puedes probar a reducir este valor (en este caso se encuentra el valor por defecto de 256 colores).

Dicho esto, dale a “Guardar” y ¡LISTO!

Ya tienes un GIF bien facherito para tu poner en tu página web, WhatsApp… lo que te de la gana.

¿Te ha gustado el artículo?, ¿quieres que publiquemos más tutoriales de Photoshop u otros programas? Deja tu comentario aquí abajo, en nuestras redes sociales o si lo prefieres coméntanoslo por privado en nuestro formulario de contacto.

¡Ayúdanos a seguir creciendo compartiendo este artículo en redes sociales!

Muchas gracias por ‘Buscar Esto’


0 comentarios

Deja una respuesta

Marcador de posición del avatar

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