Пиксель-арт: что это, где применяется и как освоить

Главное заблуждение новичков — считать, что пиксель-арт получается, если уменьшить обычный рисунок или наложить фильтр «пикселизация». Так выходит каша: программа усредняет цвета соседних точек и не понимает, где у меча лезвие, а где рукоять. В пиксель-арте каждое решение принимает человек: здесь один тёмный пиксель обозначит блик на металле, а здесь два светлых сделают изгиб плавным.

Кому пригодится навык

Инди-разработчику пиксель-арт позволяет в одиночку собрать узнаваемую графику для прототипа или небольшой игры: маленький холст и короткая палитра сокращают объём работы. Иллюстратор с этим навыком берёт заказы на игровые ассеты, дизайнер делает мелкие иконки, которые остаются чёткими, и ретростилизацию для мерча. Для ребёнка или подростка это понятный вход в цифровое рисование: результат виден сразу, а персонажа можно тут же оживить в Scratch.

Другой подход нужен, когда картинку будут печатать крупно или масштабировать без ограничений: для логотипа лучше вектор. Реалистичный портрет в высоком разрешении тоже не задача пиксель-арта. О профессиях целиком — иллюстраторе, геймдизайнере, концепт-художнике — у нас есть отдельные материалы.

Чем пиксель-арт отличается от обычного рисунка

Ограничения здесь не прихоть художника, а часть ремесла, и пришли они из железа. У приставки NES каждая палитра спрайта содержит четыре цвета, один из которых прозрачный, так что персонажу доставалось всего три видимых цвета (NESdev Wiki). Современная «фантазийная консоль» PICO-8 специально повторяет такие рамки: экран 128×128 и 16 цветов, 256 спрайтов размером 8×8 (Lexaloffle).

Из ограничений выросли основные приёмы. Контур (outline) отделяет персонажа от фона. Ручное сглаживание (anti-aliasing) — промежуточные пиксели на стыке линии и фона, которые убирают зубчатость. Дизеринг — шахматное чередование двух цветов, которое глаз читает как третий. Типичная ошибка — «подушечное» затенение: тень повторяет контур изнутри, и объект выглядит надутым, а не освещённым с одной стороны.

Инструменты: где рисовать и что с лицензией

Самый распространённый редактор — Aseprite: слои и кадры на одной шкале времени, «луковая шкура» для анимации, индексированная палитра, экспорт в спрайт-лист. Лицензию стоит понимать до покупки. Проект был открытым с 2001 года, но в августе 2016-го разработчики заменили GPL v2 собственным соглашением (FAQ Aseprite). Исходный код по-прежнему лежит на GitHub, и EULA разрешает компилировать и изменять его «для личных целей» (п. 2(g)), но запрещает передавать копии программы третьим лицам (п. 2(b)) (EULA). На практике: собрать Aseprite из исходников для себя и рисовать в нём коммерческую графику законно, а раздать готовую сборку одноклассникам или команде нельзя. Готовая версия стоит от 19,99 доллара, а в пробной нельзя сохранять файлы (страница пробной версии).

Бесплатные альтернативы выросли из той же истории. LibreSprite — форк Aseprite от последнего коммита под GPL v2, который с тех пор развивают независимо (репозиторий LibreSprite); новых функций Aseprite в нём нет. Pixelorama написан на движке Godot, распространяется под лицензией MIT, умеет работать с тайлами и анимацией и запускается в браузере (репозиторий Pixelorama). В Photoshop тоже можно рисовать, если взять карандаш в 1 пиксель и интерполяцию «по соседним пикселам», иначе края расплывутся.

Учебный пример: спрайт героя для платформера

Разберём учебную задачу: инди-разработчику нужен герой 32×32 пикселя с анимацией бега. Работа начинается с силуэта одним тёмным цветом: если по пятну не понятно, где голова, оружие и направление движения, детализация не спасёт. Затем выбирается палитра, например из 8 цветов: по два-три оттенка для кожи, одежды и металла плюс контур. Свет ставится с одной стороны, обычно сверху слева.

Для цикла бега обычно хватает 6–8 кадров. Сначала рисуют ключевые позы — контакт ноги с землёй и высшую точку шага, — потом промежуточные, сверяясь с «луковой шкурой». Голова при беге слегка поднимается и опускается; если оставить её на месте, персонаж будет «скользить». Готовые кадры собираются в спрайт-лист — одну картинку с кадрами в сетке — и уходят в движок.

Экспорт без размытия

Частая беда появляется, когда рисунок уже готов: в игре или на сайте спрайт становится мутным. Браузер или движок по умолчанию увеличивает картинку с интерполяцией и смешивает цвета соседних пикселей. Для пиксель-арта нужен метод «ближайшего соседа» (nearest neighbor): каждый пиксель просто превращается в квадрат большего размера.

Второе условие — целочисленный масштаб. При увеличении в 2,5 раза одни пиксели станут шириной в два экранных, другие в три, и линии поплывут. В Godot с версии 4.2 есть режим масштабирования integer: множитель округляется вниз до целого, а свободное место по краям заполняется чёрными полосами. Документация рекомендует базовое разрешение 640×360: оно без полос масштабируется до 1280×720, 1920×1080, 2560×1440 и 3840×2160 (документация Godot). На сайте поможет CSS-свойство image-rendering со значением pixelated: картинка увеличивается «ближайшим соседом» до ближайшего целого кратного и только потом доводится до нужного размера (MDN). Для соцсетей надёжнее сразу экспортировать PNG в 400 или 800 %; JPEG не годится — он даёт артефакты вокруг контрастных линий.

Как начать и в каком порядке осваивать

Порядок ниже построен от ограничений к свободе: маленький холст и три цвета не дают спрятать слабую форму за деталями. Анимацию стоит брать только после того, как статичный спрайт получается аккуратным: каждый кадр — это отдельный рисунок, и ошибки в форме умножатся на число кадров. Экспорт и работа с движком идут в конце, когда есть что показывать.

1. Нарисуйте три предмета 16×16 — яблоко, меч, зелье — в палитре из трёх-четырёх цветов, без сглаживания.
2. Добавьте свет с одной стороны, попробуйте дизеринг и ручное сглаживание на тех же предметах.
3. Возьмите готовую палитру на 8–16 цветов и нарисуйте в ней персонажа 32×32.
4. Соберите простой тайлсет: землю, траву и камень, которые стыкуются без видимых швов.
5. Анимируйте персонажа: сначала дыхание в 2–4 кадрах, потом цикл ходьбы.
6. Экспортируйте спрайт-лист и проверьте его в движке или на веб-странице при целочисленном масштабе.

Если хочется пройти этот путь с наставником и в сжатые сроки, посмотрите обзор месячного онлайн-курса «Пиксель-арт» от Skillbox: в нём 22 урока в шести главах, работа идёт в Aseprite — от простых предметов и тайлсета до цвета, дизеринга, анимации персонажа и экспорта спрайт-листа, а на выходе пять проектов. Темп плотный, и без базового рисунка первые недели могут даться тяжело.

Упражнения и типичные ошибки

Проверить себя помогают два теста. Посмотрите на спрайт в масштабе 100 % на фоне будущего уровня: если персонаж сливается с землёй, нужен темнее контур или другой цвет одежды. Затем переведите картинку в оттенки серого: если форма читается, свет работает.

Частые ошибки новичков: лишние цвета без задачи; «ступеньки» разной длины, из-за которых дуга выглядит угловатой; спрайты разного масштаба в одной сцене; анимация без пауз на ключевых кадрах.

Тем, кто лучше учится на самостоятельных упражнениях, подойдёт трёхмесячный курс «Пиксель-арт» от XYZ School в формате видео- и текстовых уроков. Программа разбита на статику (контуры, дизеринг, сглаживание), покадровую анимацию по классическим принципам и игровой интерфейс; двенадцать упражнений складываются в набор графики для небольшой инди-игры. Рисовать можно мышью, но разбора ваших работ в этом варианте обучения нет — обратную связь придётся искать в сообществах.

Пиксель-арт для детей и подростков

Ребёнку пиксель-арт даётся легче, чем реалистичный рисунок: сетка подсказывает, куда ставить точку, а ошибка исправляется одним кликом. Взрослому стоит следить за перерывами — работа идёт при большом увеличении — и связывать рисунок с результатом: персонаж, который двигается в собственной мини-игре, мотивирует сильнее папки с картинками.

Для детей пиксель-арт чаще встречается как часть программ по цифровому рисованию, а не как отдельный курс. Например, на курсе «Цифровая живопись для детей» от Айтигенио (для детей от 9 лет, индивидуально или в мини-группе, занятия по 60 или 120 минут) пиксельные работы упоминаются среди проектов в треке по Photoshop и в треке для планшетов. Это не курс по спрайтам, поэтому объём пиксельной части и цену уточните у школы.

Как навык влияет на доход

Сам по себе пиксель-арт редко бывает отдельной ставкой в найме: в вакансиях его указывают как одно из требований к 2D-художнику или художнику игровой графики, рядом с анимацией и работой в движке. Надёжной статистики зарплат именно пиксель-художников в России нет, поэтому смотрите вакансии 2D-художника в своём регионе с фильтром по опыту и ключевыми словами «пиксель-арт» и «Aseprite» и отличайте вилки в объявлениях от фактических зарплат.

Фрилансеру навык открывает заказы на спрайты и тайлсеты для инди-студий, анимированные эмоуты для стримеров, иконки для приложений; инди-разработчик экономит на аутсорсе графики. Ещё один путь — продажа наборов ассетов. На itch.io продавец сам решает, какая доля уходит площадке: по умолчанию 10 %, можно выставить от 0 до 100 %. PayPal и Stripe берут примерно 0,30 доллара плюс 2,9 % с транзакции, поэтому площадка советует цену не ниже 2 долларов. Деньги доступны через 7 дней после покупки, вывод — от 5 долларов после проверки, а без налогового интервью удерживается 30 % (документация itch.io о платежах). Заранее проверьте, какой способ выплаты доступен в вашей стране.

Как выбрать обучение

Прежде чем платить, нарисуйте несколько спрайтов по плану выше в бесплатном Pixelorama или LibreSprite. Если через пару недель хочется продолжать, ищите программу с анимацией и экспортом в движок и уточните, будет ли разбор ваших работ. Для игровой графики важны тайлсеты и спрайт-листы, для иконок — размеры 16×16 и 24×24, для ребёнка — короткие занятия.

Сравнить школы по условиям обучения, рассрочке и поддержке помогает рейтинг онлайн-школ рисования и иллюстрации — он шире, чем пиксель-арт, и охватывает всё направление, поэтому конкретную программу по спрайтам ищите уже внутри выбранной школы. Выбирайте по тому, что сможете показать в конце: анимированный персонаж в работающей сцене говорит о навыке больше сертификата.