¿Qué tamaño de banner necesitas?
No hay un único tamaño que usen todas las listas de servidores. Cada lista fija sus propias reglas de ancho, alto, tipo de archivo y peso, así que revísalas antes de subir nada. Estos son los tamaños que exporta Banner Studio y para qué sirven:
| Tamaño | Píxeles | Ideal para |
|---|---|---|
| Banner web clásico | 468×60 | El antiguo formato "full banner" del IAB. Muchas webs y listas lo siguen usando, aunque el IAB lo quitó de su lista estándar en 2011. |
| Tarjeta de lista de servidores | 740×200 | El banner de tu tarjeta y de tu página de servidor en BestMCServerList, más ancho y más alto que un banner clásico. |
| Cabecera ancha | 960×200 | Cabeceras de webs, posts de foros y anuncios en Discord. |
Haz un banner por tamaño en lugar de estirar un solo archivo. Un diseño de 740×200 apretado en 468×60 pierde casi todo el texto, y escalar pixel art a tamaños raros lo vuelve borroso.
BestMCServerList acepta banners en GIF, PNG, WebP o JPEG, de hasta 2 MB.
Paso 1: decide qué tiene que decir el banner
Un banner se lee más o menos en el tiempo que tardas en pasar de largo al hacer scroll. Elige tres cosas y deja fuera el resto:
- El nombre del servidor, tan grande como permita el espacio.
- Un gancho: el modo de juego o lo que te hace distinto, por ejemplo "Survival con pueblos" o "Skyblock 1.21".
- La dirección, para que los jugadores puedan copiarla sin abrir tu página.
Listas de características, enlaces de Discord y eslóganes largos no caben en 60 píxeles de alto. Ponlos mejor en la descripción de tu servidor.
Paso 2: diseña para que se lea
- Texto pixelado grande. En un banner de 468×60 el nombre debería ocupar casi toda la altura. Las fuentes finas y los lemas pequeños se convierten en ruido.
- Contraste. Texto claro con contorno oscuro funciona sobre cualquier fondo, incluso paisajes recargados y partículas.
- Un fondo tranquilo. Nubes, estrellas o agua en movimiento están bien. Un fondo que se mueve tanto como el texto aparta la mirada del nombre.
- Un primer fotograma que funcione solo. Asegúrate de que el nombre y la dirección ya se ven en el primer fotograma. Algunos sitios muestran una imagen fija, y suele ser el primer fotograma.
- Colores a juego. Usa los mismos colores y símbolo que tu icono del servidor y tu MOTD, para que los jugadores te reconozcan en la lista, en el juego y en Discord.
Paso 3: anímalo sin parpadeos
La animación debe apoyar al banner, no gritar. Partículas lentas, un brillo suave que recorre el logo o nubes que se desplazan llaman la atención sin dificultar la lectura del texto.
Evita los destellos fuertes y el parpadeo rápido. Las pautas de accesibilidad web (WCAG 2.1, criterio de conformidad 2.3.1) indican que el contenido no debe destellar más de tres veces por segundo, porque los destellos pueden provocar convulsiones. Además, un bucle suave es simplemente más agradable en una página con muchos banners.
Haz que el bucle no se note: el último fotograma debe enlazar con el primero. Un GIF animado puede repetirse para siempre; en el archivo esto es un contador de repeticiones 0 en la extensión NETSCAPE2.0. Banner Studio exporta GIF en bucle.
Paso 4: mantén ligero el archivo GIF
Un GIF guarda cada fotograma, y cada fotograma puede tener su propia paleta de hasta 256 colores. El archivo crece con el tamaño del lienzo, el número de fotogramas y la cantidad de detalle que cambia de un fotograma a otro. Estos pasos lo reducen, más o menos del mayor efecto al menor:
- Baja los fotogramas por segundo. De 10 a 12 fotogramas por segundo bastan para la mayoría de animaciones pixeladas.
- Acorta el bucle. De dos a cuatro segundos sobran para partículas o un brillo.
- Usa píxeles más gruesos. Los píxeles grandes se comprimen mucho mejor que el detalle fino.
- Quita ruido fino y partículas. Las cosas pequeñas que cambian en cada fotograma son lo que más pesa.
- Usa menos colores. 64 colores en lugar de 128 o 256 a menudo se ven igual en pixel art.
En Banner Studio el medidor de tamaño estima el archivo mientras editas. Si el banner supera el límite, "Make it fit 2 MB" (ajustar a 2 MB) prueba estos pasos uno tras otro y se detiene en cuanto el archivo cabe.
Paso 5: súbelo y úsalo en otros sitios
Exporta un GIF para la animación, o un PNG si un sitio solo acepta imágenes fijas. En BestMCServerList puedes mandar el banner terminado directamente a una de tus fichas con "Use this banner" (usar este banner), o subir el archivo en el campo de banner del formulario de tu servidor.
En tu propia web, dale a la imagen un ancho y un alto fijos, para que la página no salte mientras carga el GIF, y un texto alternativo con sentido:
<a href="https://example.com/">
<img src="/img/banner-468x60.gif" width="468" height="60"
alt="MyServer – Survival with towns – play.example.com">
</a>Para anuncios en Discord y posts en foros, la cabecera ancha de 960×200 tiene sitio para el nombre, un gancho y la dirección en letra grande.
Errores frecuentes
| Problema | Solución |
|---|---|
| La subida se rechaza por ser demasiado grande | Baja los fotogramas por segundo, acorta el bucle o usa menos colores. Revisa el límite de cada lista. |
| El texto no se lee en la versión de 468×60 | Haz un diseño aparte para ese tamaño con solo el nombre y la dirección. |
| El banner se ve borroso | Se ha escalado a un tamaño para el que no estaba hecho. Expórtalo en el tamaño exacto que pide la lista. |
| Los colores tienen bandas o puntos | Un degradado se ha reducido a muy pocos colores. Usa zonas de color planas o permite más colores. |
| El bucle da un salto | El último fotograma no enlaza con el primero. Haz que los elementos en movimiento salgan y entren del cuadro a la misma velocidad. |
| Todo parpadea | Ralentiza la animación y evita los destellos, sobre todo más de tres por segundo. |
Con el banner terminado tienes una pieza más para el trabajo grande: conseguir los primeros jugadores para tu servidor.
