Koja veličina banera ti treba?
Ne postoji jedna veličina koju koristi svaka lista servera. Svaka lista ima svoja pravila za širinu, visinu, tip i težinu fajla, pa ih proveri pre nego što otpremiš baner. Ovo su veličine koje Banner Studio izvozi i za šta su dobre:
| Veličina | Pikseli | Dobro za |
|---|---|---|
| Klasičan web baner | 468×60 | Stari IAB format „full banner”. Mnogi sajtovi i liste ga i dalje koriste, iako ga je IAB izbacio sa svoje liste standarda 2011. godine. |
| Kartica na listi servera | 740×200 | Baner na tvojoj kartici i stranici servera na BestMCServerList, širi i viši od klasičnog banera. |
| Širok header | 960×200 | Zaglavlja sajtova, objave na forumima i obaveštenja na Discordu. |
Napravi poseban baner za svaku veličinu umesto da razvlačiš jedan fajl. Dizajn od 740×200 stisnut u 468×60 izgubi veći deo teksta, a skaliranje pixel arta na čudne veličine ga zamuti.
BestMCServerList prihvata banere kao GIF, PNG, WebP ili JPEG, do 2 MB.
Korak 1: Odluči šta baner treba da kaže
Baner se pročita otprilike za vreme koje ti treba da skroluješ pored njega. Izaberi tri stvari, a ostalo izbaci:
- Ime servera, onoliko veliko koliko prostor dozvoljava.
- Jedan mamac: game mode ili ona jedna stvar po kojoj se razlikuješ, na primer „Survival sa gradovima” ili „Skyblock 1.21”.
- Adresu, da igrači mogu da je kopiraju bez otvaranja tvoje stranice.
Liste funkcija, Discord linkovi i dugi slogani ne staju u 60 piksela visine. Stavi ih u opis servera.
Korak 2: Dizajniraj za čitljivost
- Veliki pikselski tekst. Na baneru 468×60 ime treba da zauzme veći deo visine. Tanki fontovi i sitni slogani se pretvore u šum.
- Kontrast. Svetao tekst sa tamnom ivicom radi na svakoj pozadini, i na šarenim pejzažima i česticama.
- Mirna pozadina. Oblaci, zvezde ili voda u pokretu su u redu. Pozadina koja se pomera koliko i tekst odvlači pogled sa imena.
- Prvi frejm koji radi i sam. Pobrini se da se ime i adresa vide već u prvom frejmu. Neka mesta prikazuju statičnu sliku, a to je obično prvi frejm.
- Usklađene boje. Koristi iste boje i simbol kao na ikonici servera i u MOTD-u, da te igrači prepoznaju i na listi, i u igri, i na Discordu.
Korak 3: Animiraj ga bez treperenja
Animacija treba da podrži baner, a ne da viče. Spore čestice, lagani odsjaj preko logoa ili oblaci koji plutaju privlače pažnju, a tekst ostaje lako čitljiv.
Izbegavaj jake blicove i brzo treptanje. Smernice za pristupačnost weba (WCAG 2.1, kriterijum uspeha 2.3.1) kažu da sadržaj ne bi trebalo da trepne više od tri puta u sekundi, jer treperenje može da izazove napade. Glatka petlja je i prosto prijatnija na stranici sa mnogo banera.
Napravi petlju bez šava: poslednji frejm treba da vodi nazad u prvi. Animirani GIF može da se ponavlja beskonačno; u fajlu je to broj ponavljanja 0 u ekstenziji NETSCAPE2.0. Banner Studio izvozi GIF-ove koji se vrte u krug.
Korak 4: Neka GIF fajl ostane mali
GIF čuva svaki frejm, a svaki frejm može da ima svoju paletu od najviše 256 boja. Fajl raste sa veličinom platna, brojem frejmova i količinom detalja koji se menjaju od frejma do frejma. Ovi koraci ga smanjuju, otprilike od najvećeg efekta ka najmanjem:
- Smanji frame rate. 10 do 12 frejmova u sekundi je dovoljno za većinu pikselskih animacija.
- Skrati petlju. Dve do četiri sekunde su sasvim dovoljne za čestice ili lagani odsjaj.
- Koristi krupnije piksele. Veći pikseli u artu se kompresuju mnogo bolje od sitnih detalja.
- Izbaci sitan šum i čestice. Najviše koštaju male stvari koje se menjaju u svakom frejmu.
- Koristi manje boja. 64 boje umesto 128 ili 256 u pixel artu često izgledaju isto.
U Banner Studiju merač težine procenjuje fajl dok ga uređuješ. Ako je baner preko limita, „Make it fit 2 MB” isprobava ove korake jedan za drugim i staje čim fajl stane.
Korak 5: Otpremi ga i koristi i na drugim mestima
Izvezi GIF za animaciju ili PNG ako sajt prihvata samo statične slike. Na BestMCServerList gotov baner možeš da pošalješ direktno na jedan od svojih servera preko „Use this banner” ili da otpremiš fajl u polje za baner u formi servera.
Na svom sajtu slici daj fiksnu širinu i visinu, da stranica ne skače dok se GIF učitava, i smislen 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>Za obaveštenja na Discordu i objave na forumima, širok header 960×200 ima mesta za ime, mamac i adresu krupnim slovima.
Česte greške
| Problem | Rešenje |
|---|---|
| Otpremanje je odbijeno jer je fajl prevelik | Smanji frame rate, skrati petlju ili koristi manje boja. Proveri limit svake liste. |
| Tekst se ne može pročitati na verziji 468×60 | Napravi poseban dizajn za tu veličinu, samo sa imenom i adresom. |
| Baner izgleda mutno | Skaliran je na veličinu za koju nije napravljen. Izvezi ga u tačnoj veličini koju lista traži. |
| Boje imaju pruge ili tačkice | Gradijent je sveden na premalo boja. Koristi ravne površine boja ili dozvoli više boja. |
| Petlja skače | Poslednji frejm ne vodi nazad u prvi. Neka elementi u pokretu izlaze iz kadra i ulaze u njega istom brzinom. |
| Sve trepće | Uspori animaciju i izbegavaj blicove, posebno više od tri u sekundi. |
Kad je baner gotov, pomaže ti u većem zadatku: kako da dovedeš prve igrače na svoj server.
