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 crear 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 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 tanto, ¡podría descubrir 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 al importar, pero un editor de video es mejor si el metraje original es extremadamente largo.
Empecemos.
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 clip de video a Photoshop, primero debe estar dentro del editor de Photoshop. Desde allí, haz 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 tomar 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 material de archivo es rápido con muchos cambios visuales, si elimina demasiados fotogramas, puede parecer irregular.
Para este tutorial, elegimos ‘Desde el principio hasta el final’ y ‘Limitar a cada 3 fotogramas’. Asegúrese de hacer clic en ‘Crear animación de cuadro’.
Hacer ajustes al material de archivo
Este es el momento perfecto para realizar cualquier tipo de ajuste que desee en sus secuencias de video, desde recortar el tamaño hasta ajustar 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, independientemente del 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 la tecla 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 eliminar). Haz 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 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 usar cualquiera de las herramientas de ajuste y aplicarlas a las capas en su GIF. Por ejemplo, puedes cambiar los colores a blanco y negro o darle un efecto de duotono. Usamos el ajuste de blanco y negro con un matiz para hacer que el color de nuestro video sea un poco más artístico. Esto es perfecto para un fondo que no interfiere con el resto del contenido. Puede usar 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 se descargó a 211 MB sin los filtros de color ya 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.
Use la línea de tiempo para editar los marcos
Con la ventana de la línea de tiempo, puede editar los cuadros para disminuir el tamaño final del archivo GIF. Por ejemplo, fotogramas adicionales al final del clip que parecen retrasarse o crean una sección estática. ¡Cuantos más marcos puedas sacar, mejor! Pero tenga cuidado si elimina demasiados fotogramas y el efecto final se vuelve irregular, 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 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 que nuestro GIF sea mucho más pequeño, eliminamos 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 necesitábamos. 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 ‘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. De manera similar, puede seleccionar un grupo consecutivo de fotogramas haciendo clic en uno y luego en los fotogramas anteriores o posteriores 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 comando+clic cada otro fotograma.
¡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! Tan práctico.
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 cuadro en 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 usaste ya tenga un ajuste de velocidad. Este es el caso de nuestro vídeo. Si observa la captura de pantalla anterior donde eliminamos marcos, puede ver que nuestros marcos tienen un retraso de 0,04 segundos. Cuando vemos una vista previa del GIF, parece que está acelerado. 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 en 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 número 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-Up y 4-Up para ver diferentes opciones. Es posible que deba volver atrás y eliminar más marcos 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á reducir los marcos para poder obtener un buen tamaño para la web.
Una buena regla general es que sus 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 comienza y cuántos cuadros elimina. Si no elimina lo suficiente, el archivo final será verdaderamente enorme, y eso no será de ninguna ayuda. Es posible que se necesiten algunas pruebas para finalmente obtener un GIF con el aspecto que desea. Si está creando GIF de capturas de pantalla para tutoriales, como en esta guía, lo entenderá y será cada vez más simple.
Imagen destacada vía emojoez / shutterstock.com