Un canal de Twitch muestra tu logotipo en más sitios que casi cualquier otra plataforma, y la mayoría son diminutos. La insignia en directo junto a los mensajes del chat. El avatar en la cuadrícula del directorio, compitiendo contra un centenar de otras miniaturas. La banda fuera de línea que permanece en pantalla mientras nadie emite. La esquina de overlay durante la emisión, encima de metraje de juego que cambia de color cada pocos segundos. Y la pantalla de inicio de la emisión, que es la única superficie con espacio suficiente para mostrar un logotipo realmente en movimiento.
Esa es la restricción que merece interiorizar pronto: en Twitch, la animación es la excepción y las miniaturas fijas son la norma. Lo que significa que una animación de logotipo para Twitch tiene que diseñarse alrededor de un fotograma fijo que ya funciona en todas partes. Acierta lo estático y la animación se convierte en un extra corto y de alto valor. La saltas y la animación es decoración encima de un logotipo que nadie puede leer.
Dónde aparece de verdad el logotipo
Conviene separar las superficies según el espacio que te dan, porque las decisiones de diseño se siguen directamente de eso.
Las miniaturas del directorio y las bandas fuera de línea son los emplazamientos estáticos más grandes, y la primera solo se muestra cuando estás en directo. El directorio es donde ocurre el descubrimiento, así que el logotipo compite contra cualquier otro canal de la categoría.
Los avatares aparecen en el chat, en las listas de seguidores y junto a las notificaciones de raid. Pequeños, repetidos, y a menudo la única versión que ve un espectador habitual.
La esquina de overlay es el emplazamiento sin tamaño fijo, porque depende de tu propia configuración de escena. También es el más hostil, porque se sitúa sobre metraje de juego en movimiento — un logotipo de overlay tiene que aguantar contra fondos arbitrarios cambiantes.
Las alertas, las transiciones y la pantalla de inicio de la emisión son donde vive el movimiento. Estas son las superficies hechas para un momento de marca en vez de una identidad persistente, y son donde un logotipo animado gana su sitio.
La banda fuera de línea es la superficie más ignorada
Cuando un canal no está en directo, la página sigue existiendo, y lo que ve un visitante es la banda fuera de línea más el avatar más los paneles que haya debajo. Para un canal que emite algunas tardes a la semana, esa es la mayor parte de su vida. Una buena parte de los visitantes por primera vez, y casi todos los que llegan desde una búsqueda o un enlace compartido a la hora equivocada, conocen primero el estado fuera de línea.
Dos reglas hacen que esa superficie funcione. Primero, la composición debe leerse como completa sin movimiento, porque nada en ella se mueve. Segundo, debe funcionar al tamaño del directorio, porque el mismo recurso a menudo se reutiliza como la miniatura que ve un espectador en la cuadrícula de navegación.
El fallo práctico aquí es una banda hecha para la vista de página a todo ancho y reutilizada como miniatura. Una composición que llena un rectángulo ancho pierde sus elementos más distintivos cuando se aprieta en una tarjeta pequeña, y el logotipo y la marca denominativa acaban compitiendo por unos pocos píxeles visibles. Construye primero la versión pequeña — ese es el mismo principio que se aplica a cualquier exportación de un <a href="/logo-animation-templates/logo-video-maker">creador de vídeo con logotipo</a>, y aquí aplica con más fuerza porque tantos emplazamientos de Twitch son pequeños.
Cómo hacer una animación que sobrevive verse silenciada
Las pantallas de inicio de emisión y las escenas de transición reproducen música ambiental automáticamente más a menudo de lo que nadie espera, y un espectador que llega a una página de canal a menudo lo hace con el sonido apagado. El propio Twitch reproduce el vídeo en directo silenciado, y el comportamiento de los medios con reproducción automática en los navegadores está bien cubierto en la documentación de MDN sobre la reproducción automática — la versión breve es que la reproducción empieza sin un gesto del usuario, así que el audio no puede darse por hecho.
Eso produce la prueba más útil de todas para una animación de logotipo de emisión. Silénciala y mírala entera. Si las llegadas se sienten arbitrarias sin la pista, el tempo está mal y ningún trabajo de audio lo reparará. Si el logotipo sigue aterrizando con intención en silencio, la animación está haciendo su trabajo y la música se convierte en un realce en vez de una muleta.
La segunda prueba es el comportamiento del bucle, y Twitch la hace inusualmente importante. Una pantalla de inicio de emisión dura minutos, así que cualquier animación allí hace bucle decenas de veces para un solo espectador. Una secuencia que se lee bien una vez puede volverse irritante a la decimoquinta repetición, y un corte seco en el punto de bucle que era invisible en la primera pasada se convierte en lo que notas en la décima.
La solución es hacer el bucle sin costuras en vez de largo. Un logotipo que se asienta y luego se disuelve en su propia posición inicial hará bucle sin una costura visible, mientras que una secuencia que abre desde negro y vuelve a negro anuncia cada reinicio. Si solo compruebas una cosa en una pantalla de inicio, comprueba el punto de bucle.
Color, contraste y el problema del overlay
Un logotipo de overlay se sitúa encima del metraje del juego. Eso significa que su fondo es lo que el juego esté renderizando, cambiando continuamente, a veces claro y a veces casi negro. Un logotipo que depende del contraste con un fondo predecible no sobrevive esto.
Tres enfoques funcionan.
Dale al logotipo de overlay su propio fondo contenido — una placa pequeña sólida o de forma sutil detrás del símbolo. Cuesta un poco de área de pantalla y hace el logotipo legible sin importar lo que pase debajo.
Usa un logotipo con contraste interno fuerte, para que al menos un elemento permanezca visible contra cualquier fondo. Un logotipo de un solo tono desaparecerá contra metraje del mismo tono en algún momento de la sesión. No es hipotético; pasa en la primera emisión.
Sácalo de la acción por completo. La mayoría de las interfaces de juego mantienen sus propios elementos de estado en esquinas predecibles, y el logotipo de overlay suele pertenecer a uno de los espacios que han dejado libres, que es la misma lógica detrás de las convenciones de zona segura que los gráficos de emisión usan desde hace décadas.
Hay una disciplina documentada detrás de esto. Un principio bien establecido en el uso de logotipos es que no se debe decorar un logotipo con sombras, bordes o marcos añadidos — la guía de marca de canal de YouTube establece la misma regla para avatares y arte de canal, y se generaliza: si un logotipo necesita un marco para ser visible, el problema de contraste subyacente no se ha resuelto. Curiosamente, una placa de overlay no es decoración en ese sentido — está resolviendo un problema de legibilidad, por eso se lee como deliberada donde una sombra proyectada se lee como un error.
También hay un argumento útil de contención para mantener todo esto simple. la investigación del Nielsen Norman Group sobre la animación en interfaces de usuario separa el movimiento que comunica un cambio de estado del que existe por sí mismo y concluye que la segunda categoría cuesta atención sin devolver nada. Una transición de emisión comunica que el contenido está a punto de empezar, que es un cambio de estado real. Un logotipo que gira, rebota, explota y se reensambla solo comunica que a alguien le gustó la línea de tiempo.
Los tamaños que necesitas, y cuántas veces los necesitas
El conjunto de trabajo para un canal es más pequeño de lo que la gente espera, y la mayor parte sale de un mismo dibujo.
Una fija cuadrada para avatares, exportada al mayor tamaño que acepta la plataforma y confirmada legible dentro de un recorte circular. Una fija ancha para la banda fuera de línea y la miniatura del directorio, hecha para que la composición sobrevive al mostrarse pequeña. Una animación vertical para historias, shorts y cualquier clip de formato corto recortado de emisiones. Una animación panorámica para la pantalla de inicio de la emisión, las transiciones y las alertas. Y un fotograma fijo exportado desde la retención limpia de la animación, para paneles y cualquier emplazamiento que no admita movimiento.
Para las exportaciones de animación, tanto la resolución como la proporción importan. la guía de YouTube sobre proporciones y resolución documenta 9:16 vertical, 1:1 cuadrado y 16:9 panorámico junto con una recomendación de 1080 por 1920 para vídeo vertical, y los clips y shorts de Twitch están en los mismos formatos. Exportar las tres desde una fuente mantiene la entrada de tempo idéntica entre ellas, lo cual importa porque una transición de emisión y su clip de formato corto emparejado a menudo se ven seguidos.
Un orden de producción que evita rehacer la animación
La secuencia de abajo está ordenada para mantener las decisiones difíciles por delante del trabajo caro, en vez de detrás.
Uno. Exporta el artwork como SVG, o como un PNG transparente al mayor tamaño disponible, y confirma la transparencia sobre un fondo oscuro.
Dos. Construye el recorte cuadrado del avatar y míralo al tamaño real del chat. Este es el emplazamiento más pequeño y el que restringe a todo lo demás.
Tres. Diseña la composición ancha de la banda para que sobrevive al mostrarse como miniatura pequeña, y compruébala a ese tamaño en vez de a todo ancho.
Cuatro. Decide el emplazamiento de overlay y su placa antes de construir la animación, porque una placa cambia el encuadre en que se sitúa el logotipo.
Cinco. Construye la versión animada como una llegada de un segundo con una retención limpia, y luego añade un bucle sin costuras para la pantalla de inicio.
Seis. Exporta las tres proporciones más una fija, y prueba la animación silenciada en cada tamaño en que aparecerá de verdad.
Si quieres ver la misma secuencia aplicada a otra plataforma, nuestro análisis de <a href="/blog/youtube-animated-logo">logotipos animados para YouTube</a> cubre el caso panorámico con más detalle, y <a href="/blog/video-logo">lo que un logotipo para vídeo debe hacer de forma distinta</a> cubre los cambios de diseño subyacentes que aplican a cualquier canal.
Qué sale mal con más frecuencia
Cinco fallos recurrentes, todos evitables.
El logotipo es ilegible en el chat. Los avatares del chat son pequeños y el logotipo se diseñó para la página del canal. Resuélvelo construyendo primero el recorte más pequeño, como se describió arriba.
El overlay desaparece contra metraje de juego brillante. Un logotipo de un solo tono siempre desaparecerá contra algo. Usa una placa o construye contraste antes de construir la animación.
La pantalla de inicio tiene una costura de bucle visible. El espectador aguanta ese bucle decenas de veces en una sesión. Arregla el punto de bucle, no la longitud.
La animación solo funciona con sonido. Compruébala silenciada, porque buena parte de tus espectadores llegan así.
La banda es preciosa a todo ancho e ilegible como miniatura. Construye primero la composición pequeña y deja que la versión ancha la siga.
Preguntas frecuentes
¿Dónde va el logotipo animado en un canal de Twitch?
Las pantallas de inicio de emisión, las transiciones, las alertas y la banda fuera de línea si admite vídeo. Esas son las superficies hechas para un momento de marca. Los avatares, las insignias del chat y la esquina de overlay son casi siempre estáticos, así que la versión animada debe tratarse como un añadido en vez de un reemplazo.
¿Qué tamaño debe tener una animación de logotipo para Twitch?
Exporta 9:16 a 1080 por 1920 para emplazamientos verticales y 16:9 para pantallas de inicio y transiciones, ambos desde una fuente para que el tempo coincide. El avatar y la banda estáticos son exportaciones separadas con sus propios requisitos, y ambos deben comprobarse al tamaño que realmente se muestran en vez de a todo ancho.
¿Debe tener sonido la animación del logotipo?
Diseñala para que funcione sin él. Un espectador que llega a una página de canal a menudo tiene el sonido apagado, así que la secuencia visual debe aterrizar por sí sola. Añade audio como un realce para los espectadores que sí tienen sonido en vez de dejar que el tempo dependa de él.
¿Cómo evito que el logotipo de overlay desaparezca en directo?
O dale una placa contenida detrás del símbolo o construye suficiente contraste interno para que un elemento permanezca visible contra cualquier fondo. Un logotipo de un solo tono sobre metraje de juego desaparecerá en algún momento de la sesión, y una sombra proyectada no lo arreglará.
¿Necesita un canal de Twitch un logotipo separado de la marca principal?
Normalmente no un diseño separado, sino un conjunto de exportaciones separado. El canal necesita un logotipo que sobreviva a un avatar circular, una miniatura pequeña del directorio, una esquina de overlay y una pantalla de inicio panorámica. Un solo dibujo puede servir a las cuatro si la más pequeña se diseña primero.
La conclusión
Abre tu canal como lo haría un desconocido — a la hora equivocada, cuando está fuera de línea, en una ventana de navegador del tamaño de un teléfono. Lo que ves es lo que ve la mayoría. Si el logotipo es legible ahí y la banda se sigue leyendo cuando tiene el tamaño de una miniatura, tienes la base, y la animación es un añadido corto y barato encima. Si no, ninguna cantidad de movimiento rescatará un logotipo que ya está perdiendo justo en el tamaño en que se muestra más