Какой размер баннера тебе нужен?
Единого размера для всех списков серверов нет. Каждый список сам задаёт правила по ширине, высоте, формату и весу файла, так что проверь их перед загрузкой. Вот размеры, которые экспортирует Banner Studio, и для чего они подходят:
| Размер | Пиксели | Для чего |
|---|---|---|
| Классический веб-баннер | 468×60 | Старый формат IAB «full banner». Многие сайты и списки до сих пор его используют, хотя IAB убрал его из своего стандартного перечня ещё в 2011 году. |
| Карточка в списке серверов | 740×200 | Баннер на твоей карточке и странице сервера на BestMCServerList – шире и выше классического баннера. |
| Широкая шапка | 960×200 | Шапки сайтов, посты на форумах и анонсы в Discord. |
Делай отдельный баннер под каждый размер, а не растягивай один файл. Дизайн 740×200, втиснутый в 468×60, теряет большую часть текста, а пиксель-арт при масштабировании до нестандартных размеров становится мыльным.
BestMCServerList принимает баннеры в форматах GIF, PNG, WebP или JPEG, до 2 МБ.
Шаг 1: реши, что должен сказать баннер
Баннер читают примерно за то время, пока его пролистывают. Выбери три вещи, а остальное убери:
- Название сервера – настолько крупно, насколько позволяет место.
- Одна фишка: режим игры или то единственное, чем ты отличаешься, например «Выживание с городами» или «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 в пиксель-арте часто выглядят так же.
В Banner Studio индикатор веса оценивает размер файла прямо во время редактирования. Если баннер не укладывается в лимит, кнопка «Make it fit 2 MB» пробует эти шаги один за другим и останавливается, как только файл влезает.
Шаг 5: загрузи баннер и используй его в других местах
Экспортируй GIF для анимации или PNG, если сайт принимает только статичные картинки. На BestMCServerList готовый баннер можно сразу отправить на одну из своих страниц серверов кнопкой «Use this banner» или загрузить файл в поле баннера в форме сервера.
На своём сайте задай картинке фиксированные ширину и высоту, чтобы страница не прыгала, пока грузится 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 текст не читается | Сделай для этого размера отдельный дизайн только с названием и адресом. |
| Баннер выглядит мыльным | Его масштабировали до размера, под который он не делался. Экспортируй его ровно в том размере, который нужен списку. |
| На цветах полосы или точки | Градиент урезали до слишком малого числа цветов. Используй однотонные области или разреши больше цветов. |
| Цикл дёргается | Последний кадр не переходит в первый. Пусть движущиеся элементы уходят из кадра и входят в него с одинаковой скоростью. |
| Всё мигает | Замедли анимацию и избегай вспышек, особенно чаще трёх раз в секунду. |
Готовый баннер поможет и в задаче побольше – привести на сервер первых игроков.
