Cómo hacer un GIF en PhotoShop a partir de 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 imágenes 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 prácticamente cualquier cosa que 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, por lo que puede encontrar que tener Photoshop es de 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 el fondo de una sección o módulo.

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> Fotogramas 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 requerir un poco de prueba y error hasta que tenga el flujo correcto. Por ejemplo, el metraje que tiene cambios pequeños o lentos tendrá muchos fotogramas que se verán casi exactamente iguales. Por otro lado, si el metraje es rápido con muchos cambios visuales, si elimina demasiados fotogramas, puede parecer nervioso.

Para este tutorial, elegimos 'De principio a fin' y 'Limitar a cada 3 fotogramas'. Asegúrese de que se haga clic en "Crear animación de fotograma".

Hacer ajustes al metraje

Este es el momento perfecto para realizar cualquier tipo de ajuste que desee en el metraje de vídeo, 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 en diferentes capas creará todo tipo de efectos diferentes en 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.

Cómo recortar todas las capas a la vez

Seleccione todas las capas haciendo clic en la Capa 1 y luego, mientras presiona Mayús, haga clic en la capa superior. Seleccione la herramienta Marco rectangular y seleccione el área 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.

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 utilizar cualquiera de las herramientas de ajustes y aplicarlas a las capas de su GIF. Por ejemplo, puede cambiar los colores a blanco y negro o darle un efecto de duotono. Usamos el ajuste de 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 interponga con el resto del contenido. Puede utilizar cualquier tinte de color que desee y ajustar los diferentes niveles de color de la forma que desee. Solo un consejo, si agrega ajustes de color, su archivo final será más grande que si no lo hace.

Este GIF descargado 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.

Utilice la línea de tiempo para editar los fotogramas

Con la ventana de la línea de tiempo, puede editar los fotogramas para reducir el tamaño final del archivo GIF. Por ejemplo, fotogramas 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 'Para siempre' 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 fotogramas y con un ajuste de color, el archivo final es la friolera 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.

Cómo eliminar marcos para reducir el tamaño del archivo GIF

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

Para eliminar fotogramas, 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 fotogramas haciendo clic en uno y luego en los fotogramas antes o después presionando Mayús + clic. Si no desea cortar el metraje desde el principio o el final del GIF, pero desea acortarlo, elimine los fotogramas alternativos presionando uno y luego presione la tecla Comando + clic en cada dos fotogramas.

¡Nos encanta cómo cuando crea un GIF en Photoshop con video, puede 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 te da la opción de ralentizar o acelerar el GIF. Cada fotograma de la línea de tiempo tiene un control de velocidad debajo. La medida predeterminada es 'sin demora' o '0', pero puede suceder que el video que usó ya tuviera un ajuste de velocidad. Este es el caso de nuestro video. Si observa la captura de pantalla de arriba donde eliminamos los marcos, puede ver que nuestros marcos tienen un retraso de 0.04 segundos. Cuando obtenemos una vista previa del GIF, parece que se aceleró. No queremos eso.

Seleccionamos todos los fotogramas 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 fotogramas'. En cualquiera de los cuadros, hacemos clic en la pequeña flecha hacia abajo y elegimos 'sin demora'. Esto hará que nuestro GIF fluya de forma natural. Para crear un GIF que parezca que va a cámara lenta, elija cualquier valor por encima de 1 segundo.

Guardar como GIF y optimizar

Cuando todo esté terminado, es hora de guardar el proyecto como 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.

• Reducir el recuento de colores.
• Reducir o eliminar el difuminado.
• Reducir la altura y el ancho.

Para comprobar cómo los ajustes están cambiando su GIF, haga clic en el botón Vista previa. Utilice las pestañas 2-Up y 4-Up para ver las diferentes opciones. Es posible que tenga que retroceder y eliminar más marcos si aún es demasiado grande. Apunta a un tamaño de archivo inferior a 20 MB. Si estaba creando un GIF para una sección de ancho completo, necesitará recortar realmente los marcos para poder obtenerlo en un buen tamaño para la web.

Una buena regla general es que los archivos GIF no superen los 20 MB. Más que eso es demasiado grande. Si puede reducirlo por debajo de 10 MB sin perder demasiada calidad, entonces tiene un ganador.

Terminamos eliminando más fotogramas de nuestro GIF para reducirlo a 18 MB. Luego lo pasamos por GIFCompressor y lo redujimos un 55%. GIFCompressor es una herramienta en línea gratuita que reduce el tamaño de 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 imágenes de video. La única advertencia es la duración del video con el que comienzas y la cantidad de fotogramas que eliminas. Si no elimina lo suficiente, el archivo final será realmente enorme y eso no será de ninguna ayuda. Es posible que se necesiten algunas pruebas 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 dominará y será más simple cada vez.

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