Compresión. GIFS como un experto

1. ¿Qué es un buen GIF?: Oye, soy Jake Bartlett y esto está comprimiendo GIFS como un jefe. En esta clase rápida, te voy a mostrar mis tres mejores formas de comprimir GIFS para compartir en internet. Primera parte, GIF o JIF. Sólo saquemos esto del camino. El inventor del GIF dice JIF. La mayoría del planeta dice GIF. Yo estoy incluido en el campamento GIF así que así es como lo voy a pronunciar. Segunda parte, ¿qué funciona mejor? Los GIFS definitivamente tienen un uso muy específico. Para saber cuándo usar un GIF sobre un video. Sólo recuerda las tres S; cortas, simples y pequeñas. Los GIFS necesitan ser cortos y cuanto más largos sean, mayor será el tamaño del archivo. El GIFS debe ser sencillo. Mucho GIFS funcionan como bucles. Si estás renderizando un montón de gráficos 3D súper complicados o estás incorporando fotos o videos a tu trabajo, lo más probable es que un GIF no sea tu mejor apuesta porque va a comprimir tanto tus imágenes que tu duro el trabajo no se va a quedar tan genial. Animaciones simples, con arte vectorial limpio, funcionan muy bien para GIFS. Tener una paleta de colores más pequeña realmente ayuda a mantener el tamaño del archivo hacia abajo. Eso no quiere decir que no puedes tener muchos colores y agregar cosas como texturas y sombreado, pero cuanto más simple sea, mejor se verá tu GIF al final. Pequeño, hay dos goles principales al comprimir un GIF. Mantener el tamaño del archivo pequeño y la calidad alta. Mantener pequeña su resolución de exportación ayudará a ambos objetivos. La mayoría de mis GIFS terminan en regate y dribble solo acepta dos resoluciones, 400 por 300 y 800 por 600 así que generalmente no exporto un GIF superior a 800 por 600. Si desea comprimir específicamente para Skillshare, el ancho de un elemento de proyecto es de 580 píxeles. Ahora, esas son todas resoluciones de exportación. Te recomiendo que trabajes a una resolución más alta como 1920 por 1080 o 1440 por 1080 para 4 por 3. Tercera parte, comprimir como un jefe. 2. Método 1: Gifgun: Existen tres métodos que recomiendo para comprimir GIF, y cada uno tiene su propia ventaja y desventaja. Método uno, Gun GIF. La pistola GIF es, con mucho, el método más simple para comprimir GIF de After Effects. Son 30 dólares. Pero puedo garantizar que si explotar los regalos de After Effects es algo que haces regularmente, son los mejores $30 que puedes gastar. Por aquí en After Effects tengo un montón de mis patrones de mi gráfico de título todo listo para comprimir. Esta comp es 1920 por 1080 a 24 fotogramas por segundo. Voy a subir a la ventana y bajar a GIF Gun, y se puede ver es este minúsculo panel, sólo dos botones, e incluso podría acoplar esto a mis paneles por aquí, que siempre tenga acceso a él, y los dos son hacer GIF y ajustes. El modo en que funciona es que al igual que renderizar un video de After Effects, está configurado para renderizar cualquier área de trabajo que esté configurada. Cada una de estas capas ya está recortada para ser un bucle sin costuras. Si voy al primer fotograma y configuro mi tinta presionando B en el teclado, presione O para saltar al alza de esa capa y presione N para establecer mi punto de matriz. Presionaré 0 en la almohadilla numérica para renderizar, y verás que es bucle sin fisuras. Ya que sé que esto está configurado correctamente, entonces puedo configurar mi exportación. Ahora si tuviera que hacer clic en hacer GIF ahora, va a comprimir el GIF en la resolución de mi comp, que está lleno diez ADP, y como ya discutimos, eso es mucho más alto de lo que quiero que sea. Entraré a mi configuración y tengo algunas opciones. El primero es elegir dónde quería exportar. Acabo de cambiarlo para que esté en el escritorio. Entonces tenemos la opción de redimensionar el ancho y escalará proporcionalmente la altura. No quiero que sea 1920 de ancho. Daré clic en la marca de verificación redimensionar a ancho y 800 píxeles es como nos gustaría que eso se exportara. La siguiente opción es elegir el número máximo de colores, y como se puede ver en la punta de la herramienta aquí mismo, más colores significa GIF más grandes, y por más grandes significan el tamaño del archivo. Si hago clic en este menú desplegable, verás que tenemos algunas opciones preestablecidas. Ahora esta animación en particular sólo tiene tres colores. De verdad puedo derribar este máximo colores a ocho y probablemente se verá bien. Pero en general, dejaré esto a los 128 y está bien. Si la calidad no es lo suficientemente alta en ese punto, tocaré hasta 256, podemos controlar la velocidad de fotogramas. Ahora mismo está configurado para ser la velocidad de fotogramas de comps, así que 24 fotogramas por segundo, pero puedo bajar esto a 12 si quiero cortar el número de fotogramas y la mitad para ahorrar en tamaño de archivo. Voy a dejar eso por ahora porque quiero que sea la velocidad de fotogramas completa, y luego finalmente, tenemos la opción de guardar una copia de video. Lo cual no necesito hacer, y la última opción es asegurarme de que tu GIF bucles. Yo quiero mina el bucle, dejaré eso comprobado y click Listo. Entonces es tan simple como hacer clic, hacer GIF. After Effects exporta un video. GIF Gun me da un poco de estatus. Me dice que el GIF se está comprimiendo y abre automáticamente el archivo donde estás exportando el GIF en mi escritorio, y seguro, ahí está mi GIF de bucle. Ahora bien, si estás mirando este video a pantalla completa, probablemente puedas decir que los bordes de mi obra se ven realmente crujientes. Eso se debe a que limité mi patrón de color a ocho colores. Se pensaría que debido a que mi obra sólo tiene tres colores, ocho serían más que suficientes. Pero si acerco aquí realmente cerca en los bordes de estos dos colores, se puede ver que no es sólo este morado y este rojo. Ahí está lo que se llama anti-aliasing que está sucediendo entre los dos gráficos para que los bordes sean más suaves, y lo mismo es cierto para el amarillo y el morado. Si me alejo de nuevo para encajar, voy a entrar en mi configuración, cambiar los colores máximos hasta 128 solo para asegurarme de que super suave click Done y luego hacer GIF de nuevo, y aquí vamos. Tenemos nuestro segundo GIF, previsualizar eso. Se puede ver que es mucho más limpio que esto. Este es nuestro original, que se limita a ocho colores, y esta es nuestra segunda compresión con un 128. Ahora la diferencia de tamaño de archivo es bastante significativa. El primero es de sólo 388 kilobytes, y el segundo es de un megabyte. Mi objetivo es por lo general mantener mis GIFs alrededor de dos megabytes o menos, porque la cuota de habilidad limita la carga del tamaño del archivo a dos megabytes. Ahora si mantener mi regalo a dos megabytes o bajo es realmente bajar la calidad, entonces definitivamente aumentaré el tamaño del archivo y luego solo manejaré publicar el GIF de una manera diferente, pero llegaremos a eso más adelante. Por ahora, estoy perfectamente contento con ese GIF, y esa es con mucho la forma más sencilla de exportar un GIF desde After Effects. Conforme estoy grabando esta clase, GIF Gun es un plug-in muy nuevo y siguen trabajando en desarrollar más características. Podría ser una compra aún más valiosa en el futuro. 3. Método 2: Photoshop: El segundo método para comprimir GIF es usar Photoshop. Si tienes secuelas, más probable es que tengas Photoshop a. ¿ Cómo pasamos de las secuelas a Photoshop? Bueno, déjame saltar a mi segundo GIF. Pondré el área de trabajo y voy a exportar esto como archivo de video. Subiremos la composición, Agregar a la cola de renderizado y sus módulos de salida probablemente estén configurados en sin pérdidas, y eso está bien. Realmente no quiero comprimirlo desde secuelas hasta Photoshop. Entonces solo le diré que vaya a mi escritorio y haga clic en Render. Entonces vendré a Photoshop, iré a Archivo, abriré, iré a mi escritorio, y aquí mismo está mi archivo QuickTime. Voy a hacer doble clic en él. Photoshop procesará, leerá el formato de video, lo que podría tardar un poco de tiempo dependiendo de lo grande que sea tu archivo , y ahí lo tenemos. Puedo jugar esto de nuevo dentro de Photoshop. Puede que no se reproduzca en tiempo real al principio, pero al menos me deja ver que la animación está funcionando. Ahora bien, si Photoshop no te permite abrir el archivo QuickTime directamente, entonces necesitas llegar a File, Import, Video Frames to Layers. Después selecciona tu video, deja el rango establecido Desde el principio hasta el final y haz que la opción Make Frame Animation esté marcada y haz clic en Aceptar. Eso traerá una línea de tiempo de aspecto un poco diferente, pero básicamente funciona de la misma manera. Voy a cerrar éste y volver a aquí. El siguiente paso es subir a Archivo, Exportar, Guardar para Web (Legado). Ahora, estoy usando Photoshop CC 2015. Cualquier versión anterior tendría web más segura listado tarifa aquí arriba por Guardar y Guardar como. Pasa a Guardar para Web. Eso abre este diálogo que nos permite comprimir para web. Lo primero que haré es subir al Preset, click en el menú desplegable, y subir al GIF 128 Dithered. Ahora bien, esto es solo un preset y tenemos muchos y muchos controles de cómo va a exportar este GIF. Lo primero que quiero hacer es cambiar el tamaño de la imagen. Todavía está fijado a 1920 por 1080. Voy a hacer doble clic en el ancho y escribir en 800, y eso tardará un segundo en cambiar el tamaño. Ahora, estamos obteniendo una vista previa en vivo de cómo se verá nuestro GIF una vez que esté comprimido. Aquí abajo en la esquina inferior izquierda, se puede ver que nos está diciendo que el GIF resultante será de 1.1 megabytes. Eso es perfectamente aceptable. Una de las cosas bonitas que Photoshop te permite ver es qué colores está usando para comprimir tu GIF. Al igual que el uso de pistola GIF, puedo aumentar o disminuir el número de colores utilizados. Si caigo esto a 8, se puede ver que tenemos de nuevo estos bordes crujientes. Si realmente escribo 3, ya que solo hay tres, en ya que solo hay tres, realidad perdemos ese color de pintura. Si lo aumentara a 4, probablemente traería eso de vuelta porque uno de los colores es en realidad transparencia. Pero eso es probablemente mucho más técnico de lo que incluso necesitas preocuparte. Mi regla de pulgar es de 128 colores, y si eso no se ve lo suficientemente bien, bombea hasta 256. Eso ni siquiera aumentó tanto el tamaño del archivo, pero 128 está bien. Ya que es un tamaño de archivo más pequeño, voy a seguir adelante y dejarlo ahí. Ya que estoy contento con la forma en que se ve esto, lo último que necesito hacer es cambiar mis Opciones de Looping de Once a Forever. A veces, a Photoshop le gusta cambiar esto de nuevo a Once si lo has configurado y luego volver a subir y cambiar tu configuración de Compresión, no tengo idea de por qué. A veces, simplemente lo hace. Lo último que siempre hago antes de golpear Save es asegurarme de que mi Looping esté establecido en Forever. Después haré clic en Guardar, ponerlo en mi escritorio, llamarlo Photoshop para que podamos mantenerlos organizados. Ahí lo tenemos, lo exportó. Si voy a mi escritorio, aquí está, vista previa de Photoshop. Tenemos un GIF de bucles. Aquí te dejamos el título gráfico a mi Curso Rock out con animación de personajes. Como puedes ver, tengo una Viñeta texturizada alrededor de las esquinas, hay sombreado en el texto, y es bastante más largo que los patrones de bucles que ya he tenido. Ahora bien, esta textura granulada que agregué es una elección de diseño, pero también es algo que ayuda con la compresión de GIFs. Si fuera a abrir este video sin el ruido de fondo, y tratar de comprimir esto como un GIF, porque mi paleta de colores está limitada a un 128, obtenemos todo este fea banding que sucede por la compresión. Sin la compresión, hay tantos tonos diferentes de este color naranja que va a ser amarillo. Pero debido a que un GIF es un formato tan altamente comprimido, es súper notable. Ahora, podría aumentar los colores para tratar de arreglar eso. Pero incluso al máximo de 256, todavía no se ve muy bien. Podría intentar poner mi buñuelo todo el camino y eso suavizarlo un poco más. Pero todavía se puede ver claramente esa banding. Ahí es donde esta textura granulada resulta útil. Si vuelvo a encender eso, la franja ha desaparecido por completo, incluso a 128 colores. Ese grano permite a Photoshop generar este gradiente de una manera que elimina toda la franja. Ahora bien, si voy hacia adelante hacia el texto entra, ya ves que el sombreado no aparece en eso. Si miramos nuestra mesa de colores, realmente solo hay dos tonos diferentes de rojo, y por eso hemos perdido todo eso. Todavía voy a aumentar esto a 256 colores, y ahí tienes. Ahora, el sombreado vuelve a aparecer porque tenemos muchos más tonos de rojo. Ahora, nuestro tamaño de archivo es de 2.7 megabytes, es demasiado grande para compartir habilidades. Pero tal vez si cambio el ancho a 580, eso ayudará a comprimir aún más la imagen. Perfecto, eso bajó a 1.4 megabytes y la igualdad se ve muy bien. Ahora que todo está listo, mi Looping está establecido en Forever. Puedo hacer clic en Guardar, elegir un escritorio. Llamaré a esto Rock Out Título Photoshop. Puedo ir a mi escritorio. Aquí está. Genial. Es así como usas Photoshop para comprimir GIF. 4. Método 3: Giphy.com: El último método es usar una página web en línea para convertir tu video a un GIF para ti. Ahora hay un montón de sitios web con los que puedes hacer esto. El que te voy a mostrar se llama Giphy. Pero en este caso, supongo que tendría más sentido que lo pronunciaras Giphy. De vuelta en after effects, voy a exportar esto como archivo de video, pero esta vez lo voy a comprimir para que mi subida no tome mucho tiempo. Voy a ir a Composición, Agregar a Render Queue, y en lugar de ProRes, voy a asegurarme de que mi formato establecido en QuickTime, cambie mis opciones de formato. Cambia el códec de video a H.264. Calidad establecida a 100. Voy a limitar mi velocidad de datos a 15,000 kilobits por segundo click “Ok”, todo lo demás está establecido. Voy a dar click en “Ok”. Asegúrate de que esto se esté exportando a mi escritorio. Yo lo nombraré, subida de patrones, y luego “Render”. Entonces vendré a Giphy dot-com. Justo arriba en la parte superior, voy a dar click en el botón “Subir”, dar click en “Navegar”. La carga de patrones es mi archivo QuickTime. Voy a previsualizarlo, se puede ver que es de calidad completa. Haga clic en “Abrir”. Si planeas compartir tu animación en Giphy, tienes opciones para agregar etiquetas para que se pueda buscar. No necesito hacer eso, así que haré clic en “Subir GIF”, y eso tardará un minuto en subir ese archivo. Una vez que eso haya terminado, abrirá automáticamente tu animación. Como puedes ver, la calidad no es tan grande. Desafortunadamente, no hay forma real de controlar la calidad de tu subida a sitios web como Giphy o Imager. Si me desplazo hacia abajo, nos da Embled code, que es genial. Podemos abrir más opciones y hay todo tipo de ajustes para compartir. Pero si entro en avanzado, tenemos un enlace Giphy el cual irá directo a esta página, o si quieres una URL directa a esta animación, para eso es el enlace de descarga GIF. Entonces, si copio esto y lo pego en una pestaña nueva, ves que enlaza directamente a ella. Ahora esto podría ser perfectamente aceptable para lo que necesitas, pero definitivamente puedo decir que la calidad es menor, y parece que incluso bajó mi velocidad de fotogramas. Ahora, como dije, subiendo a un sitio web como Giphy, no tienes control sobre esos ajustes, pero es rápido y aloja automáticamente tu imagen, por lo que no es una opción que debes descartar. 5. Publicación de un GIF en Skillshare: Entonces esas son mis tres mejores formas de comprimir GIFs para la web. Una vez que tengas tu GIF, puedes crear un proyecto de clase y compartirlo en la página del proyecto de la clase. Cuando realmente vayas a subir tu proyecto a Skillshare, asegúrate de no subirlo como tu foto de portada. Esto es solo para generar una miniatura en la página del proyecto de clase y básicamente tener un encabezado para tu proyecto de clase. Ahora, Skillshare dice que GIF es un formato aceptable, y lo es, pero no se animará. En cambio, baja a tu espacio de trabajo de proyecto, click en subir foto, elige tu GIF, siempre y cuando esté bajo dos megabytes, puedes subirlo, y eso subirá la imagen directamente en tu espacio de trabajo de proyecto. Ahí está. Ahora, todavía tengo mi enlace copiado de mi subida de Jiffy, di que ese GIF era demasiado grande para subir directamente a Skillshare. Bueno, entonces haría clic en el botón Imagen, pegaría esa URL en la fuente, y pincharía Ok. Eso muestra automáticamente la imagen de la URL que hospedó en Jiffy. Entonces así es como publicas un GIF que es demasiado grande para estar en Skillshare, y eso es todo lo que hay para comprimir GIFS como un jefe. Espero que hayan disfrutado de esta clase rápida. Me encantaría que me dejaras una reseña. Haz unas animaciones impresionantes, comprime esos GIFs y subirlos a tu página de proyecto, etiquetame en redes sociales @jakeinmotion, si compartes alguna de tu trabajo. Como siempre, haz cualquier pregunta que tengas en el hazme cualquier discusión en la página de la Comunidad. Gracias de nuevo, y nos vemos la próxima vez.