Koja ti veličina bannera treba?
Ne postoji jedna veličina koju koristi svaka lista servera. Svaka lista ima vlastita pravila za širinu, visinu, vrstu i veličinu datoteke, pa ih provjeri prije nego što uploadaš. Ovo su veličine koje Banner Studio izvozi i za što su dobre:
| Veličina | Pikseli | Za što |
|---|---|---|
| Klasični web banner | 468×60 | Stari IAB format „full banner”. Mnoge stranice i liste ga još 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 rastežeš jednu datoteku. Dizajn 740×200 stisnut na 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 što banner mora reći
Banner se pročita otprilike za vrijeme koje treba da ga prescrollaš. Odaberi tri stvari, a ostalo izostavi:
- Ime servera, onoliko veliko koliko prostor dopušta.
- Jedan mamac: način igre ili ona jedna stvar po kojoj se razlikuješ, npr. „Survival s gradovima” ili „Skyblock 1.21”.
- Adresu, da je igrači mogu kopirati bez otvaranja tvoje stranice.
Popisi značajki, Discord poveznice i dugi slogani ne stanu u 60 piksela visine. Stavi ih radije u opis servera.
Korak 2: dizajniraj za čitljivost
- Velik pikselni tekst. Na banneru 468×60 ime bi trebalo zauzeti većinu visine. Tanki fontovi i sitni podnaslovi pretvore se u šum.
- Kontrast. Svijetli tekst s tamnim obrubom radi na svakoj pozadini, i na prenatrpanim krajolicima i česticama.
- Mirna pozadina. Oblaci, zvijezde ili voda u pokretu su u redu. Pozadina koja se miče jednako kao tekst odvlači pogled s imena.
- Prvi frame koji radi sam za sebe. Pazi da su ime i adresa vidljivi već u prvom frameu. Neka mjesta prikazuju mirnu sliku, a to je obično prvi frame.
- Usklađene boje. Koristi iste boje i simbol kao na ikoni servera i u MOTD-u, da te igrači prepoznaju na listi, u igri i na Discordu.
Korak 3: animacija bez treperenja
Animacija treba podržati banner, a ne vikati. Spore čestice, lagani odsjaj preko logotipa ili oblaci koji plutaju privlače pažnju, a ne otežavaju čitanje teksta.
Izbjegavaj oštre bljeskove i brzo treptanje. Smjernice za pristupačnost weba (WCAG 2.1, kriterij uspjeha 2.3.1) kažu da sadržaj ne bi smio bljeskati više od tri puta u sekundi, jer bljeskanje može izazvati napadaje. Glatka petlja je i jednostavno ugodnija na stranici s puno bannera.
Napravi petlju bez šava: zadnji frame treba voditi natrag u prvi. Animirani GIF se može ponavljati beskonačno; u datoteci je to broj ponavljanja 0 u proširenju NETSCAPE2.0. Banner Studio izvozi GIF-ove koji se vrte u petlji.
Korak 4: neka GIF datoteka ostane mala
GIF sprema svaki frame, a svaki frame može imati vlastitu paletu do 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 učinka prema najmanjem:
- Smanji broj frameova u sekundi. 10 do 12 frameova u sekundi dovoljno je za većinu pikselnih animacija.
- Skrati petlju. Dvije do četiri sekunde sasvim su dovoljne za čestice ili lagani odsjaj.
- Koristi krupnije piksele. Veći pikseli grafike komprimiraju se puno bolje od sitnih detalja.
- Smanji 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 ograničenja, „Make it fit 2 MB” isprobava ove korake jedan za drugim i staje čim datoteka stane.
Korak 5: uploadaj ga i koristi i drugdje
Izvezi GIF za animaciju ili PNG ako stranica prima samo mirne slike. Na BestMCServerList gotov banner možeš poslati ravno na jedan od svojih unosa gumbom „Use this banner” ili uploadati datoteku u polju za banner u obrascu servera.
Na vlastitoj web stranici slici zadaj 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 960×200 ima mjesta za ime, mamac i adresu velikim slovima.
Česte greške
| Problem | Rješenje |
|---|---|
| Upload je odbijen jer je prevelik | Smanji broj frameova, skrati petlju ili koristi manje boja. Provjeri ograničenje svake liste. |
| Tekst je nečitljiv u verziji 468×60 | Napravi zaseban dizajn za tu veličinu, samo s imenom i adresom. |
| Banner izgleda mutno | Skaliran je na veličinu za koju nije napravljen. Izvezi ga točno u veličini koju lista traži. |
| Boje imaju pruge ili točkice | Gradijent je sveden na premalo boja. Koristi ravne plohe boje ili dopusti više boja. |
| Petlja skače | Zadnji frame ne vodi natrag u prvi. Neka elementi u pokretu izlaze iz kadra i ulaze u njega istom brzinom. |
| Sve trepće | Uspori animaciju i izbjegavaj bljeskove, pogotovo više od tri u sekundi. |
Kad je banner gotov, pomaže u većem zadatku: dovesti prve igrače na tvoj server.
