Траектория «Геймдев» · линия B · конспект 1 из 8

Пиксель-арт: основы

О чём эта тема: Первый конспект линии ассетов: что такое пиксель-арт, в каких программах его рисуют и из каких этапов складывается работа — контур, цвет, светотень и текстурирование.
Аннотация: Конспект начинается с короткой истории жанра и выбора инструментов — от универсальных графических редакторов до специализированных Aseprite и Piskel. Затем разбираются четыре этапа создания пиксельного рисунка: контур (лайн) и семь его типов, работа с цветом и требования к палитре, светотень через теневой градиент, контур и блики, и текстурирование — техники дизеринга и сглаживания. Ключевые приёмы показаны на программно построенных примерах, а закрепляются во встроенном мини-редакторе пиксель-арта: сетка 16×16, ограниченная палитра, карандаш, заливка и дизеринг-кисть; готовый спрайт можно скачать как PNG — он пригодится в следующем конспекте при импорте в Unity.
Пререквизиты: Линия B не требует конспектов линии A: начинать можно отсюда. Пригодится базовое представление о цвете (яркость, насыщенность).
Мотивация: Игре из линии A нужны спрайты: персонаж, кнопки, иконки. Заказывать художника студенту негде, а «программистская графика» из цветных прямоугольников убивает впечатление даже от хорошей механики. Пиксель-арт — самый доступный стиль для непрофессионала: ограниченное разрешение и палитра прощают отсутствие академической школы, а несколько простых приёмов заметно поднимают качество результата.

1. Жанр и инструменты

Пиксель-арт стал популярным благодаря играм 1980–90-х: тогда почти вся игровая графика была пиксельной. С развитием техники её вытеснили трёхмерные модели и детализированный арт, но жанр не умер, а с 2010-х снова набирает популярность. Причины прагматичные: узнаваемая «ретро»-эстетика и экономия рабочих часов — и на отдельном арте, и на целой игре.

Инструменты. Рисовать пиксель-арт можно в любом графическом редакторе, где есть «карандаш» в один пиксель: Photoshop, GIMP, даже Paint. Удобнее — специализированные программы:

Aseprite — фактический стандарт жанра: палитры из готовых картинок, инструменты линий и фигур, быстрые эффекты сглаживания и дизеринга, анимация. Программа платная в Steam, но исходный код открыт — собравший его из репозитория пользуется бесплатно.
Piskel — бесплатный редактор, работающий прямо в браузере (есть и настольная версия). Функциональность скромнее, но основное на месте: слои, заливка, выделение, дизеринг. Хорош для быстрых набросков.

Этапы работы над пиксельным рисунком те же, что в обычном цифровом рисунке: контур (лайн) → цвет → светотень → текстура. Рисовать можно и «от пятна», и «от контура» — дальше разберём каждый этап с его пиксельными особенностями.

2. Контур (лайн)

Лайн — контур толщиной в один-два пикселя, задающий очертания объекта. Разные виды лайна создают разные ощущения; удобная классификация выделяет семь типов:

Тип лайна	Суть и назначение
Стандартный	Простой контур в один пиксель — самый частый и самый простой в исполнении.
Двойной	Контур в два-три пикселя: выделяет главный спрайт среди второстепенных. Перестараться легко — вместо акцента получится «грязь».
Цветной	Контур — тёмный оттенок цвета самого объекта (у голубого персонажа — синий). Понижает контраст, «вписывает» объект в окружение; годится для фоновых объектов.
Контурный	Как цветной, но для многоцветного объекта: каждая область получает контур из тёмного оттенка своего цвета.
Световой	Контур подчёркивает направление света: с освещённой стороны — светлый оттенок, с затенённой — тёмный. Даёт рельеф и объём.
Выборочный	Световой лайн плюс техника сглаживания (о ней в разделе 5).
Ломаный	Чёрный контур с намеренными разрывами: смягчает резкие линии.

3. Цвет и палитра

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

Палитра ограничена. Для большой сцены достаточно 16–32 цветов, для одного персонажа хватает и шести. Избыток цветов делает рисунок «шумным»: глазу не за что зацепиться.
Палитра сбалансирована. Цвета должны различаться по насыщенности: насыщенные — для акцентов, блеклые — для фона. Сплошь «ядовитая» палитра утомляет, сплошь блеклая — скучна.

Готовые проверенные палитры удобно брать из каталога lospec.com/palette-list — там же видно, какие работы нарисованы каждой палитрой. Палитра мини-редактора ниже — 8 цветов, и этого достаточно для полноценного спрайта.

4. Светотень

Объём в пиксель-арте создаётся тремя приёмами, которые работают вместе:

Теневой градиент — переход от светлого оттенка к тёмному по мере удаления от источника света. Особенность жанра: оттенков нужно мало — трёх-четырёх тёмных ступеней исходного цвета достаточно; больше — хуже читается.
Контур — световой или выборочный лайн из раздела 2: светлая сторона освещена, тёмная в тени.
Блики — маленькое пятно самого светлого цвета палитры круглой или овальной формы на освещённой стороне.

5. Текстурирование: дизеринг и сглаживание

На последнем этапе объект детализируют. У пиксель-арта здесь две особые техники.

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

Сглаживание — размытие резких границ пикселями промежуточного цвета: на стыке чёрного контура и белой заливки ставятся серые пиксели. В меру — объект становится живее и мягче; в избытке — «грязным».

градиент: 3 оттенка + блик

дизеринг: шахматный переход

сглаживание ступенек

Примеры построены программно — присмотритесь к ним в масштабе: каждый «квадратик» и есть пиксель.

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

Тренажёр · мини-редактор пиксель-арта

Холст 16×16 и палитра из 8 цветов. Инструменты: карандаш, дизеринг-кисть (красит в шахматном порядке), заливка и ластик; правая кнопка мыши — пипетка. Нарисуйте маленький спрайт — монетку, гриб, сердце — применив приёмы конспекта: ограниченную палитру, теневой градиент, блик и сглаживание. Кнопка «скачать PNG» сохранит спрайт — он понадобится в конспекте B02 для импорта в Unity.

в натуральную величину:

палитра

инструмент

показывать сетку

Правая кнопка — пипетка: берёт цвет из клетки. Рисовать можно протягиванием.

Контрольные вопросы

Две причины: узнаваемая «ретро»-эстетика игр 80–90-х и экономия труда — ограниченное разрешение и палитра требуют меньше рабочих часов на арт и на игру целиком.
Цветной — контур из тёмного оттенка единственного цвета объекта; контурный — то же для многоцветного объекта: каждой области свой тёмный оттенок. Световой — контур со светлой стороной у источника света и тёмной в тени; выборочный — световой плюс сглаживание.
Ограниченность: 16–32 цвета для сцены, около 6 для персонажа — избыток делает рисунок шумным. Сбалансированность: цвета разной насыщенности — насыщенные для акцентов, блеклые для фона.
Трёх-четырёх тёмных ступеней исходного цвета обычно достаточно. Большее число переходов ухудшает читаемость спрайта — снижение числа оттенков с четырёх до трёх нередко делает рисунок чётче.
Расстановка пикселей двух цветов в шахматном порядке, которую глаз усредняет в третий цвет. Исторически — обход ограничений памяти; сегодня — художественный приём: фактура «старины» и смягчение границ теневого градиента.
По резким границам ставятся пиксели промежуточного цвета (между чёрным контуром и белой заливкой — серые) — ступеньки смягчаются. Опасность в избытке: слишком много сглаживающих пикселей делают объект «грязным».

Источники

Как рисовать в стиле пиксель-арт: пошаговый гайд, программы и полезные ссылки // Smirnov School : [сайт]. — URL: https://smirnov.school/blog/gameart/osnovy-risovaniya-piksel-arta/ (дата обращения: 08.07.2026).
Yu, D. Pixel Logic — A Guide to Pixel Art / D. Yu. — [Электронное издание], 2019. — 242 p.
Lospec : палитры и ресурсы для пиксель-арта : [сайт]. — URL: https://lospec.com (дата обращения: 08.07.2026).
Aseprite : [сайт программы]. — URL: https://www.aseprite.org (дата обращения: 08.07.2026).
Piskel : [онлайн-редактор]. — URL: https://www.piskelapp.com (дата обращения: 08.07.2026).