Koja veličina bannera ti treba?
Ne postoji jedna veličina koju koristi svaka lista servera. Svaka lista ima svoja pravila za širinu, visinu, tip i veličinu datoteke, zato ih provjeri prije uploada. Ovo su veličine koje Banner Studio izvozi i za šta su dobre:
| Veličina | Pikseli | Dobro za |
|---|---|---|
| Klasični web banner | 468×60 | Stari IAB format „full banner“. Mnoge stranice i liste ga i dalje koriste, iako ga je IAB 2011. izbacio sa svoje liste standarda. |
| Kartica na listi servera | 740×200 | Banner na tvojoj kartici i stranici servera na BestMCServerList, širi i viši od klasičnog bannera. |
| Široko zaglavlje | 960×200 | Zaglavlja web stranica, objave na forumima i najave na Discordu. |
Napravi poseban banner za svaku veličinu umjesto da razvlačiš jednu datoteku. Dizajn od 740×200 stisnut u 468×60 izgubi većinu teksta, a skaliranje pixel arta na neobične veličine ga zamuti.
BestMCServerList prima bannere kao GIF, PNG, WebP ili JPEG, do 2 MB.
Korak 1: odluči šta banner treba reći
Banner se pročita otprilike za vrijeme koje treba da se skrolira pored njega. Izaberi tri stvari, a ostalo izostavi:
- Ime servera, onoliko veliko koliko prostor dozvoljava.
- Jedan mamac: mod igre ili ono jedno po čemu se razlikuješ, na primjer „Survival s gradovima“ ili „Skyblock 1.21“.
- Adresu, da je igrači mogu kopirati bez otvaranja tvoje stranice.
Liste funkcija, Discord linkovi i dugi slogani ne stanu u 60 piksela visine. Stavi ih radije u opis servera.
Korak 2: dizajniraj za čitljivost
- Veliki pixel tekst. Na banneru od 468×60 ime treba zauzeti veći dio visine. Tanki fontovi i sitni slogani pretvore se u šum.
- Kontrast. Svijetli tekst s tamnim obrubom radi na svakoj pozadini, i na prenatrpanim pejzažima i česticama.
- Mirna pozadina. Oblaci, zvijezde ili voda koji se pomjeraju su u redu. Pozadina koja se miče koliko i tekst odvlači pogled s imena.
- Prvi frame koji radi i sam. Pobrini se da su ime i adresa vidljivi već u prvom frameu. Neka mjesta prikazuju statičnu sliku, a to je obično prvi frame.
- Usklađene boje. Koristi iste boje i simbol kao na svojoj ikoni servera i u svom MOTD-u, da te igrači prepoznaju na listi, u igri i na Discordu.
Korak 3: animiraj bez treperenja
Animacija treba podržati banner, a ne vikati. Spore čestice, svjetlosni prelaz preko logotipa ili oblaci koji plutaju privlače pažnju, a tekst ostaje lako čitljiv.
Izbjegavaj oštre bljeskove i brzo treptanje. Smjernice za web pristupačnost (WCAG 2.1, kriterij uspjeha 2.3.1) kažu da sadržaj ne smije bljesnuti više od tri puta u sekundi, jer bljeskanje može izazvati napade. Glatka petlja je uz to jednostavno ugodnija na stranici s mnogo bannera.
Napravi petlju bez šava: zadnji frame treba voditi nazad u prvi. Animirani GIF se može ponavljati beskonačno; u datoteci je to broj ponavljanja 0 u ekstenziji NETSCAPE2.0. Banner Studio izvozi GIF-ove koji se vrte u petlji.
Korak 4: neka GIF datoteka ostane mala
GIF čuva svaki frame, a svaki frame može imati svoju paletu od najviše 256 boja. Datoteka raste s veličinom platna, brojem frameova i količinom detalja koji se mijenjaju od framea do framea. Ovi koraci je smanjuju, otprilike od najvećeg efekta do najmanjeg:
- Smanji frame rate. 10 do 12 frameova u sekundi je dovoljno za većinu pixel animacija.
- Skrati petlju. Dvije do četiri sekunde je sasvim dovoljno za čestice ili svjetlosni prelaz.
- Koristi krupnije piksele. Veći pikseli u crtežu kompresuju se mnogo bolje od sitnih detalja.
- Izbaci sitni šum i čestice. Najviše koštaju male stvari koje se mijenjaju u svakom frameu.
- Koristi manje boja. 64 boje umjesto 128 ili 256 u pixel artu često izgledaju isto.
U Banner Studiju mjerač veličine procjenjuje datoteku dok uređuješ. Ako je banner preko limita, „Prilagodi na 2 MB“ isprobava ove korake jedan za drugim i staje čim datoteka stane.
Korak 5: uploaduj ga i koristi i drugdje
Izvezi GIF za animaciju ili PNG ako neka stranica prima samo statične slike. Na BestMCServerList gotov banner možeš poslati direktno na jedan od svojih unosa preko „Koristi ovaj banner“ ili uploadovati datoteku u polje za banner u formularu servera.
Na svojoj web stranici daj slici 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 najave na Discordu i objave na forumima, široko zaglavlje od 960×200 ima mjesta za ime, mamac i adresu velikim slovima.
Česte greške
| Problem | Rješenje |
|---|---|
| Upload se odbija jer je datoteka prevelika | Smanji frame rate, skrati petlju ili koristi manje boja. Provjeri limit svake liste. |
| Tekst se ne može pročitati u verziji 468×60 | Napravi poseban dizajn za tu veličinu samo s imenom i adresom. |
| Banner 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 boje ili dozvoli više boja. |
| Petlja skače | Zadnji frame ne vodi nazad u prvi. Neka elementi koji se kreću izlaze iz framea i ulaze u njega istom brzinom. |
| Sve trepće | Uspori animaciju i izbjegavaj bljeskove, posebno više od tri u sekundi. |
Kad je banner gotov, pomaže u većem poslu: kako dovesti prve igrače na svoj server.
