Cómo diseñar un gif

Cómo diseñar un gif

Cómo diseñar un gif para redes sociales y publicaciones digitales

Estamos en un mundo en el que la comunicación se desarrolla cada vez más en línea y los GIF van en aumento, entonces hoy te enseñamos cómo diseñar un gif. Ahora impregnan todo, desde la cultura popular hasta las campañas publicitarias. Para la próxima generación de diseñadores y desarrolladores, es esencial conocer los gráficos en movimiento y tener una buena comprensión de los conceptos básicos para crear un GIF.

Un buen GIF puede ser lúdico y lleno de dinamismo, o puede ser lento y sin problemas; lo que describe la sensación detrás de las imágenes en movimiento. La clave es entender qué hace un llamativo GIF y crear un lenguaje que se adapte a la atmósfera del mensaje.

Sin embargo, hay algunas reglas para aprender y herramientas que pueden ayudarlo en su camino. Aquí, los creativos de los principales estudios, así como algunos freelancers reconocidos, comparten sus consejos para dominar el arte de cómo diseñar un gif.

Cómo diseñar un gif

 

01. Mantenerlo llamativo

Con el uso de las redes sociales aún alto, tal vez no sea sorprendente que la tendencia de los GIF en publicidad esté aumentando rápidamente. «Usar GIF en contenido social puede ser realmente poderoso si se ejecuta correctamente», dice Tom Grant, diseñador de Fiasco Design en Bristol.

Él ve los GIF como el mejor dispositivo de búsqueda de atención, lo que da vida a lo que sería una publicación plana y estática en «formas llamativas, atractivas e informativas».

Fiasco Design GIF de Mo Farah

Fiasco Design creó una gama de GIF enérgicos para los Juegos Olímpicos de Río 2016

Fiasco Design creó una gama de GIF animados y enérgicos para los Juegos Olímpicos de Río, combinando una paleta de colores vibrante con velocidades de cuadro rápidas y llamativas, y experimentando con un tipo de letra que sería legible en diferentes tamaños.

02. Mantenga el tamaño reducido para compartir en redes sociales

Para los diseñadores, existen algunas reglas para hacer GIF efectivos para las plataformas sociales. «El principal desafío técnico es mantenerlos por debajo de las limitaciones de tamaño de archivo de cada plataforma de redes sociales», sugiere James Curran , director sénior de la productora mundial Partizan . «Tumblr en particular siempre es complicado ya que tiene un límite de 2MB [ahora 3MB], así que a veces necesito ser creativo con formas de acortar los bucles para mantener el tamaño bajo».

También existen algunas reglas particulares para crear GIF que se comprimirán: primero, adhiérase a una paleta de colores limitada. Evitar degradados es esencial, ya que terminará con sombras sucias o archivos de gran tamaño. Los píxeles semitransparentes también son un no-no, ya que la transparencia está totalmente encendida o totalmente apagada, algo a tener en cuenta para evitar esos bordes dentados.

03. Diseño con usuarios móviles en mente

Aunque los diferentes tipos de sitios web usan GIF de diferentes maneras, la mayoría de los diseñadores están de acuerdo en que es mejor no tener una gran cantidad de GIF reproduciéndose al mismo tiempo en una página. Curran recomienda usar rollovers para evitar la ralentización y para mantener las animaciones a la velocidad que se esperaba.

Y vale la pena tener en cuenta el tipo de dispositivos en los que se va a ver su GIF. El consejo de Curran es diseñar con una pequeña pantalla en mente: «Mantenga todo simple y audaz para que funcione bien en cualquier dispositivo».

Russell Etheridge , miembro del equipo creativo de Animade , favorece el diseño en un cuadrado. «Muchos de nuestros GIF comienzan de esa forma y se recortan si es necesario. Además, tiendes a desplazar sitios sociales en vertical en tu teléfono, por lo que es mejor tener un diseño más cercano a un cuadrado, ya que las imágenes más estrechas se verán más pequeñas».

Para su Olympops GIF (arriba) Etheridge animaba todo en 4: 3, que luego podía recortarse en un video cuadrado o estándar de 16: 9.

04. Hacer que funcione como un bucle continuo

El diseñador parisino Valentin Adam, que trabaja como Playground Paris , argumenta que, en lugar de pensar en los GIF específicamente, es el concepto del formato ‘loop’ el que está ganando ritmo: «Es realmente divertido hacer una animación de dos segundos que suena infinitamente y se ve como si fuera diferente en cada ciclo «.

Curran está de acuerdo y sugiere pensar que los GIF son continuos, en lugar de tener un punto de inicio y un final definidos. «Trate de contar una historia que funcione dentro del ciclo», sugiere. «Creo que eso ayuda a que las personas sigan viendo GIF durante más tiempo».

Jamie Curran GIF

GIFs juguetones de James Curran lo han impulsado a la popularidad

Si la animación es corta, es una buena práctica limitar los bucles a no más de tres veces antes de detener por completo la animación, recomienda Nick Lewis, un diseñador y desarrollador front-end de Fiasco Design.

Sin embargo, si diseña el GIF para ir a una plataforma de redes sociales como Twitter, no necesita preocuparse tanto, ya que las funciones integradas solo juegan GIF cuando están a la vista.

Finalmente, es esencial que sus bucles sean agradables y suaves, y hay una trampa en particular para evitar. «Tener el último fotograma de la animación igual al inicio da como resultado una pequeña retención donde se ve el mismo fotograma dos veces, lo que provoca un bucle poco uniforme», señala Etheridge. «Asegúrate de eliminar esa al final para evitar esto».

05. Encuentra las herramientas adecuadas para ti

Para la mayoría de los diseñadores, dominar Photoshop es muy importante a la hora de crear sus propios GIF. Curran recomienda YouTube como un recurso recurrente para que los tutoriales en línea recojan los conceptos básicos del software: «Una vez que tiene una buena comprensión, puede descubrir cómo adaptar esos principios al estilo de trabajo que desea crear».

Grant sugiere jugar en CodePen: «Tiene grandes fuentes de inspiración y ofrece un lugar para aprender y ser creativo con el código, ya sea un principiante o un profesional experimentado».

Para GIF más complejos, After Effects es la herramienta de elección de muchos diseñadores. «Hay un control mucho mayor sobre las funciones de movimiento y sincronización, así como algunas herramientas adicionales para crear animaciones realmente potentes», revela Lewis.

Si está buscando mejorar sus habilidades de After Effects, pruebe el tutorial de creación de GIF de Curran (arriba), nuestra guía Comience con la animación en After Effects.

06. Comience simple

Con todas estas opciones diferentes, es fácil sentirse abrumado. «Debido a que hay muchas variables a considerar, hay muchas pruebas y conocimientos técnicos necesarios. Puede tomar el doble de tiempo que un cambio de ilustración habitual para crear un GIF en bucle», dice la ilustradora de Melbourne Ellen Porteus .

Su consejo para los principiantes es mantener las cosas simples: «Comience con algunos elementos, para comprender cómo se mueven las cosas, y construya lentamente una animación más complicada. Empecé creando muchas bolas que rebotaban» cómo diseñar un gif correctamente.

Mujer con piernas en el aire

Valentin Adam (también conocido como Playground Paris) construyó su cartera creando un GIF por día durante un mes

Adam dominó el arte de mantener las cosas simples cuando estaba trabajando en la expansión de su cartera de GIF. «Tenía en mente hacer un gran movimiento misceláneo con un montón de cosas tontas y locas, pero para hacerlo tuve que publicar un GIF todos los días, en parte para evitar pensar demasiado», explica.

Ejecutó el desafío durante todo un mes y publicó los GIF en su página de Instagram . Mediante el empleo de una variedad de trucos logró reducir su tiempo promedio de creación a alrededor de una hora.

07. Convierte un video en un GIF

La creación de GIF no tiene por qué ser exclusiva de los ilustradores: puede importar cualquier video en Photoshop para convertirlo en un GIF. Para aquellos que carecen de las habilidades de Photoshop, Grant recomienda experimentar con Giphy , que ofrece una manera simple y gratuita de dividir sus videos en cuadros.

«Realmente no uso el sistema de animación de cuadros en Photoshop, ya que las capas de video son mucho más intuitivas», comenta Etheridge. «Si estoy animando gráficos, animaré en After Effects e importaré a Photoshop como un archivo de video renderizado antes de convertirlo».

Sin embargo, señala que si está haciendo un GIF a partir de secuencias de video de acción en vivo, lograr un ciclo sin interrupciones será mucho más complicado, al igual que obtener un color uniforme.

08. Hazlo accesible para todos

Para garantizar que el contenido se pueda conectar con un público más amplio, los desarrolladores deben ser conscientes de la accesibilidad y los estándares web . «La animación web siempre debe usarse para mejorar progresivamente la experiencia», argumenta Grant.

Sugiere describir animaciones y GIF animados en texto para que puedan ser entendidos por los usuarios de lectores de pantalla, y evite parpadear demasiado para que sigan siendo adecuados para los espectadores con epilepsia fotosensible.

GIF de abeja

GIF de Fiasco Design para Larmer Tree Festival

El cofundador de Animade, James Chambers, está de acuerdo en que la accesibilidad debe incorporarse desde el principio: «Conceptos básicos como proporcionar etiquetas alt en imágenes – GIF animado o de otro tipo – debería ser una referencia».

También señala que para la animación vectorial, el uso de SVG en línea puede mejorar drásticamente la accesibilidad. En pocas palabras, un SVG es un formato de imagen vectorial basado en XML para gráficos bidimensionales que admite interactividad y animación. «Desde el punto de vista de la accesibilidad, los SVG en línea contienen más información cuando se comparan con una etiqueta en blanco <canvas> y, por lo tanto, pueden ser mejor interpretados por el navegador», explica.

Para sitios de animación pesada, Chambers sugiere combinar SVG con un uso cuidadoso del etiquetado ARIA. Los lectores de pantalla, listos para usar, funcionan con HTML habitual, pero agregar ARIA puede proporcionar a los usuarios de lectores de pantalla más contexto y una mayor interactividad con el contenido. Sin embargo, ARIA no tiene ningún efecto sobre cómo se muestran o comportan los elementos en los navegadores, sino que solo actúa como una capa descriptiva adicional. Esta es una herramienta increíblemente útil para desarrolladores web.

09. Explora algo nuevo

Entonces, ¿por qué los GIF se han vuelto tan populares? Para muchos diseñadores, ofrecen una nueva salida para la expresión creativa. «Creo que se debe en parte a que la audiencia principal de los GIF es más joven, [los clientes] están más interesados ​​en el contenido que está un poco fuera de ritmo», dice Curran.

«Por alguna razón, las marcas parecen más abiertas a permitir que los creadores sean más creativos con los GIF de lo que serían con contenido más convencional. Como los GIF son proyectos más pequeños con presupuestos generalmente más pequeños, las marcas no corren el menor riesgo de usar este formato para intentarlo algo diferente.»

GIF para Quantcast

Ellen Porteus diseñó este GIF en bucle para Quantcast

Porteus está de acuerdo: «Todo se trata de aprovechar al máximo la flexibilidad del medio digital. Las ilustraciones tradicionales son geniales, pero los GIF pueden ser realmente atractivos, divertidos e inteligentes. Para mí, los GIF más atractivos son los que se combinan sin interrupciones e infinitamente. con mucho movimiento y diversión «.

En cuanto a lo que hace un gran GIF, la intuición tiene algo que ver con eso. «Se trata de comprender los principios básicos de la animación, el sentido del ritmo y poder pensar en una idea», concluye Curran. «¡Todavía estoy aprendiendo todas esas cosas después de más de 10 años de animación!»

Ilustración principal: Yukai Du

Este artículo apareció originalmente en una edición de 2017 de net . Suscríbete a la revista neta aquí .

Apasionado por la educación, enseñanza y capacitación, dedicado a impartir conocimiento y creando soluciones a emprendedores, las aulas son el mejor espacio para despertar la inquietud en aprender cada vez más. Experto en Diseño Web, Multimedia y Marketing Digital.

www.andresmurciacreativo.com