Який розмір банера тобі потрібен?
Немає одного розміру, який використовують усі списки серверів. Кожен список має власні правила щодо ширини, висоти, типу та ваги файлу, тож перевір їх перед завантаженням. Ось розміри, які експортує 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 | Зроби для цього розміру окремий дизайн лише з назвою та адресою. |
| Банер виглядає розмитим | Його масштабували до розміру, для якого він не створювався. Експортуй його точно в тому розмірі, який потрібен списку. |
| На кольорах смуги або крапки | Градієнт зменшили до надто малої кількості кольорів. Використовуй однотонні ділянки або дозволь більше кольорів. |
| Цикл стрибає | Останній кадр не переходить у перший. Зроби так, щоб рухомі елементи виходили з кадру й заходили в нього з однаковою швидкістю. |
| Усе блимає | Сповільни анімацію й уникай спалахів, особливо частіше ніж тричі на секунду. |
Коли банер готовий, він допомагає з більшим завданням – привести на сервер перших гравців.
