Claro, Los GIF son mejor conocidos por su potencial de meme. Pero también son una herramienta útil de diseño de poca elevación. ¡Lo demostraremos!
Cuando Steve Wilhite inventó el formato de intercambio gráfico, o GIF, estoy bastante seguro de que nunca esperó que se convirtiera en una parte tan icónica de la cultura pop.
Pero, los GIF son buenos para más que memes virales. De hecho, mucho antes del ascenso estratosférico de los memes, los GIF se usaban para muchos otros fines comerciales y de marketing, y todavía se pueden usar. Los mapas de bits pequeños casi no ocupan espacio en comparación con sus contrapartes de alta fidelidad, como JPG o PNG. Son ampliamente compatibles con todas las plataformas principales. Y tienen el potencial de ser lanzados a lo largo y ancho.
Entonces, ¿para qué sirven los GIF, además de hacer reír a tus seguidores de Twitter o iluminar una aburrida cadena de correo electrónico?
Formas de usar GIF sin memes
Mejorar ilustraciones o diagramas
Transmitir las complejidades de cómo funciona algo a veces puede ser difícil con imágenes estáticas. Del mismo modo, un gráfico o diagrama puede carecer de impacto si no hay una gran revelación. Un GIF animado es una buena manera de mejorar esa experiencia, ya que puede mostrar de forma más dinámica cómo funciona el producto o darle al cliente una sensación de viaje de una manera inesperada.
Crear tutoriales (¡como este!)
En lugar de proporcionar solo una lista con viñetas de acciones en su próximo tutorial, ¿por qué no ofrecer instantáneas del proceso en sí? Vea la segunda sección de esta pieza, por ejemplo.
Presentación de demostraciones de usuario
A todo el mundo le encanta un conjunto de maquetas de interfaz de usuario súper ingeniosas. Pero, por buenos que sean, nunca pueden dar una idea general de cómo funciona un producto digital. La próxima vez, ¿por qué no acompañas tus maquetas con un conjunto de GIF animados?
Úselos para mostrar cómo funcionan sus microinteracciones o cómo un usuario pasará de una pantalla a otra. Esto hará que sus demostraciones sean más atractivas y aumentará su valor para las partes interesadas y los desarrolladores.
Hacer Cinemagraphs
Estas animaciones, en las que solo una pequeña parte de la foto parece moverse mientras todo lo demás permanece inmóvil, son fáciles de crear y tienen un impacto inmediato. Pueden enfatizar una toma de producto o una sesión de fotos, o involucrar a un espectador en un paisaje o evento de una manera que una fotografía estática o un video totalmente animado no podrían hacerlo por sí solos.
Cómo crear GIF animados
Primero, vale la pena señalar que los GIF son solo un formato de archivo como .jpg, .docx, .psd o cualquier otro archivo que encuentre en una computadora. No necesita un kit costoso para hacerlos:su teléfono, tableta o computadora portátil harán el trabajo perfectamente, y hay una gran cantidad de aplicaciones (tanto gratuitas como de pago) para lograr la gloria de los GIF animados.
Puede crear un GIF de dos maneras:comience con un conjunto de imágenes y empalme para formar la animación. O bien, comience con secuencias de video y conviértalas al formato GIF.
Para los propósitos de este tutorial, voy a asumir lo primero. Estoy usando Photoshop, pero si no tiene ese programa, hay otras ofertas para elegir, como GIPHY.
Paso 1
En primer lugar, introduzcamos todas nuestras imágenes en Photoshop (o en la aplicación que prefiera). Para Photoshop, vaya a Archivo> Scripts> Cargar archivos en la pila .
Las capas de carga aparecerá el cuadro de diálogo. Básicamente, se trata de un sofisticado selector de activos, así que haga clic en Examinar . Elija sus imágenes y aparecerán en los Archivos de origen sección. Haz clic en Aceptar .
Photoshop ahora se abrirá y cada uno de sus archivos se cargará en la pila, cada uno en una capa separada.
Consejo profesional: Reorganice sus capas para que la primera imagen aparezca en la parte superior de la pila y la última imagen aparezca en la parte inferior. Esto es más fácil que reorganizarlos más tarde. Es posible que deba hacer clic en la visibilidad de capa de cada capa "activada" o "desactivada". Haga esto haciendo clic en el ojo icono.
Paso 2
A continuación, ve a las opciones de tu menú y elige Ventana> Línea de tiempo. , que abrirá la línea de tiempo panel, normalmente en la parte inferior de la ventana de Photoshop.
Localiza el menú de hamburguesas en la parte superior derecha de la cronología y elige Crear marcos a partir de capas . Se creará un marco individual para cada capa, pero podría ser al revés. Si ese es el caso, simplemente haz clic en el menú de hamburguesas de nuevo y elige Cuadros inversos .
Paso 3
A continuación, debe decidir cuánto tiempo estará visible cada cuadro dentro de su GIF animado. Esta es una cuestión de preferencia personal y también del tipo de GIF que está creando.
Tenga en cuenta que cada cuadro no tiene que tener la misma longitud. Si quieres acentuar o acelerar ciertos puntos, siéntete libre. Haz clic en la flecha hacia abajo debajo de cada cuadro, y tendrás opciones para velocidad (expresado en segundos).
Consejo profesional: Puede seleccionar más de un cuadro a la vez para cambiar la velocidad de todos los cuadros seleccionados, simplemente presione Mayús y haga clic en los cuadros.
Paso 4
Para ver cómo se verá el GIF, presiona Reproducir ¡botón y mira cómo sucede la magia!
Una vez que esté satisfecho con su creación, simplemente vaya a Archivo> Exportar> Guardar para Web (heredado) y aparecerá un cuadro de diálogo de aspecto bastante complicado. No te alarmes, solo tendrás que cambiar una opción.
En el Preestablecido desplegable a la derecha, elija GIF 128 interpolado . Esto creará un tamaño de archivo un poco más grande que las otras opciones, pero evitará que se produzcan bandas en el GIF final.
Ahora, presiona Guardar ¡y listo!
El Gran Debate GIF
Es imposible escribir un artículo sobre GIF sin mencionar el enérgico debate de larga data sobre cómo se dice GIF. . En pocas palabras, hay dos bandos:los que lo pronuncian ghifs y los que lo pronuncian jiffs .
Ghiffers cree una G dura es apropiada principalmente por la palabra que la G representa:gráfico , que se pronuncia con una G fuerte .
Por otro lado, jiffers decir que cuando un G precede a un yo , como en magia , margen , origen o motor , la palabra se pronuncia con una G suave .
A pesar de que el propio creador cayó del lado de los jiffers , encuesta tras encuesta muestra que la mayoría de las personas son ghiffers . La guerra continúa. Al menos ahora sabes cómo hacer un meme al respecto.
Más información sobre gráficos en movimiento y diseño, solo para ti:
- NEON:Tipo de letra de texto animado gratuito:36 elementos gráficos animados GRATUITOS
- El poder astuto y continuo del diseño de movimiento
- Diario de un diseñador gráfico:Recorriendo Japón a través del diseño
- Diseño Low-Poly:taquigrafía 3D y tendencia de diseño gráfico
- Consejos de diseño que toda marca ecológica legítima debe saber
Imagen de portada a través de Vera Reva.