Cómo hacer un GIF en PhotoShop desde un video


Si llegaste aquí preguntándote cómo hacer un GIF con Photoshop, probablemente sea porque el video que subiste a tu sitio web estaba ralentizando el tiempo de carga. Bueno, has venido al lugar correcto. En esta guía, le mostraremos cómo hacer un GIF en Photoshop a partir de secuencias de video. ¡Se verá genial en su sitio y estará mucho más optimizado para la velocidad que un archivo de video!

Con la ayuda de un GIF, puede presentar cualquier tipo de video en un sitio web, en un bucle. Puede ser un clip de material promocional, una grabación de pantalla para un tutorial, o casi cualquier cosa que realmente desee.

Para este tutorial, necesitará algunas secuencias de video y Adobe Photoshop. Si no tiene una suscripción a Photoshop, puede hacer una prueba gratuita, ¡en consecuencia, puede encontrar que Photoshop es una gran ayuda para el diseño web! Si su video es muy largo, es posible que desee cortarlo primero en un editor de video como iMovie o Adobe Premiere. Photoshop también tiene una opción de recorte a medida que importa, pero un editor de video es mejor si el metraje original es extremadamente largo.

Empecemos.

Vista previa del resultado final

Este es el resultado final del GIF que creamos para este tutorial, perfecto para un fondo de sección o módulo.

GIF de una playa con tonalidad azul

Para comenzar, importe el video a Photoshop

Para importar el videoclip a Photoshop, primero debe estar dentro del editor de Photoshop. Desde allí, haga clic en Archivo> Importar> Cuadros de video a capas. Seleccione el video que desea usar y haga clic en abrir.

En el cuadro de diálogo emergente tiene dos opciones; 1. De principio a fin: para usar el video en su totalidad o 2. Solo rango seleccionado: para usar la opción de recorte y usar solo una sección del video.

Debajo de eso, hay una opción para limitar la importación a un número elegido de fotogramas. Seleccione un número pequeño si el video es más corto y un número más grande si el video es más largo. Esto puede llevar algo de prueba y error hasta que tenga el flujo correcto. Por ejemplo, las imágenes que tienen cambios pequeños o lentos tendrán muchos cuadros que se ven casi exactamente iguales. Por otro lado, si el metraje es rápido con muchos cambios visuales, si saca demasiados fotogramas, puede parecer nervioso.

Para este tutorial, elegimos "De principio a fin" y "Limitar a cada 3 cuadros". Asegúrese de hacer clic en "Hacer animación de cuadro".

Captura de pantalla de una acción de Photoshop sobre la importación de un video con marcos como capas para hacer un GIF

Hacer ajustes al material de archivo

Este es el momento perfecto para hacer cualquier tipo de ajuste que desee en su metraje de video, desde el recorte de tamaño hasta el ajuste de los niveles de color. Por ejemplo, puede haber un objeto antiestético en la esquina del video o la altura total del video es demasiado grande para el lugar donde desea colocarlo en el diseño de su sitio web. Alternativamente, si el metraje de video está demasiado saturado, puede usar el panel de ajustes para ajustar la saturación en todas las capas a la vez.

Para los creativos, hacer ajustes a las diferentes capas creará todo tipo de efectos diferentes para su GIF. Lo que no puede hacer es eliminar fondos o usar herramientas que solo funcionan en una capa a la vez.

Consejo profesional: asegúrese de que, sea cual sea el ajuste que haga, haya seleccionado todas las capas.

Captura de pantalla del panel Capas en Photoshop: cómo hacer un GIF con video en Photoshop

Cómo recortar todas las capas a la vez

Seleccione todas las capas haciendo clic en Capa 1 y luego, mientras presiona Mayús, haga clic en la capa superior. Seleccione la herramienta Marco rectangular y seleccione las áreas del video que desea conservar (no lo que desea sacar). Haga clic en Imagen> Recortar y las áreas fuera de la selección desaparecerán. En nuestro video, seleccionamos toda el área de video dejando un poco en la parte superior sin seleccionar. Queremos hacer que todo el video sea menos alto y eliminar el borde blanco del horizonte.

captura de pantalla de una acción de Photoshop: seleccionar y recortar

captura de pantalla de un video recortado en photoshop

Cómo ajustar los colores en el GIF

Con todas las capas seleccionadas, haga clic en la pestaña de ajustes en el menú Paneles. Puede usar cualquiera de las herramientas de ajustes y aplicarlas a las capas en su GIF. Por ejemplo, puede convertir los colores a blanco y negro o darle un efecto duotono. Usamos el ajuste en blanco y negro con un tinte para hacer que el color de nuestro video sea un poco más artístico. Esto es perfecto para un fondo que no se interpondrá en el resto del contenido. Puede usar cualquier tinte de color que desee y ajustar los diferentes niveles de color de la manera que desee. Solo un consejo: si agrega ajustes de color, su archivo final será más grande que si no lo hace.

Este GIF se descargó a 211 MB sin los filtros de color y a 312 MB con los ajustes de color. Si realmente desea los ajustes de color, debe reducir los marcos para hacer que el archivo final sea más pequeño. Más sobre eso en la siguiente sección.

Captura de pantalla de tinte plus en blanco y negro en video

Use la línea de tiempo para editar los marcos

Con la ventana de la línea de tiempo, puede editar los marcos para disminuir el tamaño final del archivo GIF. Por ejemplo, cuadros adicionales al final del clip que parecen retrasarse o crear una sección estática. ¡Cuantos más marcos puedas sacar, mejor! Pero tenga cuidado de eliminar demasiados fotogramas y el efecto final se vuelve nervioso, tómese su tiempo para comprobar cómo se ve el bucle después de eliminar algunos fotogramas.

Para acceder a la ventana de la línea de tiempo y ver cómo funciona el GIF en un bucle, haga clic en Ventana> Línea de tiempo. Se abrirá un panel horizontal largo en la sección inferior de la pantalla. En la esquina inferior izquierda, hay algunos controles. Elija la opción de bucle como "Forever" y presione el botón de reproducción para ver cómo se ve el GIF. En nuestro caso, nuestro GIF se ve bastante bien pero aún es demasiado largo. Con más de 200 cuadros y con un ajuste de color, el archivo final es de 312 mB. Puede verificar el tamaño de su archivo final siguiendo los pasos en la sección "Guardar como GIF" a continuación. Después de echar un vistazo, simplemente presione cancelar en lugar de guardar. También podrá disminuir el tamaño del archivo con las opciones Exportar para Web.

captura de pantalla de una acción de Photoshop para abrir la ventana de la línea de tiempo

Cómo eliminar marcos para hacer que el tamaño del archivo GIF sea más pequeño

Para hacer nuestro GIF mucho más pequeño, sacamos los últimos 200 cuadros. El video completo tiene una sección donde la cámara del dron gira y gira hacia el parque detrás de la playa. No lo necesitábamos. Ahora nuestro GIF pesa 160 MB. Aún bastante grande. No sacamos más cuadros porque se pondrá nervioso, por lo que lo dejamos como está para optimizarlo más tarde con las opciones de "Guardar para Web".

Para eliminar marcos, puede seleccionar uno y presionar el icono de la papelera que se encuentra debajo de las funciones de reproducción de la ventana de la línea de tiempo. Del mismo modo, puede seleccionar un grupo consecutivo de cuadros haciendo clic en uno y luego cuadros antes o después presionando shift + clic. Si no desea cortar el metraje desde el principio o el final del GIF pero desea acortarlo, elimine los cuadros alternativos presionando uno y luego presione Comando + clic en cada dos cuadros.

captura de pantalla de la ventana de línea de tiempo en photoshop

¡Nos encanta cómo cuando haces un GIF en Photoshop con video, puedes cortar secciones del metraje tanto en la importación como después! Muy practico.

Cómo cambiar la velocidad del GIF

La ventana de la línea de tiempo también le ofrece la opción de ralentizar o acelerar el GIF. Cada cuadro en la línea de tiempo tiene un control de velocidad debajo. La medición predeterminada es "sin demora" o "0", pero puede suceder que el video que utilizó ya tenga un ajuste de velocidad. Este es el caso con nuestro video. Si mira la captura de pantalla anterior donde eliminamos cuadros, puede ver que nuestros cuadros tienen un retraso de 0.04 segundos. Cuando previsualizamos el GIF, parece que está acelerado. No queremos eso.

Seleccionamos todos los cuadros en la línea de tiempo haciendo clic en las tres líneas en la esquina superior izquierda de la ventana de la línea de tiempo y haciendo clic en 'Seleccionar todos los cuadros'. En cualquiera de los cuadros, hacemos clic en la pequeña flecha hacia abajo y elegimos 'sin demora . 'Esto hará que nuestro GIF fluya naturalmente. Para crear un GIF que parezca que va en cámara lenta, elija cualquier valor superior a 1 segundo.

captura de pantalla de una acción de Photoshop: uso de la línea de tiempo para controlar la velocidad de un GIF

Guardar como GIF y optimizar

Cuando todo haya terminado, es hora de guardar el proyecto como un GIF. Haga clic en Archivo> Exportar> Guardar para Web (heredado) y elija la opción GIF en el cuadro de diálogo emergente. Verifique el tamaño del archivo y considere su salida. Hay algunas cosas que puede hacer para reducir el tamaño del archivo.

  • Reduce el recuento de colores.
  • Reduzca o elimine el tramado.
  • Reducir la altura y el ancho.

Para verificar cómo los ajustes están cambiando su GIF, haga clic en el botón Vista previa. Use las pestañas 2 arriba y 4 arriba para ver las diferentes opciones. Es posible que deba volver y eliminar más cuadros si aún es demasiado grande. Apunte a un tamaño de archivo inferior a 20 MB. Si estaba creando un GIF para una sección de ancho completo, necesitará realmente reducir los marcos para poder obtener un buen tamaño para la web.

Captura de pantalla de la opción Guardar para web 4-up

Una buena regla general es mantener sus archivos GIF no más grandes que alrededor de 20 MB. Más que eso es demasiado grande. Si puede reducirlo a menos de 10 MB sin perder demasiada calidad, entonces tiene un ganador.

Terminamos eliminando más cuadros de nuestro GIF para reducirlo a 18 MB. Luego lo pasamos GIFCompressor, y lo redujo un 55%. GIFCompressor es una herramienta en línea gratuita que reduce el tamaño del GIF sin perder calidad. Puede cargar un GIF de hasta 50 MB de tamaño.

Conclusión

Como puede ver, es bastante fácil hacer un GIF en Photoshop a partir de secuencias de video. La única advertencia es la duración del video con el que comienza y cuántos fotogramas elimina. Si no elimina lo suficiente, el archivo final será realmente enorme, y eso no será de ninguna ayuda. Puede tomar algunas ejecuciones de prueba para finalmente obtener un GIF que se vea exactamente como lo desea. Si está creando GIF de capturas de pantalla para tutoriales, como en esta guía, lo entenderá y será más simple cada vez.

Imagen destacada a través de emojoez / shutterstock.com