La animación de un logotipo es el proceso de introducir movimiento o cambios en los elementos visuales de un logotipo para hacerlo más dinámico y atractivo. Se puede aplicar a diferentes partes de un logotipo, como texto, imágenes, colores y formas, y puede tener distintos grados de complejidad, desde animaciones simples como texto parpadeando o colores que se desvanecen, hasta animaciones complejas que involucran objetos en movimiento o interactivos. efectos.
La animación de logotipos es cada vez más común. Entre los teléfonos inteligentes y el desarrollo general de la tecnología de Internet, los logotipos son ahora mucho más comunes en los espacios digitales, y esto abre la puerta a efectos visuales como la animación que no son posibles con los productos físicos. Por supuesto, la creciente popularidad de la animación de logotipos significa que cada vez más marcas la necesitarán para seguir siendo competitivas. Entonces, aprender a animar un logotipo puede ser una habilidad valiosa que llevará tu logotipo al siguiente nivel.
Al mismo tiempo, el software de animación también se ha vuelto más ubicuo, optimizado e intuitivo para respaldar a esta creciente base de usuarios. Entonces, no importa cuán técnica y compleja pueda parecer la animación de un logotipo, ahora incluso los principiantes pueden crear animaciones simples pero efectivas.
Animación de logotipo en After Effects -
Paso 1. Prepare su archivo de logotipo.
De hecho, comenzaremos nuestro tutorial sobre cómo animar un logotipo en Adobe Illustrator (o software de diseño de logotipos similar). Esto es necesario para asegurar que nuestro archivo logotipo configurado para animación.
Aunque el software de animación en sí es rasterizado, los archivos del logotipo original deben estar en formato vectorial. Esto le permite cambiarlos sin daño para la calidad de la imagen (por ejemplo, aumentar la escala de un logotipo rasterizado provoca pixelación), y esto será útil más adelante cuando trabaje con capas de formas.
Asegúrese de que su logotipo esté separado en capas usando el panel Capas.
El logotipo también debe tener varias capas en lugar de agruparse en un solo objeto. Esto facilita la creación de animaciones más complejas animando partes individuales del logotipo. Puedes crear nuevas capas usando el botón " Agregar nueva capa" en la parte inferior del panel Capas y luego copie y pegue partes de su logotipo en ellos.
Finalmente, como la animación es de naturaleza digital, también trabajamos con colores RGB. Si su archivo de Illustrator está configurado en CMYK, puede cambiarlo seleccionando su logotipo y navegando a Editar > Editar colores > Convertir a RGB.
Cuando esté listo, exporte su logotipo como un archivo vectorial con todas las capas. Dado que los tipos de archivos de After Effects son parte de la familia de software de Adobe, guardaré el logotipo que creé como un archivo AI (Ilustrador Adobe), pero hay varios tipos diferentes de archivos vectoriales para elegir si estás utilizando otro software.
Paso 2: Importa tu logotipo a After Effects. Animación del logotipo
Abra After Effects. La interfaz puede parecer complicada a primera vista, así que analicemos los conceptos básicos:
- Barra de herramientas : aquí puedes acceder a la principal herramientas graficascomo la herramienta Pluma, la herramienta Texto, etc.
- Panel de proyecto : aquí es donde administra y organiza los archivos multimedia de todo el proyecto.
- ventana de composición : Esta es una ventana de vista previa de video donde puede obtener una vista previa de la animación de la composición actual (a menudo llamada composición) en la que está trabajando. Las composiciones son esencialmente escenas, cada una con sus propias líneas de tiempo de animación independientes. Discutiremos las composiciones con más detalle en la siguiente sección.
- Cronología : Aquí es donde crearás tu animación. Consta de una línea de tiempo literal a la derecha (donde configurará eventos de animación para que se ejecuten en la línea de tiempo) y un área de diseño a la izquierda (donde superpondrá y editará los atributos de sus recursos multimedia).
- Panel de control : Aquí puede acceder a varias funciones de soporte, como información multimedia, opciones de párrafo y alineación, y bibliotecas de animación y efectos visuales prediseñadas integradas en After Effects.
Si no está seguro acerca de una herramienta o botón, al pasar el mouse sobre él obtendrá una descripción.
Para importar un archivo de logotipo, simplemente arrástrelo al panel Proyecto o seleccione Expediente" > " Importar" > " Expediente" . En el siguiente cuadro de diálogo, seleccione Importar medios como metraje y capas fusionadas .
Paso 3: configura tu composición. Animación del logotipo.
Una composición (comp) es un contenedor que le permite componer, editar y aplicar animación a archivos multimedia. Una producción más grande, como una película, contendrá varias pistas organizadas en un panel de proyecto. Así que puedes pensar en las pistas como una única escena de esa película, y cada pista tendrá su propia línea de tiempo independiente. En nuestro caso, una animación de logo que dure menos de cinco segundos requiere de muy pocas composiciones.
Para personalizar su composición, arrastre los archivos multimedia al lado izquierdo del panel de la línea de tiempo.
Comencemos con un trasfondo simple. Haga clic derecho en el panel de diseño y seleccione " Crear" > " Sólido" . Como mi logo es blanco, elegí sólido. color negro, pero puedes elegir cualquier color. En la siguiente ventana, asigne un nombre al sólido (en mi caso "BG"), haga clic en " Hacer tamaño computadora" y seleccione " OK" . Ahora arrastre el archivo de su logotipo desde el panel Proyecto al panel Línea de tiempo y debería ver su logotipo en una vista previa en la ventana de composición. De lo contrario, asegúrese de reorganizar las capas arrastrando el fondo sólido debajo del archivo del logotipo.
Haga clic derecho en el archivo del logotipo en el panel de diseño y seleccione Crear" > " Convertir a una composición multicapa" . Esto convertirá el archivo de su logotipo en una composición diferente (verá que el ícono ha cambiado). Al hacer doble clic en el archivo del logotipo, se abrirá una nueva pestaña y accederá a esta nueva composición que contiene todas las capas individuales que ha configurado en Illustrator. Ahora puedes ver cómo funcionan las composiciones: son esencialmente como subcarpetas.
Animación del logotipo
Si lo desea, puede convertir cada una de estas capas en composiciones separadas haciendo clic derecho y seleccionando Composición preliminar" . Esto le dará a esta capa su propia línea de tiempo de animación, anidada dentro de la composición anterior. Y si quieres animar todo el logo a la vez, debes usar una línea de tiempo asociada a la composición principal.
Dejando eso de lado, comprendamos cómo funcionan estas líneas de tiempo para la animación.
Paso 4: animar el logotipo usando fotogramas clave
After Effects (y la mayoría del software de animación) funciona mediante fotogramas clave. Los fotogramas clave son esencialmente marcadores que puedes establecer en la línea de tiempo para determinar cuándo deben ocurrir los estados de inicio y fin de tu animación.
Por ejemplo, comencemos con una animación muy simple: aparición gradual. Un objeto tiene diferentes atributos adjuntos y los atributos que cambian durante un período de tiempo determinado son esencialmente animación. Para ver estos atributos, haga clic en el ícono Expandir al lado del logotipo seguido de propiedad "Convertir" .
Cree fotogramas clave haciendo clic en el icono del cronómetro junto a Propiedades en el panel Línea de tiempo.
Para una animación que se desvanece, desea trabajar con el atributo que mide la visibilidad de un objeto: opacidad. La opacidad está establecida en 100% porque, de forma predeterminada, el logotipo es completamente visible.
Haga clic en el icono del cronómetro junto a la opción Opacidad y verá un diamante donde está colocado el marcador del cabezal de reproducción (la línea azul tenue que cruza la línea de tiempo). Este es un fotograma clave, básicamente una instantánea del valor actual de un atributo específico. Mueva el fotograma clave haciendo clic y arrastrándolo hasta la marca de 2 segundos en la línea de tiempo. Arrastre el control deslizante de nuevo a la marca de 0 segundos, luego cree otro fotograma clave y establezca la opacidad en 0%. Presione la barra espaciadora para ver la animación en la ventana de composición.
Despues de los efectos
Verás que has creado una animación de aparición gradual suave al cambiar la opacidad del 0% al 100% en 2 segundos con solo dos fotogramas clave. Así es como se hace toda la animación en After Effects. Puede crear un fotograma clave inicial y un fotograma clave final en diferentes intervalos a lo largo de la línea de tiempo, y After Effects calcula automáticamente las transiciones de fotogramas necesarias para llegar del punto A al punto B (tradicionalmente llamado interpolación de fotogramas en el negocio de la animación).
Se crea una animación sencilla y fluida utilizando dos fotogramas clave para la propiedad Opacidad.
Puedes ver que hay una serie de atributos con los que puedes trabajar en Transformar propiedad, que aquí explicaremos brevemente. Siéntete libre de experimentar con fotogramas clave y modificar cada uno para tener una idea de sus capacidades de animación:
- Posición : Este atributo describe la posición del logotipo en el espacio X, Y en la pantalla de diseño y permite animar el movimiento lineal.
- escala : este atributo describe el tamaño del logotipo (como porcentaje del tamaño completo del archivo original) y le permite crear animaciones de acercamiento o reducción.
- Rotación : Este atributo describe la orientación en grados y le permite crear animaciones de rotación.
Consejos de un profesional :
Cuando se trata de animar un logotipo, tiene sentido trabajar hacia atrás (como hicimos con el desvanecimiento) ya que la animación debe terminar en el logotipo completo y terminado. Esto significa que debe crear fotogramas clave antes de cambiar algo para tener instantáneas de los valores de los atributos en su estado predeterminado. Luego puede mover estos fotogramas clave al punto final deseado en la línea de tiempo (sin importar cuánto tiempo desee que dure la animación) y crear nuevos fotogramas clave para los cambios al comienzo de la línea de tiempo.
Paso 5. Anima el logo usando capas de formas.
Ahora pasemos a técnicas de animación más interesantes utilizando capas de formas. Las capas de formas son objetos que contienen información de ruta, como puntos de anclaje y líneas conectoras (similares a las de los programas vectoriales), y su manipulación abre la puerta a toda una gama de posibilidades de animación más allá. Transformar propiedades .
¿Cómo elegir el color adecuado para tu logo?
Primero vamos a convertir el logo en una capa de forma. En el panel Composición en capas (las capas creadas en el paso 3), seleccione todas sus capas, haga clic derecho y seleccione " Crear" > " Crea formas a partir de una capa vectorial" . Verás que cada capa está duplicada con una estrella al lado; esta es una capa de forma. Anidado debajo de la capa de forma, encontrará Propiedad de contenido además de Transformar propiedad . A la derecha de Propiedades de contenido También verás un botón " Agregar" , que te permitirá seleccionar aún más atributos para animar.
Las capas de formas contienen un botón Agregar (a la derecha de la propiedad Contenido) que le permite agregar todo tipo de propiedades animadas, como trazados de recorte.
Escalar un objeto en Adobe Illustrator
Recortar caminos
Para mi logotipo, utilicé una animación bastante común y útil usando la propiedad Recortar rutas. Para hacer esto agregué "Trazados de cultivo" usando el botón " Agregar" a las capas de forma para cada letra, establezca el fotograma clave del atributo Fin en 0% al inicio de la línea de tiempo y en 100% después de aproximadamente 1 segundo. Como puedes ver, el contorno de las letras parece dibujado por una mano invisible en tiempo real.
El uso de la propiedad Recortar rutas le permite animar líneas para que se dibujen solas en tiempo real.
Además, quería agregar alguna animación de acento al fondo. Como trabajo en blanco y negro, elegí un efecto de túnel en bucle que recuerda a Twilight Zone. Para hacer esto, utilicé la herramienta Polígono en el panel Herramientas para dibujar una forma en el centro de mi composición, creando una nueva capa de forma.
Luego agregué una propiedad Repetidor, centré la posición y aumenté el número de copias. Esto duplica la forma, creando un túnel aparentemente interminable. Ajustar la escala aumenta el espacio entre cada copia y cambiar la rotación orienta las copias en diferentes direcciones para lograr interés visual.
Finalmente, para darle más sabor, puse un fotograma clave con un desplazamiento de 0 al inicio de la línea de tiempo y luego lo establecí en un valor negativo en la línea de tiempo.
Usando una capa de forma poligonal y la propiedad Repetidor, pude crear un fondo animado.
Probablemente hayas adivinado que existen muchas opciones para las capas de formas. Es cierto: hay cursos online completos sobre el tema en Internet y conviene tomarse el tiempo para experimentar, practicar y aprender.
Tampoco puedo decirte qué estilo de animación se adaptará a tu logotipo o qué herramientas específicas animaciones que necesitarás para lograr este estilo. Sin embargo, puedo darte consejos sobre cómo descubrirlo por ti mismo. Busque inspiración en otros logotipos animados, como los de sus competidores, las marcas que admira y/o sitios como Pinterest o Dribbble, tal como lo hizo cuando creó el logotipo originalmente.
Descubrirás que una vez que comiences a analizarlos utilizando tus nuevos conocimientos sobre cómo animar un logotipo, muchos de ellos se basan en simples manipulaciones con formas y transformaciones (incluso aquellas que están claramente superpuestas con efectos estilizados avanzados). Una vez que encuentre algunas que le gusten, puede trabajar hacia atrás en After Effects para intentar aplicar ingeniería inversa a esas animaciones para practicar.
Paso 6: establece la hora.
Hablemos de tiempo, que describe el ritmo de los fotogramas de animación a lo largo de la animación. Puede ver una representación visual del tiempo yendo al Editor de gráficos. Para hacer esto, haga clic en el ícono del gráfico (etiquetado Editor de gráficos cuando pasa el cursor sobre él) en la parte superior del panel de la línea de tiempo y esto cambiará la línea de tiempo a un gráfico de líneas.
Si hace clic en uno de los atributos del fotograma clave, verá una línea recta de un fotograma clave al siguiente. En este momento, como solo estábamos creando fotogramas clave para los puntos inicial y final, dejamos que After Effects se encargara de la sincronización. Sin dirección, After Effects mueve cada fotograma de la animación de manera uniforme, dando como resultado una línea perfectamente recta.
El editor de gráficos muestra la sincronización de los fotogramas clave como se muestra en el gráfico de líneas.
Sin embargo, el cambio intencionado en el tiempo es lo que le da a la animación una sensación de realismo. Por ejemplo, en una animación de una pelota que rebota, la pelota se mueve más lentamente a la altura del rebote y más rápido a medida que se acerca al suelo debido al impulso y la gravedad. En otras palabras, no se mueve a la misma velocidad durante toda la animación y, si lo hiciera, destacaría como un robot.
Las herramientas Bezier, ubicadas en la parte inferior del editor de gráficos, le permiten ajustar la curvatura de la línea del gráfico.
Convertir fotogramas clave a Auto Bézier
El Editor de gráficos le permite ajustar el tiempo de su propia animación mediante el uso de los llamados controles Bézier para transformar una línea gráfica en una curva. En la esquina inferior derecha del editor de gráficos, verá algunos íconos de puntos cuadrados adjuntos a líneas; estas son herramientas Bezier.
Haga clic en uno de los fotogramas clave y coloque el cursor sobre las herramientas de Bezier hasta encontrar el que dice " Convertir fotogramas clave a Auto Bézier" . Al hacer clic en esto, verá aparecer un marcador amarillo en el gráfico. Arrastrar este controlador hará que la línea se doble y esto cambiará el tiempo de la animación. Cuando la curva es más pronunciada, los fotogramas se reproducirán más rápido y cuando la curva es más suave, los fotogramas se reproducirán más lentamente.
Una curva más pronunciada corresponde a una sincronización más rápida y una curva más suave corresponde a una sincronización más lenta.
Para comprender verdaderamente los matices de ajustar su propio tiempo se requiere experiencia en animación, razón por la cual ajustar las curvas de Bézier manualmente es un tema más avanzado. En esta guía para principiantes, recomiendo utilizar la herramienta Bezier. Fácil Facilidad (que aplica una curva automática al fotograma clave que seleccione) para todos los intervalos de tiempo de la animación. Puedes aplicar Fácil Facilidad a un fotograma clave fuera del editor de diagramas seleccionando el fotograma clave y haciendo clic derecho.
Paso 7: exporta tu logotipo.
Cuando esté listo para exportar su logotipo animado terminado, seleccione " Expediente" > " Exportar" > " Agregue Adobe Media Encoder a la cola" . Exportaciones de After Effects de forma predeterminada archivo en el formato mp4, que es adecuado para vídeo. Como queremos crear un archivo de imagen de nuestro logotipo que se pueda compartir, lo exportaremos como un GIF animado. En la ventana de Media Encoder, haga clic en la flecha junto a la línea de texto azul resaltada debajo de la palabra "Formato" y seleccione " GIF animado" . También puedes configurar la carpeta de destino para tu archivo terminado haciendo clic en el texto azul debajo de las palabras "Archivo de salida".
Para exportar un archivo, vaya a Archivo > Exportar > Agregar a la cola de Adobe Media Encoder y seleccione Gif animado en la lista desplegable de la columna Formato.
Haga doble clic en el texto azul resaltado debajo del ajuste preestablecido para abrir la ventana Opciones de exportación. Hay algunas opciones que querrás considerar para reducir el tamaño de tu archivo: Calidad (la configuré en 20), Velocidad de fotogramas (la configuré en 10, aunque se recomiendan velocidades de fotogramas (fps) más altas para video) y Duración, que es la barra azul en la vista previa (recorté la mía a 4 segundos). Seleccionar Ok para cerrar esta ventana.
Cuando haya terminado, seleccione el ícono verde Reproducir en la esquina superior derecha de Media Encoder y su archivo se mostrará en la carpeta de destino elegida. Eso es todo: ¡animación del logo terminada!
Da vida a tu marca con la animación del logotipo.
-
La animación de logotipos es más que una simple tendencia popular que las marcas se ven obligadas a seguir. También hay una magia innegable en la animación de logotipos y es una excelente manera de crear un momento de placer visual para todos los que interactúan con su marca. Y afortunadamente, el software de animación ha evolucionado para que casi cualquier persona, independientemente de su habilidad, pueda agregar un poco de esa magia a su propio logotipo.
Dicho esto, si bien este tutorial está destinado a iniciarte en los conceptos básicos de la animación de logotipos, se necesita mucho ensayo y error, práctica y experimentación para llegar a algo más allá de la animación básica. Si desea una animación de logotipo verdaderamente especial, vale la pena invertir en un animador de logotipos profesional.
Deja un comentario