Какъв размер банер ти трябва?
Няма един размер, който всички списъци със сървъри използват. Всеки списък има свои правила за ширина, височина, тип и тежест на файла, затова ги провери, преди да качиш. Това са размерите, които Banner Studio експортира, и за какво са подходящи:
| Размер | Пиксели | Подходящ за |
|---|---|---|
| Класически уеб банер | 468×60 | Старият формат „full banner“ на IAB. Много сайтове и списъци още го използват, въпреки че IAB го махна от стандартния си списък през 2011 г. |
| Карта в списък със сървъри | 740×200 | Банерът на картата и на страницата на сървъра ти в BestMCServerList – по-широк и по-висок от класическия банер. |
| Широка шапка | 960×200 | Шапки на уебсайтове, постове във форуми и обяви в Discord. |
Направи отделен банер за всеки размер, вместо да разтягаш един файл. Дизайн 740×200, натъпкан в 468×60, губи по-голямата част от текста си, а мащабирането на pixel art до странни размери го размазва.
BestMCServerList приема банери като GIF, PNG, WebP или JPEG, до 2 MB.
Стъпка 1: Реши какво трябва да казва банерът
Банерът се чете за времето, за което скролваш покрай него. Избери три неща и махни останалото:
- Името на сървъра, толкова голямо, колкото позволява мястото.
- Една кука: режимът на игра или единственото нещо, което те отличава, например „Survival с градове“ или „Skyblock 1.21“.
- Адресът, за да могат играчите да го копират, без да отварят страницата ти.
Списъци с функции, линкове към Discord и дълги слогани не се побират в 60 пиксела височина. Сложи ги в описанието на сървъра.
Стъпка 2: Проектирай за четимост
- Голям пикселен текст. На банер 468×60 името трябва да заема по-голямата част от височината. Тънките шрифтове и малките подзаглавия се превръщат в шум.
- Контраст. Светъл текст с тъмен контур работи на всякакъв фон, включително на пъстри пейзажи и частици.
- Спокоен фон. Движещи се облаци, звезди или вода са наред. Фон, който се движи колкото текста, отклонява погледа от името.
- Първи кадър, който работи сам. Увери се, че името и адресът се виждат още в първия кадър. Някои места показват статично изображение и то обикновено е първият кадър.
- Съвпадащи цветове. Използвай същите цветове и символ като в иконата на сървъра и в MOTD-то, за да те разпознават играчите в списъка, в играта и в Discord.
Стъпка 3: Анимирай без примигване
Анимацията трябва да подкрепя банера, а не да крещи. Бавни частици, лек отблясък през логото или носещи се облаци привличат внимание, без да затрудняват четенето на текста.
Избягвай резки проблясъци и бързо мигане. Насоките за уеб достъпност (WCAG 2.1, критерий за успех 2.3.1) казват, че съдържанието не трябва да проблясва повече от три пъти в секунда, защото проблясването може да предизвика гърчове. Плавният цикъл е и просто по-приятен на страница с много банери.
Направи цикъла безпроблемен: последният кадър трябва да води обратно към първия. Анимираният GIF може да се повтаря безкрайно; във файла това е брой повторения 0 в разширението NETSCAPE2.0. Banner Studio експортира GIF-ове в цикъл.
Стъпка 4: Дръж GIF файла малък
GIF пази всеки кадър, а всеки кадър може да има собствена палитра до 256 цвята. Файлът расте с размера на платното, броя кадри и количеството детайли, които се променят от кадър на кадър. Тези стъпки го намаляват, грубо от най-големия ефект към най-малкия:
- Намали кадрите в секунда. 10 до 12 кадъра в секунда стигат за повечето пикселни анимации.
- Скъси цикъла. Две до четири секунди са напълно достатъчни за частици или лек отблясък.
- Използвай по-едри пиксели. По-големите пиксели се компресират далеч по-добре от финия детайл.
- Махни финия шум и частиците. Малките неща, които се променят във всеки кадър, струват най-много.
- Използвай по-малко цветове. 64 цвята вместо 128 или 256 при pixel art често изглеждат по същия начин.
В Banner Studio измерителят на размера оценява файла, докато редактираш. Ако банерът е над лимита, „Намали до 2 MB“ пробва тези стъпки една след друга и спира веднага щом файлът се побере.
Стъпка 5: Качи го и го използвай и другаде
Експортирай GIF за анимацията или PNG, ако даден сайт приема само статични изображения. В BestMCServerList можеш да изпратиш готовия банер директно към някоя от обявите си с „Използвай този банер“ или да качиш файла в полето за банер във формата на сървъра.
На собствения си уебсайт дай на изображението фиксирана ширина и височина, за да не подскача страницата, докато GIF-ът се зарежда, и смислен alt текст:
<a href="https://example.com/">
<img src="/img/banner-468x60.gif" width="468" height="60"
alt="MyServer – Survival with towns – play.example.com">
</a>За обяви в Discord и постове във форуми широката шапка 960×200 има място за името, куката и адреса с едър текст.
Чести грешки
| Проблем | Решение |
|---|---|
| Качването е отхвърлено като твърде голямо | Намали кадрите в секунда, скъси цикъла или използвай по-малко цветове. Провери лимита на всеки списък. |
| Текстът не се чете във версията 468×60 | Направи отделен дизайн за този размер само с името и адреса. |
| Банерът изглежда размазан | Мащабиран е до размер, за който не е правен. Експортирай го в точния размер, който иска списъкът. |
| Цветовете имат ивици или точки | Градиент е сведен до твърде малко цветове. Използвай плътни цветни площи или позволи повече цветове. |
| Цикълът подскача | Последният кадър не води обратно към първия. Направи така, че движещите се елементи да излизат и влизат в кадъра с еднаква скорост. |
| Всичко мига | Забави анимацията и избягвай проблясъци, особено повече от три в секунда. |
Щом банерът е готов, той помага в по-голямата задача – да докараш първите играчи на сървъра си.
