Welk bannerformaat heb je nodig?
Er is niet één formaat dat elke serverlijst gebruikt. Elke lijst heeft eigen regels voor breedte, hoogte, bestandstype en bestandsgrootte, dus controleer die voordat je uploadt. Dit zijn de formaten die Banner Studio exporteert en waar ze goed voor zijn:
| Formaat | Pixels | Goed voor |
|---|---|---|
| Klassieke webbanner | 468×60 | Het oude IAB-formaat „full banner”. Veel sites en lijsten gebruiken het nog steeds, ook al heeft de IAB het in 2011 uit de standaardlijst gehaald. |
| Serverlijstkaart | 740×200 | De banner op je BestMCServerList-kaart en serverpagina, breder en hoger dan een klassieke banner. |
| Brede header | 960×200 | Websiteheaders, forumberichten en Discord-aankondigingen. |
Maak per formaat een eigen banner in plaats van één bestand uit te rekken. Een ontwerp van 740×200 dat in 468×60 wordt geperst, verliest het grootste deel van zijn tekst, en pixelart schalen naar vreemde formaten maakt hem wazig.
BestMCServerList accepteert banners als GIF, PNG, WebP of JPEG, tot 2 MB.
Stap 1: Bepaal wat de banner moet zeggen
Een banner wordt gelezen in ongeveer de tijd die het kost om eroverheen te scrollen. Kies drie dingen en laat de rest weg:
- De servernaam, zo groot als de ruimte toelaat.
- Eén haakje: de spelmodus of het ene ding waarin je anders bent, bijvoorbeeld „Survival met steden” of „Skyblock 1.21”.
- Het adres, zodat spelers het kunnen kopiëren zonder je pagina te openen.
Featurelijsten, Discord-links en lange slogans passen niet in 60 pixels hoogte. Zet ze in plaats daarvan in je serverbeschrijving.
Stap 2: Ontwerp voor leesbaarheid
- Grote pixeltekst. Op een banner van 468×60 moet de naam het grootste deel van de hoogte vullen. Dunne lettertypes en kleine taglines worden ruis.
- Contrast. Lichte tekst met een donkere rand werkt op elke achtergrond, ook op drukke landschappen en particles.
- Een rustige achtergrond. Bewegende wolken, sterren of water zijn prima. Een achtergrond die net zoveel beweegt als de tekst, trekt het oog weg van de naam.
- Een eerste frame dat op zichzelf werkt. Zorg dat de naam en het adres al in frame één zichtbaar zijn. Sommige plekken tonen een stilstaand beeld, en dat is meestal het eerste frame.
- Bijpassende kleuren. Gebruik dezelfde kleuren en hetzelfde symbool als je servericoon en je MOTD, zodat spelers je herkennen in de lijst, de game en Discord.
Stap 3: Animeer zonder te flitsen
Animatie moet de banner ondersteunen, niet schreeuwen. Langzame particles, een lichtstreep over het logo of drijvende wolken trekken de aandacht zonder de tekst moeilijk leesbaar te maken.
Vermijd harde flitsen en snel knipperen. De richtlijnen voor webtoegankelijkheid (WCAG 2.1, succescriterium 2.3.1) zeggen dat inhoud niet vaker dan drie keer per seconde mag flitsen, omdat flitsen epileptische aanvallen kan uitlokken. Een vloeiende loop is op een pagina met veel banners ook gewoon prettiger.
Maak de loop naadloos: het laatste frame moet weer overlopen in het eerste. Een geanimeerde GIF kan eindeloos herhalen; in het bestand is dat een loop count van 0 in de NETSCAPE2.0-extensie. Banner Studio exporteert GIF’s die doorlopen.
Stap 4: Houd het GIF-bestand klein
Een GIF slaat elk frame op, en elk frame kan een eigen palet van maximaal 256 kleuren hebben. Het bestand groeit met de canvasgrootte, het aantal frames en de hoeveelheid detail die van frame tot frame verandert. Deze stappen maken het kleiner, ruwweg van het grootste naar het kleinste effect:
- Verlaag de framerate. 10 tot 12 frames per seconde is genoeg voor de meeste pixelanimaties.
- Maak de loop korter. Twee tot vier seconden is ruim voldoende voor particles of een lichtstreep.
- Gebruik grovere pixels. Grotere artpixels comprimeren veel beter dan fijn detail.
- Schrap fijne ruis en particles. Kleine dingen die in elk frame veranderen, kosten het meest.
- Gebruik minder kleuren. 64 kleuren in plaats van 128 of 256 ziet er bij pixelart vaak hetzelfde uit.
In Banner Studio schat de groottemeter het bestand terwijl je bewerkt. Zit de banner boven de limiet, dan probeert „Make it fit 2 MB” (passend maken voor 2 MB) deze stappen een voor een en stopt zodra het bestand past.
Stap 5: Upload hem en gebruik hem elders
Exporteer een GIF voor de animatie, of een PNG als een site alleen stilstaande beelden accepteert. Op BestMCServerList kun je de afgewerkte banner met de knop „Use this banner” direct naar een van je vermeldingen sturen, of het bestand uploaden in het bannerveld van je serverformulier.
Geef de afbeelding op je eigen website een vaste breedte en hoogte, zodat de pagina niet verspringt terwijl de GIF laadt, en een zinvolle alt-tekst:
<a href="https://example.com/">
<img src="/img/banner-468x60.gif" width="468" height="60"
alt="MyServer – Survival with towns – play.example.com">
</a>Voor Discord-aankondigingen en forumberichten heeft de brede header van 960×200 ruimte voor de naam, een haakje en het adres in grote tekst.
Veelgemaakte fouten
| Probleem | Oplossing |
|---|---|
| De upload wordt geweigerd omdat hij te groot is | Verlaag de framerate, maak de loop korter of gebruik minder kleuren. Controleer de limiet van elke lijst. |
| De tekst is onleesbaar op de versie van 468×60 | Maak voor dat formaat een apart ontwerp met alleen de naam en het adres. |
| De banner ziet er wazig uit | Hij is geschaald naar een formaat waarvoor hij niet gemaakt is. Exporteer hem in precies het formaat dat de lijst wil. |
| De kleuren hebben banden of puntjes | Een gradiënt is teruggebracht tot te weinig kleuren. Gebruik egale kleurvlakken of sta meer kleuren toe. |
| De loop springt | Het laatste frame loopt niet over in het eerste. Laat bewegende elementen met dezelfde snelheid het beeld verlaten en binnenkomen. |
| Alles knippert | Vertraag de animatie en vermijd flitsen, vooral meer dan drie per seconde. |
Is de banner klaar, dan helpt hij bij de grotere klus: de eerste spelers naar je server halen.
